CSS for Dark theme for Graylog 02

README.md

It can be used with Stylus extension

For chrome: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

For firefox: https://addons.mozilla.org/en-US/firefox/addon/styl-us/

After installing the above extension. Copy the provided css contents. Open your graylog page and then click on the stylus extension icon, you'll see an option to "Write style for ...". Click on it and then paste the copied content. Adjust the url in the "Applies to" section at the bottom as per your graylog url format.

Graylog02DarkTheme.css

@-moz-document url-prefix("https://graylog"), url-prefix("https://gettingstarted.graylog.org") {
body {
    background-color: black;
    color: #999;
}
h1, h2, h3, h4, h5, h6 {
    color: #ddd;
}
svg {
    background-color: #666;
}
svg.rickshaw_graph.y_axis {
    background: none;
}
#universalsearch {
    background-color: #222;
    border: 1px solid #444;
}
.timerange-selector-container {
    border-bottom: 1px solid #444;
}
.dropdown-menu {
    background-color: #666;
}
.dropdown-menu>li>a {
    color: #ddd;
}
.dropdown-menu>li>a:hover {
    background-color: #888;
    color: white;
}
.form-control {
    background-color: #666 !important;
}
input.form-control, select.form-control, textarea.form-control {
    color: #ddd !important;
}
.btn {
    color: #ddd;
    background-color: #666 !important;
    border-color: #444;
}
.btn:hover {
    border-color: #888;
    color: white;
}
.content-col {
    background-color: #222;
    border: 1px solid #444;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #ddd;
    background-color: #444;
    border: 1px solid #aaa;
}
.nav-tabs>li>a:focus, .nav-tabs>li>a:hover {
    background-color: #444;
    border: 1px solid #aaa;
}
.modal-content {
    background-color: #444;
}
.well {
    background-color: #777;
    color: beige;
}
.panel {
    background-color: #666;
    border: 1px solid transparent;
}
.message-details-title a {
    color: #ddd;
}
.search-results-table {
    border-left: 0;
}
.search-results-table>div {
    border-left: none;
}
table.messages tr.message-row .message-wrapper:after {
    background: none;
}
#message-table-paginator-bottom nav {
    background-color: hsla(1, 0%, 30%, 0.8);
    border-top: 1px solid #aaa;
}
.alert-info {
    background-color: #666;
    border-color: #999;
    color: #ddd;
}
.Select-control {
    background-color: #666 !important;
}
.Select-placeholder, .Select-value-label, .Select-input, .Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label, .Select.has-value.Select--single>.Select-control .Select-value .Select-value-label {
    color: #ddd;
}
.Select-menu-outer {
    background-color: #666;
    color: #ddd;
}
.Select-option {
    background-color: #666;
    color: #ddd;
}
.Select-option.is-focused {
    background-color: #444;
    color: #ddd;
}
.Select-option.is-selected {
    color: #ddd;
}
.pagination>li>a, .pagination>li>span {
    background-color: #666;
    color: #ddd;
}
.pagination>li>a:hover, .pagination>li>span:hover {
    background-color: #888;
    color: #15223e;
}
.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
    color: #bbb;
    background-color: #777;
}
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #777;
    color: navajowhite;
}
.table-striped>tbody>tr:nth-of-type(even) {
    background-color: #666;
    color: navajowhite;
}
.table-striped>tbody>tr:hover, .table>tbody>tr:hover {
    background-color: #999;
    color: #15223e;
}
.table.messages>tbody>tr:hover {
    background: none;
    color: inherit;
}
.table>tbody>tr.active {
    color: navajowhite;
}
.table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active {
    background-color: #888;
}
.popover, .popover-title, .popover-content {
    background-color: #666;
    color: #ddd;
}
.popover.left>.arrow, .popover.left>.arrow:after {
    border-left-color: #666 !important;
}
.popover.right>.arrow, .popover.right>.arrow:after {
    border-right-color: #666 !important;
}
.nav-pills>li>a:hover {
    background-color: #777;
}
div.row.content.content-head, .content {
    background-color: #222 !important;
    color: #ddd;
    border-color: #444;
}
div.widget-title {
    color: white;
}
.widget-description {
    color: white;
}
#drag-widgets-description {
    color: #ddd;
}
.widget {
    background-color: gray;
    color: #15223e;
}
li.gs-w {
    border: 0px !important;
}
.dc-table-label {
    background-color: #d4d5d6;
    color: #15223e;
}
tr.dc-table-row:hover {
    background-color: #777 !important;
}
.fa-circle:before {
    color: #16ace3;
}
.table>tbody>tr.info>td, .table>tbody>tr.info>th, .table>tbody>tr>td.info, .table>tbody>tr>th.info, .table>tfoot>tr.info>td, .table>tfoot>tr.info>th, .table>tfoot>tr>td.info, .table>tfoot>tr>th.info, .table>thead>tr.info>td, .table>thead>tr.info>th, .table>thead>tr>td.info, .table>thead>tr>th.info {
    background-color: #a9b0ff;
}
}

hi nice css style
i was trying to map this with the src code from graylog2.less file
some are the same in that. since i want to build it in the graylog.jar :)

any hints what u mapped with this
https://github.com/Graylog2/graylog2-server/blob/master/graylog2-web-interface/public/stylesheets/graylog2.less

Hi dio,

I haven't explored how to embed it as a default style for graylog on the backend. It'd be much more trickier to do that way I'm sure. The beauty of applying it on the browser via extension is that it applies after page renders and overrides the existing styles. So I can't really help you in that way.