├── examples ├── skin-midnight-graphs.png └── skin-midnight-overview.png ├── LICENSE ├── README.md └── dist └── css └── skins ├── skin-midnight.min.css └── skin-midnight.css /examples/skin-midnight-graphs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anvyst/adminlte-skin-midnight/HEAD/examples/skin-midnight-graphs.png -------------------------------------------------------------------------------- /examples/skin-midnight-overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anvyst/adminlte-skin-midnight/HEAD/examples/skin-midnight-overview.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Andrey Vystavkin 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 | # AdminLTE Midnight Dark Theme 2 | [AdminLTE](https://github.com/almasaeed2010/AdminLTE) uses `skins` to produce minor changes to its colour schema. 3 | 4 | ![alt text](https://github.com/anvyst/adminlte-skin-midnight/blob/master/examples/skin-midnight-overview.png?raw=true) 5 | 6 | # Installation 7 | 8 | For production system it's enough to copy `dist/css/skins/skin-midnight.min.css` files 9 | to where your styles reside and include it to your page. 10 | 11 | # Contribution 12 | 13 | Current theme was developed using AdminLTE v2.3.8 release, thus some of the packages 14 | might be outdated, like `grunt`. 15 | 16 | For patching and contributing to Midnight theme skin, you should locally clone AdminLTE 17 | repository: 18 | 19 | ```bash 20 | 21 | git clone git@github.com:almasaeed2010/AdminLTE.git 22 | cd AdminLTE 23 | yarn 24 | ``` 25 | 26 | Add `skin-midnight` to `Gruntfile.js` build instructions: 27 | 28 | ```less 29 | 30 | /* in build/less/skins/_all_skins.less add following line*/ 31 | @import "skin-midnight.less"; 32 | 33 | ``` 34 | 35 | ```javascript 36 | 37 | // in Grunfile.js add following lines: 38 | 39 | grunt.initConfig({ 40 | less: { 41 | ... 42 | development: { 43 | files: { 44 | ... 45 | "dist/css/skins/skin-midnight.css": "build/less/skins/skin-midnight.less", 46 | } 47 | } 48 | }, 49 | production: { 50 | ... 51 | files: { 52 | ... 53 | "dist/css/skins/skin-midnight.min.css": "build/less/skins/skin-midnight.less", 54 | } 55 | } 56 | }); 57 | ``` 58 | 59 | Once it's all done you can run `grunt less` or `grunt watch` to make sure that `skin-midnight` was properly compiled. 60 | 61 | **Note:** v2.3.8 AdminLTE uses v0.4.5 of `grunt` so you might have to run `npm i -g grunt@0.4.5` 62 | 63 | # References 64 | 65 | * AdminLTE [repository](https://github.com/almasaeed2010/AdminLTE) 66 | * AdminLTE [demo](https://adminlte.io/themes/AdminLTE/index2.html) 67 | -------------------------------------------------------------------------------- /dist/css/skins/skin-midnight.min.css: -------------------------------------------------------------------------------- 1 | .skin-midnight{color:#bec5cb}.skin-midnight h4{color:#44def1}.skin-midnight .content-header>.breadcrumb>li>a{color:#bec5cb}.skin-midnight .table>thead>tr>th,.skin-midnight .table>tbody>tr>th,.skin-midnight .table>tfoot>tr>th,.skin-midnight .table>thead>tr>td,.skin-midnight .table>tbody>tr>td,.skin-midnight .table>tfoot>tr>td{color:#bec5cb;border-top:0px}.skin-midnight .table>thead>tr.odd,.skin-midnight .table>tbody>tr.odd,.skin-midnight .table>tfoot>tr.odd{background-color:#2a2f34}.skin-midnight .table>thead>tr.odd:hover,.skin-midnight .table>tbody>tr.odd:hover,.skin-midnight .table>tfoot>tr.odd:hover,.skin-midnight .table>thead>tr.even:hover,.skin-midnight .table>tbody>tr.even:hover,.skin-midnight .table>tfoot>tr.even:hover{background-color:#1e2226}.skin-midnight .table-bordered>thead>tr>th,.skin-midnight .table-bordered>tbody>tr>th,.skin-midnight .table-bordered>tfoot>tr>th,.skin-midnight .table-bordered>thead>tr>td,.skin-midnight .table-bordered>tbody>tr>td,.skin-midnight .table-bordered>tfoot>tr>td{border:1px solid #353c42}.skin-midnight .dataTables_wrapper input[type='search']{border-radius:4px;background-color:#353c42;border:0;color:#bec5cb}.skin-midnight .dataTables_paginate .pagination li>a{background-color:transparent !important;border:0}.skin-midnight .wrapper,.skin-midnight .main-sidebar,.skin-midnight .left-side{background-color:#272c30}.skin-midnight .user-panel>.info,.skin-midnight .user-panel>.info>a{color:#fff}.skin-midnight .sidebar-menu>li.header{color:#556068;background:#1e2225}.skin-midnight .sidebar-menu>li>a{border-left:3px solid transparent}.skin-midnight .sidebar-menu>li:hover>a,.skin-midnight .sidebar-menu>li.active>a{color:#fff;background:#22272a;border-left-color:#272c30}.skin-midnight .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#32393e}.skin-midnight .sidebar a{color:#bec5cb}.skin-midnight .sidebar a:hover{text-decoration:none}.skin-midnight .treeview-menu>li>a{color:#949fa8}.skin-midnight .treeview-menu>li.active>a,.skin-midnight .treeview-menu>li>a:hover{color:#fff}.skin-midnight .sidebar-form{border-radius:3px;border:1px solid #3e464c;margin:10px 10px}.skin-midnight .sidebar-form input[type="text"],.skin-midnight .sidebar-form .btn{box-shadow:none;background-color:#3e464c;border:1px solid transparent;height:35px}.skin-midnight .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:2px}.skin-midnight .sidebar-form input[type="text"]:focus,.skin-midnight .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-midnight .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-midnight .sidebar-form .btn{color:#999;border-top-left-radius:0;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:0}.skin-midnight .box,.skin-midnight .box-footer,.skin-midnight .info-box,.skin-midnight .box-comment,.skin-midnight .comment-text,.skin-midnight .comment-text .username{color:#bec5cb;background-color:#272c30}.skin-midnight .box-comments .box-comment{border-bottom-color:#353c42}.skin-midnight .box-footer{border-top:1px solid #353c42}.skin-midnight .box-header.with-border{border-bottom:1px solid #353c42}.skin-midnight .box-solid,.skin-midnight .box{border:1px solid #272c30}.skin-midnight .box-solid>.box-header,.skin-midnight .box>.box-header{color:#bec5cb;background:#272c30;background-color:#272c30}.skin-midnight .box-solid>.box-header a,.skin-midnight .box>.box-header a,.skin-midnight .box-solid>.box-header .btn,.skin-midnight .box>.box-header .btn{color:#bec5cb}.skin-midnight .box.box-info,.skin-midnight .box.box-primary,.skin-midnight .box.box-success,.skin-midnight .box.box-warning,.skin-midnight .box.box-danger{border-top-width:3px}.skin-midnight .box.box-info{border-top-color:#00c0ef}.skin-midnight .box.box-primary{border-top-color:#075383}.skin-midnight .box.box-success{border-top-color:#00a65a}.skin-midnight .box.box-warning{border-top-color:#ff851b}.skin-midnight .box.box-danger{border-top-color:#dd4b39}.skin-midnight .main-header .navbar{background-color:#272c30}.skin-midnight .main-header .navbar .nav>li>a{color:#bec5cb}.skin-midnight .main-header .navbar .nav>li>a:hover,.skin-midnight .main-header .navbar .nav>li>a:active,.skin-midnight .main-header .navbar .nav>li>a:focus,.skin-midnight .main-header .navbar .nav .open>a,.skin-midnight .main-header .navbar .nav .open>a:hover,.skin-midnight .main-header .navbar .nav .open>a:focus,.skin-midnight .main-header .navbar .nav>.active>a{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-midnight .main-header .navbar .sidebar-toggle{color:#bec5cb}.skin-midnight .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-midnight .timeline li .timeline-item{color:#bec5cb;background-color:#272c30;border-color:#353c42}.skin-midnight .timeline li .timeline-header{border-bottom-color:#353c42}.skin-midnight .nav-stacked>li>a{color:#bec5cb}.skin-midnight .nav-stacked>li>a:hover{color:white;background-color:#1e2226}.skin-midnight .content-wrapper,.skin-midnight .right-side{background-color:#353c42}.skin-midnight .main-footer,.skin-midnight .nav-tabs-custom{background-color:#272c30;border-top-color:#353c42;color:#bec5cb}.skin-midnight .main-footer .nav-tabs,.skin-midnight .nav-tabs-custom .nav-tabs{border-bottom-color:#353c42}.skin-midnight .main-footer .tab-content,.skin-midnight .nav-tabs-custom .tab-content{background-color:#272c30}.skin-midnight .nav-tabs-custom>.nav-tabs>li.active>a{border-left-color:#353c42;border-right-color:#353c42}.skin-midnight .nav-tabs-custom>.nav-tabs.pull-right>li:first-of-type.active>a{border-left-color:#353c42}.skin-midnight .nav-tabs-custom>.nav-tabs>li{color:#bec5cb}.skin-midnight .nav-tabs-custom>.nav-tabs>li.active>a{background-color:#272c30}.skin-midnight .nav-tabs-custom>.nav-tabs>li>a{color:#bec5cb}.skin-midnight .form-group .input-group-addon,.skin-midnight .input-group .input-group-addon,.skin-midnight .form-group input,.skin-midnight .input-group input,.skin-midnight .form-group textarea,.skin-midnight .input-group textarea{background-color:#353c42;color:#bec5cb;border:1px solid #353c42}.skin-midnight .list-group{color:#bec5cb;background-color:#272c30}.skin-midnight .list-group .list-group-item{border-color:#353c42;background-color:#272c30}.skin-midnight .input-group .input-group-addon{border-right:1px solid #272c30}.skin-midnight .form-control{border-color:#272c30;background-color:#353c42}.skin-midnight .select2 .select2-selection{background-color:#353c42;color:#bec5cb;border:1px solid #353c42}.skin-midnight .select2 .select2-selection .select2-container--default,.skin-midnight .select2 .select2-selection .select2-selection--single,.skin-midnight .select2 .select2-selection .select2-selection--multiple,.skin-midnight .select2 .select2-selection .select2-selection__rendered{color:#bec5cb}.skin-midnight .select2-dropdown{background-color:#353c42;color:#bec5cb;border:1px solid #353c42}.skin-midnight .select2-dropdown .select2-search__field{background-color:#272c30;color:#bec5cb;border:1px solid #353c42}.skin-midnight .select2-container--default.select2-container--open{background-color:#272c30} -------------------------------------------------------------------------------- /dist/css/skins/skin-midnight.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skin: Midnight Dark theme 3 | * ------------ 4 | */ 5 | .skin-midnight { 6 | color: #bec5cb; 7 | } 8 | .skin-midnight h4 { 9 | color: #44def1; 10 | } 11 | .skin-midnight .content-header > .breadcrumb > li > a { 12 | color: #bec5cb; 13 | } 14 | .skin-midnight .table > thead > tr > th, 15 | .skin-midnight .table > tbody > tr > th, 16 | .skin-midnight .table > tfoot > tr > th, 17 | .skin-midnight .table > thead > tr > td, 18 | .skin-midnight .table > tbody > tr > td, 19 | .skin-midnight .table > tfoot > tr > td { 20 | color: #bec5cb; 21 | border-top: 0px; 22 | } 23 | .skin-midnight .table > thead > tr.odd, 24 | .skin-midnight .table > tbody > tr.odd, 25 | .skin-midnight .table > tfoot > tr.odd { 26 | background-color: #2a2f34; 27 | } 28 | .skin-midnight .table > thead > tr.odd:hover, 29 | .skin-midnight .table > tbody > tr.odd:hover, 30 | .skin-midnight .table > tfoot > tr.odd:hover, 31 | .skin-midnight .table > thead > tr.even:hover, 32 | .skin-midnight .table > tbody > tr.even:hover, 33 | .skin-midnight .table > tfoot > tr.even:hover { 34 | background-color: #1e2226; 35 | } 36 | .skin-midnight .table-bordered > thead > tr > th, 37 | .skin-midnight .table-bordered > tbody > tr > th, 38 | .skin-midnight .table-bordered > tfoot > tr > th, 39 | .skin-midnight .table-bordered > thead > tr > td, 40 | .skin-midnight .table-bordered > tbody > tr > td, 41 | .skin-midnight .table-bordered > tfoot > tr > td { 42 | border: 1px solid #353c42; 43 | } 44 | .skin-midnight .dataTables_wrapper input[type='search'] { 45 | border-radius: 4px; 46 | background-color: #353c42; 47 | border: 0; 48 | color: #bec5cb; 49 | } 50 | .skin-midnight .dataTables_paginate .pagination li > a { 51 | background-color: transparent !important; 52 | border: 0; 53 | } 54 | .skin-midnight .wrapper, 55 | .skin-midnight .main-sidebar, 56 | .skin-midnight .left-side { 57 | background-color: #272c30; 58 | } 59 | .skin-midnight .user-panel > .info, 60 | .skin-midnight .user-panel > .info > a { 61 | color: #fff; 62 | } 63 | .skin-midnight .sidebar-menu > li.header { 64 | color: #556068; 65 | background: #1e2225; 66 | } 67 | .skin-midnight .sidebar-menu > li > a { 68 | border-left: 3px solid transparent; 69 | } 70 | .skin-midnight .sidebar-menu > li:hover > a, 71 | .skin-midnight .sidebar-menu > li.active > a { 72 | color: #ffffff; 73 | background: #22272a; 74 | border-left-color: #272c30; 75 | } 76 | .skin-midnight .sidebar-menu > li > .treeview-menu { 77 | margin: 0 1px; 78 | background: #32393e; 79 | } 80 | .skin-midnight .sidebar a { 81 | color: #bec5cb; 82 | } 83 | .skin-midnight .sidebar a:hover { 84 | text-decoration: none; 85 | } 86 | .skin-midnight .treeview-menu > li > a { 87 | color: #949fa8; 88 | } 89 | .skin-midnight .treeview-menu > li.active > a, 90 | .skin-midnight .treeview-menu > li > a:hover { 91 | color: #ffffff; 92 | } 93 | .skin-midnight .sidebar-form { 94 | border-radius: 3px; 95 | border: 1px solid #3e464c; 96 | margin: 10px 10px; 97 | } 98 | .skin-midnight .sidebar-form input[type="text"], 99 | .skin-midnight .sidebar-form .btn { 100 | box-shadow: none; 101 | background-color: #3e464c; 102 | border: 1px solid transparent; 103 | height: 35px; 104 | } 105 | .skin-midnight .sidebar-form input[type="text"] { 106 | color: #666; 107 | border-top-left-radius: 2px; 108 | border-top-right-radius: 0; 109 | border-bottom-right-radius: 0; 110 | border-bottom-left-radius: 2px; 111 | } 112 | .skin-midnight .sidebar-form input[type="text"]:focus, 113 | .skin-midnight .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 114 | background-color: #fff; 115 | color: #666; 116 | } 117 | .skin-midnight .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 118 | border-left-color: #fff; 119 | } 120 | .skin-midnight .sidebar-form .btn { 121 | color: #999; 122 | border-top-left-radius: 0; 123 | border-top-right-radius: 2px; 124 | border-bottom-right-radius: 2px; 125 | border-bottom-left-radius: 0; 126 | } 127 | .skin-midnight .box, 128 | .skin-midnight .box-footer, 129 | .skin-midnight .info-box, 130 | .skin-midnight .box-comment, 131 | .skin-midnight .comment-text, 132 | .skin-midnight .comment-text .username { 133 | color: #bec5cb; 134 | background-color: #272c30; 135 | } 136 | .skin-midnight .box-comments .box-comment { 137 | border-bottom-color: #353c42; 138 | } 139 | .skin-midnight .box-footer { 140 | border-top: 1px solid #353c42; 141 | } 142 | .skin-midnight .box-header.with-border { 143 | border-bottom: 1px solid #353c42; 144 | } 145 | .skin-midnight .box-solid, 146 | .skin-midnight .box { 147 | border: 1px solid #272c30; 148 | } 149 | .skin-midnight .box-solid > .box-header, 150 | .skin-midnight .box > .box-header { 151 | color: #bec5cb; 152 | background: #272c30; 153 | background-color: #272c30; 154 | } 155 | .skin-midnight .box-solid > .box-header a, 156 | .skin-midnight .box > .box-header a, 157 | .skin-midnight .box-solid > .box-header .btn, 158 | .skin-midnight .box > .box-header .btn { 159 | color: #bec5cb; 160 | } 161 | .skin-midnight .box.box-info, 162 | .skin-midnight .box.box-primary, 163 | .skin-midnight .box.box-success, 164 | .skin-midnight .box.box-warning, 165 | .skin-midnight .box.box-danger { 166 | border-top-width: 3px; 167 | } 168 | .skin-midnight .box.box-info { 169 | border-top-color: #00c0ef; 170 | } 171 | .skin-midnight .box.box-primary { 172 | border-top-color: #075383; 173 | } 174 | .skin-midnight .box.box-success { 175 | border-top-color: #00a65a; 176 | } 177 | .skin-midnight .box.box-warning { 178 | border-top-color: #ff851b; 179 | } 180 | .skin-midnight .box.box-danger { 181 | border-top-color: #dd4b39; 182 | } 183 | .skin-midnight .main-header .navbar { 184 | background-color: #272c30; 185 | } 186 | .skin-midnight .main-header .navbar .nav > li > a { 187 | color: #bec5cb; 188 | } 189 | .skin-midnight .main-header .navbar .nav > li > a:hover, 190 | .skin-midnight .main-header .navbar .nav > li > a:active, 191 | .skin-midnight .main-header .navbar .nav > li > a:focus, 192 | .skin-midnight .main-header .navbar .nav .open > a, 193 | .skin-midnight .main-header .navbar .nav .open > a:hover, 194 | .skin-midnight .main-header .navbar .nav .open > a:focus, 195 | .skin-midnight .main-header .navbar .nav > .active > a { 196 | background: rgba(0, 0, 0, 0.1); 197 | color: #f6f6f6; 198 | } 199 | .skin-midnight .main-header .navbar .sidebar-toggle { 200 | color: #bec5cb; 201 | } 202 | .skin-midnight .main-header .navbar .sidebar-toggle:hover { 203 | color: #f6f6f6; 204 | background: rgba(0, 0, 0, 0.1); 205 | } 206 | .skin-midnight .timeline li .timeline-item { 207 | color: #bec5cb; 208 | background-color: #272c30; 209 | border-color: #353c42; 210 | } 211 | .skin-midnight .timeline li .timeline-header { 212 | border-bottom-color: #353c42; 213 | } 214 | .skin-midnight .nav-stacked > li > a { 215 | color: #bec5cb; 216 | } 217 | .skin-midnight .nav-stacked > li > a:hover { 218 | color: white; 219 | background-color: #1e2226; 220 | } 221 | .skin-midnight .content-wrapper, 222 | .skin-midnight .right-side { 223 | background-color: #353c42; 224 | } 225 | .skin-midnight .main-footer, 226 | .skin-midnight .nav-tabs-custom { 227 | background-color: #272c30; 228 | border-top-color: #353c42; 229 | color: #bec5cb; 230 | } 231 | .skin-midnight .main-footer .nav-tabs, 232 | .skin-midnight .nav-tabs-custom .nav-tabs { 233 | border-bottom-color: #353c42; 234 | } 235 | .skin-midnight .main-footer .tab-content, 236 | .skin-midnight .nav-tabs-custom .tab-content { 237 | background-color: #272c30; 238 | } 239 | .skin-midnight .nav-tabs-custom > .nav-tabs > li.active > a { 240 | border-left-color: #353c42; 241 | border-right-color: #353c42; 242 | } 243 | .skin-midnight .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a { 244 | border-left-color: #353c42; 245 | } 246 | .skin-midnight .nav-tabs-custom > .nav-tabs > li { 247 | color: #bec5cb; 248 | } 249 | .skin-midnight .nav-tabs-custom > .nav-tabs > li.active > a { 250 | background-color: #272c30; 251 | } 252 | .skin-midnight .nav-tabs-custom > .nav-tabs > li > a { 253 | color: #bec5cb; 254 | } 255 | .skin-midnight .form-group .input-group-addon, 256 | .skin-midnight .input-group .input-group-addon, 257 | .skin-midnight .form-group input, 258 | .skin-midnight .input-group input, 259 | .skin-midnight .form-group textarea, 260 | .skin-midnight .input-group textarea { 261 | background-color: #353c42; 262 | color: #bec5cb; 263 | border: 1px solid #353c42; 264 | } 265 | .skin-midnight .list-group { 266 | color: #bec5cb; 267 | background-color: #272c30; 268 | } 269 | .skin-midnight .list-group .list-group-item { 270 | border-color: #353c42; 271 | background-color: #272c30; 272 | } 273 | .skin-midnight .input-group .input-group-addon { 274 | border-right: 1px solid #272c30; 275 | } 276 | .skin-midnight .form-control { 277 | border-color: #272c30; 278 | background-color: #353c42; 279 | } 280 | .skin-midnight .select2 .select2-selection { 281 | background-color: #353c42; 282 | color: #bec5cb; 283 | border: 1px solid #353c42; 284 | } 285 | .skin-midnight .select2 .select2-selection .select2-container--default, 286 | .skin-midnight .select2 .select2-selection .select2-selection--single, 287 | .skin-midnight .select2 .select2-selection .select2-selection--multiple, 288 | .skin-midnight .select2 .select2-selection .select2-selection__rendered { 289 | color: #bec5cb; 290 | } 291 | .skin-midnight .select2-dropdown { 292 | background-color: #353c42; 293 | color: #bec5cb; 294 | border: 1px solid #353c42; 295 | } 296 | .skin-midnight .select2-dropdown .select2-search__field { 297 | background-color: #272c30; 298 | color: #bec5cb; 299 | border: 1px solid #353c42; 300 | } 301 | .skin-midnight .select2-container--default.select2-container--open { 302 | background-color: #272c30; 303 | } 304 | --------------------------------------------------------------------------------