Skip to content

Instantly share code, notes, and snippets.

@hobbes3
Last active June 4, 2019 05:57
Show Gist options
  • Save hobbes3/fbc0c591d49178a7995a to your computer and use it in GitHub Desktop.
Save hobbes3/fbc0c591d49178a7995a to your computer and use it in GitHub Desktop.
dark theme css
/*
* Updated ONLY for 6.3 (not tested on other Splunk versions)
* Known issue: Color ranges for Marker Gauge is all black because I can't distinguish between the different <rect> in the SVG
* - hobbes3
*/
/* BACKGROUND */
body,
.dashboard-body,
.footer,
.dashboard-panel,
.dashboard-cell {
background: #000 !important;
}
/* ALL LIGHT TEXT */
.dashboard-header h2,
p.description,
p.copyright,
.dashboard-panel h2,
.panel-head h3,
.nav-footer>li>a,
.form-settings,
.dashboard-panel input,
.input label,
.html {
color: #ccc !important;
}
/* TABLE */
.table>thead>tr>th {
background-image: linear-gradient(to bottom, #888, #666);
color: white !important;
text-shadow: none;
}
.table>thead>tr>th:hover {
background-image: linear-gradient(to bottom, #666, #444) !important;
color: white !important;
text-shadow: none;
}
.table .sorts a {
text-decoration: none;
color: #ccc;
}
.table>tbody>tr>td {
color: white;
}
.table>tbody>tr:nth-child(even):not(.highlighted)>td:not(.highlighted) {
background-color: #666 !important;
}
.table>tbody>tr:nth-child(odd):not(.highlighted)>td:not(.highlighted) {
background-color: #444 !important;
}
td.highlighted {
background-color: #888 !important;
}
.highlighted td {
background-color: #888 !important;
}
/* SVG */
.highcharts-container svg {
background: #000;
}
.highcharts-container svg>rect:not(.block-background) {
fill: #000 !important;
opacity: 0.1;
}
.highcharts-container svg text:not(.single-result):not(.delta-label) {
fill: #ccc !important;
}
/* EDIT PANELS */
.dashboard-panel input {
background-color: #444;
}
.drag-handle a.delete-panel {
background: #000 !important;
}
/* hobbes3 - removed .header - added .dashboard-body */
body,.dashboard-body,.footer,.app-bar,.dashboard-panel,.dashboard-cell {
background: #333 !important;
}
a {
color: #ccc;
}
a:hover {
color: #fff;
}
.dashboard-row .dashboard-panel .panel-head h3,.dashboard-header h2, p.description, .nav-footer>li>a {
color: #ddd;
text-shadow: none;
}
.dashboard-body .table-striped > tbody > tr:nth-child(odd) > td, .dashboard-body .table-striped > tbody > tr:nth-child(odd) > th {
background-color: #666 !important;
}
.dashboard-body .table .table, .dashboard-body .table-striped>tbody>tr>td {
color: white;
}
.dashboard-body .table .table, .dashboard-body .table-striped>tbody>tr:nth-child(even)>td {
background-color: #888 !important;
}
.dashboard-body .table-chrome > thead > tr > th {
background-image: linear-gradient(to bottom, #888, #666);
color: white !important;
text-shadow: none;
}
.dashboard-body .table-chrome > thead > tr > th:hover {
background-image: linear-gradient(to bottom, #666, #444) !important;
color: white !important;
text-shadow: none;
}
.dashboard-body .table-chrome .sorts a {
text-decoration: none;
color: #ddd;
}
.dashboard-body .highlighted td {
background: #aaa !important;
}
svg>rect {
fill: #333 !important;
}
svg text {
fill: #fff !important;
}
.single-value .single-result {
color: #fff;
}
.single-value .after-label {
color: #999;
}
.splunk-paginator a.selected {
background: #000;
}
/* Below added by hobbes3 */
.panel-body.html, .form-settings, .input label, h2.panel-title {
color: #ddd;
}
.html a, .view-new-time-range-picker-dialog .presets-container a, .sidebar .panel-contents a, #global-system-menu .popdown-dialog-body a, .sourcecode-viewer a {
color: #5379af;
}
.html a:hover, .view-new-time-range-picker-dialog .presets-container a:hover, .sidebar .panel-contents a:hover, #global-system-menu .popdown-dialog-body a:hover, .sourcecode-viewer a:hover {
color: #32496a;
}
#token_debug.table-striped > tbody > tr:nth-child(odd) > td, #token_debug.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #fff !important;
}
#token_debug.table .table, #token_debug.table-striped>tbody>tr:nth-child(even)>td {
background-color: #f5f5f5 !important;
}
@skollcaku
Copy link

Hi, I am using this css for my Splunk instance.
But how can I customize the default (system) text from Splunk (xml dashboard): for example modifying the input panel title text for the dashboard panel?
Which is the specifics in CSS?

Skender

@skollcaku
Copy link

Hi,
Could you provide some explanations or simple comments about this code?
It would be of great help to customize it more quickly...

Thanks,
Skender

@skollcaku
Copy link

Ok, I did this way:
body,.dashboard-body,.footer,.header,.app-bar,.dashboard-panel,.dashboard-cell,.highcharts-container {
background: #18353b !important;
...

.fieldset .input {
width: 220px;
color: #ddd;
}

In this way I control also the text color and other specifics of the input area for dashboards and all gauges background.

Thanks a lot for providing this stylesheet useful for Splunk!
Skender

@ablecable
Copy link

Hi,
Is it possible for the single-value to change colors on the ranges? In the dark.css the single-value is always white.
Thanks in advance
Arjan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment