Just a nice simple darkmode for Splunk Docs. Uses variables so if you don't like the exact color schema, you can easily change it.
Splunk Docs darkmode by mmccul
Mirrored from https://github.com/mmccul/CSS/raw/main/splunk_docs_dark.user.css
Details
Authormmccul
LicenseCC-BY
Categorysplunk
Created
Updated
Size11 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Splunk Docs Dark
@namespace splunk_docs_dark
@version 1.4.8
@description Dark mode for Splunk docs
@author The_Hat
@preprocessor stylus
@license CC-BY-2.5
@var color bg1 "Background" "#373737"
@var color bg2 "Secondary Background" "#222222"
@var color fg1 "Foreground" "#dadada"
@var color fg2 "Muted Foreground" "#b0b0b0"
@var color bg-highlight "Highlight color" "#37378a"
@var color fg-link "Link color" "#a0a0ff"
@var color bg3 "Tertiary Background" "#222240"
@var color bg-tableeven "Table Even Row" "#373737"
@var color bg-tableodd "Table Odd Row" "#303030"
@var text fontsize "Font Size" 12pt
@var color darktext "Dark text Color" "#222222"
@var color lightbg "Light background for transparent pngs" "#c8c8c8"
==/UserStyle== */
@-moz-document domain("docs.splunk.com") {
if fg1 {
:root {
/* To change the variable choices now, you edit the userstyles variable definitions at the top */
--bg1: bg1;
--bg2: bg2;
--bg3: bg3;
--fg1: fg1;
--fg2: fg2;
--bg-highlight: bg-highlight;
--fg-link: fg-link;
--bg-tableeven: bg-tableeven;
--bg-tableodd: bg-tableodd;
--fontsize: fontsize;
--textdark: darktext;
--lightbg: lightbg;
--fontsz-pre: var(--fontsize, 12pt);
--fontsz-text: var(--fontsize, 12pt);
/* --textdark: var(--textdark, #222222); */
--light-bg: var(--lightbg, #c8c8c8);
}
} else {
/* If you are not using Stylus, remove the conditional if block above, remove the else directive and the matching close
bracket then leave the below :root stanza. Conditionals are a Stylus unique extension */
:root {
--bg1: #373737;
--bg2: #222222;
--bg3: #222240;
--fg1: #dadada;
--fg2: #b0b0b0;
--bg-highlight: #37378a;
--fg-link: #a0a0ff;
--bg-tableeven: #373737;
--bg-tableodd: #303030;
--fontsize-pre: 12pt;
--fontsize-text: 12pt;
--light-bg: #c8c8c8;
}
}
body,
.subnav-fixed {
background-color: var(--bg2);
color: var(--fg1);
font-size: var(--fontsz-text);
}
#hero,
#hero .super-title {
background-color: var(--bg2);
color: var(--fg1);
}
#body-details p,
#body-details #main-body ul li {
color: var(--fg1);
}
[class*='panel-body'] {
background-color: var(--bg1);
color: var(--fg1);
}
.panel {
background-color: var(--bg1);
color: var(--fg1);
}
a,
a:visited,
#body-details .paging td a {
color: var(--fg-link);
}
h1 .mw-headline,
h2 .mw-headline,
h1,
h2,
h3 {
color: var(--fg1) !important;
}
#main-body table p {
color: var(--fg1);
}
#body-details .well.caution,
#body-details .well {
background-color: var(--bg1);
color: var(--fg2);
}
pre {
background-color: var(--bg2);
color: var(--fg2);
font-size: var(--fontsz-pre);
}
#body-details #accordionSections h3,
#body-details #main-body h3 {
color: var(--fg1);
}
#detail-page #accordion .panel-body ul li a,
#detail-page #accordionDesktop .panel-body ul li a {
color: var(--fg1);
}
.panel-heading a:hover {
color: var(--fg2);
}
#detail-page #accordion .panel-body ul li.selected a,
#detail-page #accordionDesktop .panel-body ul li.selected a,
#right-nav > ul > li.active a {
color: var(--fg-link);
}
#detail-page #accordion .panel-heading,
#detail-page #accordionDesktop .panel-heading {
background-color: var(--bg3);
color: var(--fg2);
}
#detail-page #accordionDesktop .panel-heading a {
color: var(--fg2);
}
#related,
#related h3 {
background-color: var(--bg1);
color: var(--fg2);
}
#related ul li:before {
color: var(--fg-link);
}
#body-details a {
color: var(--fg-link);
}
#main-body table > tbody > tr:nth-of-type(odd) {
background-color: var(--bg-tableodd);
color: var(--fg1);
}
#main-body table > tbody > tr:nth-of-type(even) {
background-color: var(--bg-tableeven);
color: var(--fg1);
}
#body-details #main-body ul li div.li_content {
color: var(--fg1);
}
button,
input,
optgroup,
select,
textarea {
background-color: var(--bg2);
color: var(--fg2);
}
.search-section {
background-color: var(--bg1);
color: var(--fg1);
}
#body-details #main-body ol li div.li_content {
color: var(--fg2);
}
#body-details #accordionSections .panel-body p,
.mw-content-ltr p {
font-size: var(--fontsz-text);
}
[class*='panel-body'] {
background-color: var(--bg1);
color: var(--fg1);
}
.panel {
background-color: var(--bg1);
color: var(--fg1);
}
#docs-tabs {
background-color: var(--bg2);
color: var(--fg1);
}
.docs-tabs-bodies {
background-color: var(--bg1);
color: var(--fg1);
}
p {
color: var(--fg1);
}
.docs-tabs-bodies .overview-body-colum p,
#overview-body p {
color: var(--fg2);
}
.samplecode p {
color: var(--textdark) !important;
}
.toccolours {
background-color: var(--bg2);
}
div.body h1,
div.body h2,
div.body h3,
div.body h4,
div.body h5,
div.body h6 {
background-color: var(--bg2);
}
div.body {
background-color: var(--bg1);
color: var(--fg1);
}
th.field-name {
background-color: var(--bg2);
}
code.docutils {
background-color: var(--bg2);
}
dl.attribute dt:target {
background-color: var(--bg-highlight);
}
.sui-title__inner .sui-title__text,
.sui-title__inner .sui-title__subtitle {
color: var(--fg1);
}
.sui-title__inner .sui-title__subtitle-term,
.sui-result .sui-result__value-category,
.sui-result .sui-result__value-last-modify {
color: var(--fg2);
}
.sui-app .sui-app-layout-container {
background-color: var(--bg1);
}
.sui-side-content__title-container .sui-side-content__title-label {
color: var(--fg1);
}
.sui-sidebar,
.sui-side-content__container {
background-color: var(--bg3) !important;
}
.MuiPaper-root {
background-color: var(--bg3);
color: var(--fg1);
}
.sui-accordion__label,
.sui-checkbox-facet__label {
color: var(--fg1) !important;
}
.sui-result__title-link,
.sui-result em {
color: var(--fg-link) !important;
}
#sui-search-box__input-wrapper > input,
#sui-search-box__input-wrapper.sui-search-box__wrapper .sui-search-box__text-input:focus,
#sui-search-box__input-wrapper.sui-search-box__wrapper .sui-search-box__text-input {
color: var(--fg1);
}
.sui-facet-search svg {
fill: var(--fg2) !important;
}
.sui-results-per-page,
.sui-paging-info {
color: var(--fg2) !important;
}
input.date-datepicker_end,
.date-datepicker_start input,
.date-datepicker_end,
.date-datepicker_start,
.react-datepicker__input-container,
.sui-select__control {
color: var(--bg2) !important;
}
.sui-checkbox-facet__checkbox svg path {
fill: var(--fg1) !important;
}
.sui-side-content__title-clear-filters {
color: var(--fg2) !important;
}
img {
/* background-color: var(--light-bg); */
filter: hue-rotate(180deg) invert();
}
.navbar-header img,
.logo-wrapper img.splunk-logo.logo-image {
filter: none !important;
}
#detail-page #accordion .panel-body ul li.selected, #detail-page #accordionDesktop .panel-body ul li.selected {
background-color: var(--bg1);
}
#detail-page #accordion .panel-body ul li, #detail-page #accordionDesktop .panel-body ul li {
background-color: var(--bg2);
}
#detail-page #accordion .panel-heading.selected, #detail-page #accordionDesktop .panel-heading.selected {
background-color: var(--bg3);
color: var(--fg1);
}
#detail-page #accordion .panel-heading.selected a, #detail-page #accordionDesktop .panel-heading.selected a {
color: var(--fg2);
}
#detail-page .navbar-header {
background-color: var(--bg3) !important;
}
#detail-page #desktop-menu-header .navbar-header a {
color: var(--fg2);
}
#detail-page .icon-bar {
background-color: var(--light-bg);
}
#right-nav > ul > li a, #right-nav h2 a {
color: var(--fg2);
}
.related-container #related ul li a, #detail-page label {
color: var(--fg2);
}
#detail-page #accordion .panel-body ul li.selected a, #detail-page #accordionDesktop .panel-body ul li.selected a {
background: inherit;
}
#body-details .paging tr {
background-color: var(--bg1) !important;
}
.arrow-previous > a > svg > path, .arrow-next > a > svg > path {
fill: var(--fg2);
}
.breadcrumb > li a:visited, .breadcrumb > li a {
color: var(--fg2);
}
#search-page-container .sui-app {
background-color: inherit;
}
#homepage-body ul li a {
color: var(--fg2);
}
#overview-body {
background-color: var(--bg2);
}
#docs-tabs ul.tabs > li a {
color: var(--fg2);
}
}
@-moz-document url-prefix("https://docs.splunk.com/observability") {
body {
background-co...