original css file from ckforum

styles.css

+/* Not finished */
+/*-----------------------
+# Create by ckforum
+# june 2019
+# release 1.9
+# thanks to yoyo
+------------------------*/
+
+/* INSTALLATION ADD THIS BELOW TO YOUR CONFIG.PHP */
+
+/* SEEE MORE @ https://github.com/librenms/librenms/blob/master/includes/defaults.inc.php */
+/*
+
+### DARK MODE
+// rtext color graph
+$config['rrdgraph_def_text_color'] = 'ffffff';
+
+// Set to TRUE if you want to display the 95% based on the highest value. (aka real 95%)
+$config['overlib_defaults'] = ",FGCOLOR,'#fff', BGCOLOR, '#000', BORDER, 5, CELLPAD, 4, CAPCOLOR, '#555555', TEXTCOLOR, '#ffffff'";
+
+// Set this to false if you want to disable the mouseover popup graphs
+$config['web_mouseover']    = false;
+
+### custom style
+# uncomment line below and replace the logo with yours
+# $config['title_image'] = "images/custom/librenms_logo_light_ck.png";
+# Create a sub dir in html/css folder and create a css files
+$config['webui']['custom_css'][]       = "css/custom/styles.css";
+
+### https://docs.librenms.org/Support/Configuration/#webui-settings
+## this add style is based on mono theme
+$config['site_style']       = "mono";
+*/
+
+
+
+@media (prefers-color-scheme: dark) {
+  img {
+    opacity: .75;
+    transition: opacity .5s ease-in-out;
+  }
+  img:hover {
+    opacity: 1;
+  }
+}
+
+html {
+  --text-color-normal: #0a244d;
+  --text-color-light: #8cabd9;
+}
+
+html[data-theme='dark'] {
+  --text-color-normal: hsl(210, 10%, 62%);
+  --text-color-light: hsl(210, 15%, 35%);
+  --text-color-richer: hsl(210, 50%, 72%);
+  --text-color-highlight: hsl(25, 70%, 45%);
+}
+
+/* SCROLL BAR*/
+
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-moz-scrollbar {
+    width: 8px;
+}
+
+/* Track */
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+}
+
+::-moz-scrollbar-track {
+    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+}
+
+/* Handle */
+
+::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    background: rgba(97, 94, 94, 0.8);
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+}
+
+::-moz-scrollbar-thumb {
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    background: rgba(97, 94, 94, 0.8);
+    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+}
+
+
+::-webkit-scrollbar-thumb:window-inactive {
+    background: rgba(255,0,0,0.4); 
+}
+::-moz-scrollbar-thumb:window-inactive {
+    background: rgba(255,0,0,0.4);
+}
+
+/* end Scroll */
+
+
+
+
+
+body {
+  background-color: #070707;
+  color: white;
+}
+@media screen and (prefers-color-scheme: light) {
+  body {
+    background-color: white;
+    color: black;
+  }
+}
+
+
+a:hover {
+  background-color: grey;
+}
+
+
+.gridster {
+    background-color: black;
+}
+
+
+.devices-headers-table-menu {
+    background-color:#000;
+}
+
+.panel {
+    background-color:#333;
+
+}
+
+.panel>.panel-collapse>.table, .panel>.table, .panel>.table-responsive>.table {
+    background-color: black;
+    color: yellow;
+}
+
+.panel-default {
+    border-color: #333;
+}
+
+.panel-default>.panel-heading {
+    border-color: #777777;
+}
+.panel-default>.panel-heading {
+background-color: #777777;
+}
+
+
+A.grey:visited, A.grey, .grey {
+    color: #8aaad6;
+}
+
+.navbar-inverse {
+    background-color: #2a2a2a;
+}
+
+.table-responsive .bootgrid-table td, .table-responsive .bootgrid-table th>.column-header-anchor>.text {
+    color: yellow;
+}
+
+.table-striped>tbody>tr:nth-of-type(odd) {
+    background-color: #2b2626;
+}
+
+.form-control {
+    background-color: #000;
+}
+
+.nav-tabs {
+    border-bottom: 1px solid #333;
+}
+
+.edit-widget, .close-widget { cursor: pointer; }
+.widget_body {
+    background-color: #333333;
+    color: wheat;
+}
+
+.widget_header {
+     background-color: #777777;
+}
+
+.icon-theme {
+    color: #f3f3f3;
+}
+
+
+.device-overview>.panel-body>.row:nth-child(odd) {
+    background-color: #333333;
+}
+.device-overview>.panel-body>.row:nth-child(odd) {
+    background-color: #333333;
+}
+
+.devices-graphs-select {
+    background-color: black;
+}
+
+
+.device-head, a.list-device {
+    color: #77a7d2;
+}
+
+.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
+    background-color: black;
+}
+
+
+
+.dropdown-menu {
+    color : white;
+    background-color: #6b6666;
+    
+}
+
+.dropdown-menu>li>a {
+ 
+    color: #fffefe;
+}
+
+.select2-container--bootstrap .select2-selection--single .select2-selection__placeholder {
+    color: #999;
+  background-color: black;
+}
+
+.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn {
+    background-color: black;
+    color: wheat;
+}
+
+.select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection {
+    background-color: black;
+}
+
+.select2-container--bootstrap .select2-selection--single {
+    background-color: black;
+    border-style: solid;
+    border-color: #333;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+    background-color: black;
+}
+
+
+.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+    background-color: #000;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    color: #fff;
+    font-size: 14px;
+}
+
+
+button, input, optgroup, select, textarea {
+    background-color: black;
+}
+
+
+.gridster .gs-w {
+    background: #202020;
+}
+
+A.black:visited, A.black, .black {
+    color: #fff1f1;
+}
+
+.interface-upup, a.interface-upup {
+    color: #9dfd8e;
+}
+
+
+.bootgrid-footer .search .glyphicon, .bootgrid-header .search .glyphicon {
+ 
+    background-color: black;
+}
+
+.table>tbody>tr.success>td, .table>tbody>tr.success>th, .table>tbody>tr>td.success, .table>tbody>tr>th.success, .table>tfoot>tr.success>td, .table>tfoot>tr.success>th, .table>tfoot>tr>td.success, .table>tfoot>tr>th.success, .table>thead>tr.success>td, .table>thead>tr.success>th, .table>thead>tr>td.success, .table>thead>tr>th.success {
+    background-color: #212121;;
+}
+
+.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
+
+    background-color: #212121;
+}
+
+.table>thead>tr>th {
+ 
+    border-bottom: 2px solid #3e3939;
+}
+
+
+.table-responsive .bootgrid-table td, .table-responsive .bootgrid-table th>.column-header-anchor>.text {
+    color: white;
+    background-color: #333333;
+}
+.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
+
+    background-color: black;
+}
+
+.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
+    color: #777;
+    cursor: not-allowed;
+    background-color: #000;
+    border-color: #0a0a0a;
+}
+.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
+    color: #777;
+    cursor: not-allowed;
+    background-color: #000;
+    border-color: #0a0a0a;
+}
+
+.pagination>li>a, .pagination>li>span {
+    position: relative;
+    float: left;
+    padding: 6px 12px;
+    margin-left: -1px;
+    line-height: 1.42857143;
+    color: #337ab7;
+    text-decoration: none;
+    background-color: #000;
+    border: 1px solid #333;
+}
+
+
+
+.device-table-metrics span {
+    color: white;
+}
+
+.btn-default {
+    color: #ada5a5;
+    background-color: #000;
+    border-color: #313131;
+}
+
+.input-group-addon:first-child {
+    color: #ada5a5;
+    background-color: #000;
+    border-color: #313131;
+}
+
+.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
+    background-color: black;
+    border-color: #313131;
+}
+
+.select2-container--bootstrap .select2-dropdown {
+    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    border-color: #66afe9;
+    overflow-x: hidden;
+    margin-top: -1px;
+    background-color : #333;
+}
+
+
+
+.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
+    color: #fff;
+    background-color: #333;
+    border: 1px solid #333;
+    border-bottom-color: transparent;
+}
+
+.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
+    color: #fff;
+    cursor: default;
+    background-color: #333;
+    border: 1px solid #333;
+    border-bottom-color: transparent;
+}
+
+.bootgrid-table td.loading, .bootgrid-table td.no-results {
+    background: #000;
+ 
+}
+
+.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
+    padding: 8px;
+    line-height: 1.42857143;
+    vertical-align: top;
+    border-top: 0px solid #61616145;
+    background-color:#333333;
+}
+
+.table-hover, .table-condensed, .table-striped, .bootgrid-table {
+background-color :black;
+}
+
+.list-group-item {
+ 
+    background-color: #020202;
+ 
+}
+
+.form-control {
+ 
+    border: 1px solid #222;
+ 
+}
+
+pre {
+    display: block;
+    padding: 9.5px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    line-height: 1.42857143;
+    color: #fffefe;
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: #000000;
+    border: 1px solid #3a3636;
+    border-radius: 4px;
+}
+
+.bg-danger {
+    background-color: #ad3636;
+}
+
+hr {
+    border: 0px;
+    height: 1px;
+    background-color: #333;
+    color: #ccc;
+}
+
+/* FOOTER */
+
+.panel-footer {
+    background-color: black;
+}