dark theme css

dark.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;
}

old_dark.css

/* 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;
}

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

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

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

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