├── LICENSE ├── README.md ├── skin-blue.css └── skin-blue.min.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Jacob Bates 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # pi-hole-midnight 2 | Custom dark theme CSS for pi-hole to replace skin-blue AdminLTE theme. 3 | 4 | Created for use with [pi-hole](https://github.com/pi-hole/pi-hole). 5 | 6 | [![Screenshot](https://i.imgur.com/UrmgpyN.png)](https://i.imgur.com/UrmgpyN.png) 7 | 8 | --- 9 | 10 | ## Install 11 | Type the following commands into SSH, line by line. 12 | 13 | ``` 14 | cd /var/www/html/admin/style/vendor/ 15 | sudo git clone https://github.com/jacobbates/pi-hole-midnight.git 16 | sudo rm -f skin-blue.min.css 17 | sudo cp pi-hole-midnight/skin-blue.min.css . 18 | sudo rm -rf pi-hole-midnight 19 | ``` 20 | Don't forget the trailing " ." on the cp line (it means copy to current directory). 21 | 22 | ## Uninstall/Revert 23 | Type the following commands into SSH, line by line. 24 | 25 | ``` 26 | cd /var/www/html/admin/style/vendor/ 27 | sudo git reset --hard 28 | ``` 29 | 30 | --- 31 | 32 | ### License 33 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 34 | -------------------------------------------------------------------------------- /skin-blue.css: -------------------------------------------------------------------------------- 1 | /* pi-hole-midnight */ 2 | /* Custom dark theme CSS for pi-hole to replace skin-blue AdminLTE theme */ 3 | /* https://github.com/jacobbates/pi-hole-midnight/ */ 4 | 5 | body { 6 | background:#000; 7 | } 8 | 9 | button,.btn-default { 10 | background-color:#080909; 11 | border:1px solid #666; 12 | color:#b2b2b2; 13 | } 14 | 15 | input,.form-control,pre,.box-footer,.datatables_processing { 16 | background:#080909; 17 | border:1px solid #666; 18 | color:#b2b2b2; 19 | } 20 | 21 | html { 22 | scrollbar-3dlight-color:#3c8dbc; 23 | scrollbar-arrow-color:#000; 24 | scrollbar-base-color:#3c8dbc; 25 | scrollbar-dark-shadow-color:#3c8dbc; 26 | scrollbar-face-color:#3c8dbc; 27 | scrollbar-highlight-color:#3c8dbc; 28 | scrollbar-shadow-color:#3c8dbc; 29 | scrollbar-track-color:#000; 30 | } 31 | 32 | ::-webkit-scrollbar { 33 | height:3px; 34 | width:8px; 35 | } 36 | 37 | ::-webkit-scrollbar-button,::-webkit-resizer { 38 | background-color:#666; 39 | } 40 | 41 | ::-webkit-scrollbar-thumb { 42 | background-color:#3c8dbc; 43 | border-radius:3px; 44 | height:50px; 45 | } 46 | 47 | ::-webkit-scrollbar-track,::-webkit-scrollbar-corner { 48 | background-color:#3c8dbc; 49 | } 50 | 51 | ::-webkit-scrollbar-track-piece { 52 | background-color:#000; 53 | } 54 | 55 | .small-box.bg-aqua,.small-box.bg-green,.small-box.bg-red,.small-box.bg-yellow { 56 | background:#0a0d0f!important; 57 | border-top: 3px solid #3e4244; 58 | } 59 | 60 | .bg-red,.bg-yellow,.bg-aqua,.bg-blue,.bg-light-blue,.bg-green,.bg-navy,.bg-teal,.bg-olive,.bg-lime,.bg-orange,.bg-fuchsia,.bg-purple,.bg-maroon,.bg-black,.bg-red-active,.bg-yellow-active,.bg-aqua-active,.bg-blue-active,.bg-light-blue-active,.bg-green-active,.bg-navy-active,.bg-teal-active,.bg-olive-active,.bg-lime-active,.bg-orange-active,.bg-fuchsia-active,.bg-purple-active,.bg-maroon-active,.bg-black-active,.callout.callout-danger,.callout.callout-warning,.callout.callout-info,.callout.callout-success,.alert-success,.alert-danger,.alert-error,.alert-warning,.alert-info,.label-danger,.label-info,.label-warning,.label-primary,.label-success,.modal-primary .modal-body,.modal-primary .modal-header,.modal-primary .modal-footer,.modal-warning .modal-body,.modal-warning .modal-header,.modal-warning .modal-footer,.modal-info .modal-body,.modal-info .modal-header,.modal-info .modal-footer,.modal-success .modal-body,.modal-success .modal-header,.modal-success .modal-footer,.modal-danger .modal-body,.modal-danger .modal-header,.modal-danger .modal-footer { 61 | color:#fbfbfb!important; 62 | } 63 | 64 | .box,.tab-content,.nav-tabs-custom>.tab-content { 65 | background:#0a0d0f; 66 | border-color:#3e4244; 67 | } 68 | 69 | .box-header.with-border { 70 | background:#1c2021; 71 | border:none; 72 | color:#888; 73 | } 74 | 75 | .content-wrapper,.right-side { 76 | background:#12171a; 77 | color:#808b90; 78 | } 79 | 80 | .list-group-item,.input-group .input-group-addon,.panel,.panel-default>.panel-heading { 81 | background:#1c2021; 82 | border-color:#666; 83 | color:#b2b2b2; 84 | } 85 | 86 | .main-footer { 87 | background:#1a2226; 88 | border-color:#30383b; 89 | color:#b8c7ce; 90 | } 91 | 92 | .nav-tabs-custom,.nav-tabs-custom>.nav-tabs { 93 | background:#0e1010; 94 | border-color:#3e4244; 95 | color:#b2b2b2; 96 | } 97 | 98 | .nav-tabs-custom>.nav-tabs>li.active>a { 99 | border-color:#30383b; 100 | } 101 | 102 | .nav-tabs-custom>.nav-tabs>li.active>a,.nav-tabs-custom>.nav-tabs>li.active:hover>a { 103 | background-color:#0a0d0f; 104 | color:#b2b2b2; 105 | } 106 | 107 | .navbar-custom-menu>.navbar-nav>li>.dropdown-menu,.navbar-nav>.user-menu>.dropdown-menu>.user-footer,.navbar-nav>.user-menu>.dropdown-menu>.user-body a { 108 | background:#0c0d0e!important; 109 | color:#b2b2b2!important; 110 | } 111 | 112 | .pagination>li>a,.pagination>li>span,.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover { 113 | background-color:#292e30; 114 | border-color:#414547; 115 | color:#b2b2b2; 116 | } 117 | 118 | .progress { 119 | background:#12171a; 120 | } 121 | 122 | .skin-blue .list-group-item:hover { 123 | background:#292e30!important; 124 | } 125 | 126 | .skin-blue .main-header .navbar { 127 | background:#222d32; 128 | color:#b8c7ce; 129 | } 130 | 131 | .skin-blue .main-header .navbar .nav>li>a:hover,.skin-blue .main-header .navbar .nav>li>a:active,.skin-blue .main-header .navbar .nav>li>a:focus,.skin-blue .main-header .navbar .nav .open>a,.skin-blue .main-header .navbar .nav .open>a:hover,.skin-blue .main-header .navbar .nav .open>a:focus,.skin-blue .main-header .navbar .nav>.active>a,.skin-blue .main-header .navbar>.sidebar-toggle:hover,.skin-blue .main-header .navbar>.sidebar-toggle:active,.skin-blue .main-header>.logo:hover,.skin-blue .main-header>.logo:active { 132 | background:#3e4244; 133 | } 134 | 135 | .skin-blue .main-header .navbar .navbar-nav>li>a,.skin-blue .main-header .navbar .navbar-custom-menu .navbar-nav>li>a,.skin-blue .main-header .navbar .navbar-right>li>a { 136 | border:none; 137 | } 138 | 139 | .skin-blue .main-header .navbar>.sidebar-toggle { 140 | border:none; 141 | color:#b8c7ce; 142 | } 143 | 144 | .skin-blue .main-header>.logo { 145 | background:#1a2226; 146 | border:none; 147 | color:#b8c7ce; 148 | } 149 | 150 | .skin-blue .sidebar a,.skin-blue .main-header .navbar .nav>li>a { 151 | color:#b8c7ce; 152 | } 153 | 154 | .skin-blue .sidebar a:hover { 155 | text-decoration:none; 156 | } 157 | 158 | .skin-blue .sidebar-form { 159 | border:1px solid #374850; 160 | border-radius:3px; 161 | margin:10px; 162 | } 163 | 164 | .skin-blue .sidebar-form .btn { 165 | border-bottom-left-radius:0; 166 | border-bottom-right-radius:2px; 167 | border-top-left-radius:0; 168 | border-top-right-radius:2px; 169 | color:#999; 170 | } 171 | 172 | .skin-blue .sidebar-form input[type="text"] { 173 | border-bottom-left-radius:2px; 174 | border-bottom-right-radius:0; 175 | border-top-left-radius:2px; 176 | border-top-right-radius:0; 177 | color:#666; 178 | } 179 | 180 | .skin-blue .sidebar-form input[type="text"],.skin-blue .sidebar-form .btn { 181 | background-color:#374850; 182 | border:1px solid transparent; 183 | box-shadow:none; 184 | height:35px; 185 | } 186 | 187 | .skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn { 188 | border-left-color:#fff; 189 | } 190 | 191 | .skin-blue .sidebar-form input[type="text"]:focus,.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn { 192 | background-color:#fff; 193 | color:#666; 194 | } 195 | 196 | .skin-blue .sidebar-menu .treeview-menu>li.active>a,.skin-blue .sidebar-menu .treeview-menu>li>a:hover { 197 | color:#fff; 198 | } 199 | 200 | .skin-blue .sidebar-menu .treeview-menu>li>a { 201 | color:#8aa4af; 202 | } 203 | 204 | .skin-blue .sidebar-menu>li.active>a { 205 | border-left-color:#3c8dbc; 206 | } 207 | 208 | .skin-blue .sidebar-menu>li.header { 209 | background:#1a2226; 210 | color:#4b646f; 211 | } 212 | 213 | .skin-blue .sidebar-menu>li:hover>a,.skin-blue .sidebar-menu>li.active>a,.skin-blue .sidebar-menu>li.menu-open>a { 214 | background:#1e282c; 215 | color:#fff; 216 | } 217 | 218 | .skin-blue .sidebar-menu>li>.treeview-menu { 219 | background:#2c3b41; 220 | margin:0 1px; 221 | } 222 | 223 | .skin-blue .sidebar-menu>li>a { 224 | border-left:3px solid transparent; 225 | } 226 | 227 | .skin-blue .user-panel>.info,.skin-blue .user-panel>.info>a,.nav-tabs-custom>.nav-tabs>li>a { 228 | color:#b2b2b2; 229 | } 230 | 231 | .skin-blue .wrapper,.skin-blue .main-sidebar,.skin-blue .left-side,.skin-blue .main-sidebar,.skin-blue .left-side { 232 | background-color:#222d32; 233 | } 234 | 235 | .table-bordered,.table-responsive,.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td { 236 | border-color:#12171a; 237 | } 238 | 239 | .table-striped>tbody>tr:nth-of-type(odd) { 240 | background-color:#101417; 241 | } 242 | 243 | .layout-boxed { 244 | background-color:#0a0d0f !important; 245 | background-image:none !important; 246 | } 247 | 248 | .chart svg, .chart canvas, .chartjs-render-monitor, .chart-legend { 249 | -webkit-filter: invert(100%); 250 | filter: invert(100%); 251 | } 252 | 253 | #chartjs-tooltip { 254 | filter: invert(100%); 255 | } 256 | 257 | .small-box .icon{ 258 | color: rgba(255,255,255,0.15); 259 | } 260 | 261 | #all-queries tr td:nth-child(6){ 262 | color: #808b90 !important; 263 | } 264 | -------------------------------------------------------------------------------- /skin-blue.min.css: -------------------------------------------------------------------------------- 1 | /* pi-hole-midnight */ 2 | /* Custom dark theme CSS for pi-hole to replace skin-blue AdminLTE theme */ 3 | /* https://github.com/jacobbates/pi-hole-midnight/ */ 4 | body{background:#000}.btn-default,button{background-color:#080909;border:1px solid #666;color:#b2b2b2}.box-footer,.datatables_processing,.form-control,input,pre{background:#080909;border:1px solid #666;color:#b2b2b2}html{scrollbar-3dlight-color:#3c8dbc;scrollbar-arrow-color:#000;scrollbar-base-color:#3c8dbc;scrollbar-dark-shadow-color:#3c8dbc;scrollbar-face-color:#3c8dbc;scrollbar-highlight-color:#3c8dbc;scrollbar-shadow-color:#3c8dbc;scrollbar-track-color:#000}::-webkit-scrollbar{height:3px;width:8px}::-webkit-resizer,::-webkit-scrollbar-button{background-color:#666}::-webkit-scrollbar-thumb{background-color:#3c8dbc;border-radius:3px;height:50px}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background-color:#3c8dbc}::-webkit-scrollbar-track-piece{background-color:#000}.small-box.bg-aqua,.small-box.bg-green,.small-box.bg-red,.small-box.bg-yellow{background:#0a0d0f!important;border-top:3px solid #3e4244}.alert-danger,.alert-error,.alert-info,.alert-success,.alert-warning,.bg-aqua,.bg-aqua-active,.bg-black,.bg-black-active,.bg-blue,.bg-blue-active,.bg-fuchsia,.bg-fuchsia-active,.bg-green,.bg-green-active,.bg-light-blue,.bg-light-blue-active,.bg-lime,.bg-lime-active,.bg-maroon,.bg-maroon-active,.bg-navy,.bg-navy-active,.bg-olive,.bg-olive-active,.bg-orange,.bg-orange-active,.bg-purple,.bg-purple-active,.bg-red,.bg-red-active,.bg-teal,.bg-teal-active,.bg-yellow,.bg-yellow-active,.callout.callout-danger,.callout.callout-info,.callout.callout-success,.callout.callout-warning,.label-danger,.label-info,.label-primary,.label-success,.label-warning,.modal-danger .modal-body,.modal-danger .modal-footer,.modal-danger .modal-header,.modal-info .modal-body,.modal-info .modal-footer,.modal-info .modal-header,.modal-primary .modal-body,.modal-primary .modal-footer,.modal-primary .modal-header,.modal-success .modal-body,.modal-success .modal-footer,.modal-success .modal-header,.modal-warning .modal-body,.modal-warning .modal-footer,.modal-warning .modal-header{color:#fbfbfb!important}.box,.nav-tabs-custom>.tab-content,.tab-content{background:#0a0d0f;border-color:#3e4244}.box-header.with-border{background:#1c2021;border:none;color:#888}.content-wrapper,.right-side{background:#12171a;color:#808b90}.input-group .input-group-addon,.list-group-item,.panel,.panel-default>.panel-heading{background:#1c2021;border-color:#666;color:#b2b2b2}.main-footer{background:#1a2226;border-color:#30383b;color:#b8c7ce}.nav-tabs-custom,.nav-tabs-custom>.nav-tabs{background:#0e1010;border-color:#3e4244;color:#b2b2b2}.nav-tabs-custom>.nav-tabs>li.active>a{border-color:#30383b}.nav-tabs-custom>.nav-tabs>li.active:hover>a,.nav-tabs-custom>.nav-tabs>li.active>a{background-color:#0a0d0f;color:#b2b2b2}.navbar-custom-menu>.navbar-nav>li>.dropdown-menu,.navbar-nav>.user-menu>.dropdown-menu>.user-body a,.navbar-nav>.user-menu>.dropdown-menu>.user-footer{background:#0c0d0e!important;color:#b2b2b2!important}.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover,.pagination>li>a,.pagination>li>span{background-color:#292e30;border-color:#414547;color:#b2b2b2}.progress{background:#12171a}.skin-blue .list-group-item:hover{background:#292e30!important}.skin-blue .main-header .navbar{background:#222d32;color:#b8c7ce}.skin-blue .main-header .navbar .nav .open>a,.skin-blue .main-header .navbar .nav .open>a:focus,.skin-blue .main-header .navbar .nav .open>a:hover,.skin-blue .main-header .navbar .nav>.active>a,.skin-blue .main-header .navbar .nav>li>a:active,.skin-blue .main-header .navbar .nav>li>a:focus,.skin-blue .main-header .navbar .nav>li>a:hover,.skin-blue .main-header .navbar>.sidebar-toggle:active,.skin-blue .main-header .navbar>.sidebar-toggle:hover,.skin-blue .main-header>.logo:active,.skin-blue .main-header>.logo:hover{background:#3e4244}.skin-blue .main-header .navbar .navbar-custom-menu .navbar-nav>li>a,.skin-blue .main-header .navbar .navbar-nav>li>a,.skin-blue .main-header .navbar .navbar-right>li>a{border:none}.skin-blue .main-header .navbar>.sidebar-toggle{border:none;color:#b8c7ce}.skin-blue .main-header>.logo{background:#1a2226;border:none;color:#b8c7ce}.skin-blue .main-header .navbar .nav>li>a,.skin-blue .sidebar a{color:#b8c7ce}.skin-blue .sidebar a:hover{text-decoration:none}.skin-blue .sidebar-form{border:1px solid #374850;border-radius:3px;margin:10px}.skin-blue .sidebar-form .btn{color:#999;border-radius:0 2px 2px 0}.skin-blue .sidebar-form input[type=text]{color:#666;border-radius:2px 0 0 2px}.skin-blue .sidebar-form .btn,.skin-blue .sidebar-form input[type=text]{background-color:#374850;border:1px solid transparent;box-shadow:none;height:35px}.skin-blue .sidebar-form input[type=text]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-blue .sidebar-form input[type=text]:focus,.skin-blue .sidebar-form input[type=text]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-blue .sidebar-menu .treeview-menu>li.active>a,.skin-blue .sidebar-menu .treeview-menu>li>a:hover{color:#fff}.skin-blue .sidebar-menu .treeview-menu>li>a{color:#8aa4af}.skin-blue .sidebar-menu>li.active>a{border-left-color:#3c8dbc}.skin-blue .sidebar-menu>li.header{background:#1a2226;color:#4b646f}.skin-blue .sidebar-menu>li.active>a,.skin-blue .sidebar-menu>li.menu-open>a,.skin-blue .sidebar-menu>li:hover>a{background:#1e282c;color:#fff}.skin-blue .sidebar-menu>li>.treeview-menu{background:#2c3b41;margin:0 1px}.skin-blue .sidebar-menu>li>a{border-left:3px solid transparent}.nav-tabs-custom>.nav-tabs>li>a,.skin-blue .user-panel>.info,.skin-blue .user-panel>.info>a{color:#b2b2b2}.skin-blue .left-side,.skin-blue .main-sidebar,.skin-blue .wrapper{background-color:#222d32}.table-bordered,.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th,.table-responsive{border-color:#12171a}.table-striped>tbody>tr:nth-of-type(odd){background-color:#101417}.layout-boxed{background-color:#0a0d0f!important;background-image:none!important}.chart canvas,.chart svg{-webkit-filter:invert(100%);filter:invert(100%)}.small-box .icon{color:rgba(255,255,255,.15)}#all-queries tr td:nth-child(6){color: #808b90 !important;}.chartjs-render-monitor{filter:invert(100%)}.chart-legend{filter:invert(100%)}#chartjs-tooltip{filter:invert(100%)} 5 | --------------------------------------------------------------------------------