A darker ServiceNow with parameters to fit servicenowservices (the URL for SNOW pages).
Dark SNOW Parameterized by mmccul
Details
Authormmccul
LicenseMIT
Categoryservicenowservices
Created
Updated
Size25 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
The goal was to make SNOW dark mode, but also make it easy to customize because not everyone likes my color and font choices.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. /* ==UserStyle==
@name Dark SNOW Parameterized
@namespace dark_snow_param
@version 1.3.5
@description A darker SNOW, with parameters for customization
@author The_Hat
@preprocessor stylus
@var color primarybg "Primary Background" "#373737"
@var color secondarybg "Secondary Background" "#222222"
@var color tertiarybg "Tertiary Background" "#2a3a40"
@var color bg-tableeven "Table Background even row" "#373737"
@var color bg-tableodd "Table Background odd row" "#303030"
@var color fg-link "Link color" "#a0a0ff"
@var color bg-highlight "Background Highlight" "#3a4a55"
@var text fontsize "Font size" 12pt
@var select fontfamily "Font Family" {
"Serif": "serif",
"Sans-serif": "sans-serif"
}
@var color fg1 "Main font color" "#dadada"
@var color fg2 "Muted font color" "#b0b0b0"
@var color bg-button "Button Background" "#e0e0e0"
@var color bg-green "Green Buttons" "#004000"
@var color fg-dark "Dark (contrast) font color" "#2c2c2c"
}
==/UserStyle== */
@-moz-document domain("servicenowservices.com"),
regexp("^\\/email_display.do") {
/* No longer set directly here, use the Stylus configuration options to configure your color choices */
if primarybg {
:root {
--bg1: primarybg;
--bg2: secondarybg;
--bg3: tertiarybg;
--bg-highlight: bg-highlight;
--fg-link: fg-link;
--bg-tableeven: bg-tableeven;
--bg-tableodd: bg-tableodd;
--fontsize: fontsize;
--fg: fg1;
--fg1: fg1;
--fg2: fg2;
--bg-button: bg-button;
--bg-green: bg-green;
--fontfamily: fontfamily;
--fg-dark: fg-dark;
--now-color--neutral-18: fg2;
--now-color_background--secondary: var(--bg2);
--now-color_text--primary: var(--fg1);
--now-color--primary-2: var(--fg2);
--now-color_background--primary: var(--bg1);
--now-text-link--primary--color: var(--fg-link);
--now-color--link-2: var(--fg-link);
/* These are to deal with shadow root where I cannot directly set styles */
--now-modal--background-color: 32, 32, 32;
--now-modal_heading--color: 218, 218, 218;
}
}
body {
--now-global-font-size--xs: 12pt;
--now-global-font-size--md: 12pt;
--now-global-font-size--sm: 12pt;
--now-global-font-size--lg: 16pt;
--now-global-font-size--xl: 20pt;
--now-global-font-size--xxl: 24pt;
--now-global-font-size--3xl: 28pt;
--now-color_text--primary: 218, 218, 218;
--now-button--secondary--color: 50, 50, 50;
}
body {
background-color: var(--bg1);
color: var(--fg1) !important;
font-size: var(--fontsize);
font-family: var(--fontfamily);
}
.navbar-default {
background-color: inherit;
color: var(--fg1);
}
HTML[data-doctype=true] H1.form_header {
color: var(--fg1);
}
HTML[data-doctype=true] BODY {
color: var(--fg1);
background-color: var(--bg1);
}
.has-success .control-label,
.has-warning .control-label,
.has-error .control-label,
.is-required .control-label,
.is-filled .control-label {
color: var(--fg1);
}
.list_odd,
tr.list_odd .list_decoration_cell,
tr.list_odd td {
background-color: var(--bg-tableodd)!important;
}
.list_even,
tr.list_even .list_decoration_cell,
tr.list_even td {
background-color: var(--bg-tableeven)!important;
}
HTML[data-doctype=true] tr.list_even td,
HTML[data-doctype=true] tr.list_odd td,
HTML[data-doctype=true] .drag_section_header,
HTML[data-doctype=true] SELECT:not([readonly="readonly"]) {
color: var(--fg1);
}
.table td a,
.table th a {
color: var(--fg-link);
}
HTML[data-doctype=true] .list_nav.list_nav_top {
background: var(--bg1);
}
.breadcrumb_container {
background: var(--bg1);
}
table,
tr.list_header,
tr.list_header_search_row {
background-color: var(--bg1) !important;
}
HTML[data-doctype=true] TR.list_header th,
HTML[data-doctype=true] TR.list_header.hierarchical th.hierarchical,
HTML[data-doctype=true] TR.list_header td {
background: var(--bg2);
}
.sn-card-component_summary .sn-widget-textblock,
.sn-card-component_records .sn-widget-list-table-cell:last-of-type {
font: var(--fontsize) monospace;
}
.form-control,
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control,
.h-card {
background: var(--bg2);
color: var(--fg1);
font-size: var(--fontsize);
}
.sn-card-component_summary .sn-widget-textblock,
.sn-card-component_records .sn-widget-list-table-cell:last-of-type {
color: var(--fg1);
}
.sn-widget-list li,
.sn-card-component {
color: var(--fg2);
}
a:hover,
a:focus,
a {
color: var(--fg-link);
}
HTML[data-doctype=true] ul.tagit {
background-color: var(--bg2);
color: var(--fg1);
}
.list_nav {
background-color: var(--bg1);
}
HTML[data-doctype=true] .context_menu {
background: var(--bg1);
color: var(--fg1);
}
.context_item {
color: var(--fg1);
}
.default-focus-outline:focus {
outline: 5px auto var(--bg-highlight);
}
.context_item.context_menu_hover,
.context_item:focus {
background-color: var(--bg-highlight);
}
.vcr_controls input {
color: var(--fg1) !important;
}
.compact .form-control {
font-size: var(--fontsize);
}
html[stylus-iframe*="servicenowservices.com"] body {
color: var(--fg1) !important;
}
HTML[data-doctype=true] INPUT.ref_invalid {
background-color: var(--bg2);
}
button.form_action_button {
font-weight: bold;
}
#AC\.incident\.assignment_group_shim {
background-color: var(--bg1)
}
.fieldmessage-container,
.input-group,
#sys_display.incident.assignment_group,
incident.assignment_group,
#AC\.incident\.assignment_group,
[class='ac_dropdown'] .input-group input {
background-color: var(--bg2) !important;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control,
.ui-draggable-iframeFix,
.input-group.ref-container {
background-color: var(--bg2);
}
.popover {
background-color: var(--bg2);
}
.popover-title,
.popover-header h1,
.popover-header.popover-header-bar .popover-title {
background-color: inherit;
color: var(--fg1);
font-weight: bold;
}
.btn-default,
.btn-destructive-subdued,
.btn-success-subdued,
.nav-segmented > li {
background-color: var(--bg-button);
font-weight: bold;
}
.filterToolbar {
background-color: var(--bg1);
}
.select2-container .select2-choice {
background-color: var(--bg2);
color: var(--fg1);
}
HTML[data-doctype=true] .select2-container,
HTML[data-doctype=true] .select2-choice,
HTML[data-doctype=true] .select2-drop,
TR.sn-filter-section-message > TD h3 {
color: var(--fg1);
}
.select2-drop,
.select-drop {
background: var(--bg1);
}
input {
background-color: var(--bg2);
color: var(--fg1);
}
HTML[data-doctype=true] .list_message_row,
.tabs2_list.list_v2 {
background: var(--bg1);
}
#AC\.incident\.assignment_group.ac_dropdown {
background-color: var(--bg1) !important;
}
.panel {
background-color: inherit;
}
.modal-content {
background-color: var(--bg2);
}
.well {
background-color: var(--bg2);
}
.breadcrumbs-container {
background-color: var(--bg1);
color: var(--fg1);
}
.a-disabled.ng-binding.ng-scope,
.text-muted {
color: var(--fg2);
}
HTML[data-doctype=true] BODY.non_standard_lists {
background: var(--bg1);
color: var(--fg1);
}
.select2-drop {
color: var(--fg1);
}
html[data-doctype=true] .popover-item-list .popover-body button,
html[data-doctype=true] .popover-item-list .popover-body a {
color: var(--fg-link);
}
HTML[data-doctype=true] BUTTON:not(.btn),
HTML[data-doctype=true] INPUT.button {
background: var(--bg2);
}
HTML[data-doctype=true] div.ac_dropdown .ac_header {
background: var(--bg2);
}
HTML[data-doctype=true] div.ac_dropdown .ac_highlight {
background: var(--bg-high...