github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

improve dark mode

pull/3729/head
Daniel 2021-05-21 11:42:32 +05:30
parent a29afb44db
commit 355804c2ac
16 changed files with 258 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
gulpfile.js
View File

@ -17,7 +17,6 @@ const postcss = require('gulp-postcss')
const rename = require('gulp-rename')
const sass = require('gulp-sass')
const gulpStylelint = require('gulp-stylelint')
const wait = require('gulp-wait')
const rtlcss = require('rtlcss')
sass.compiler = require('sass')
@ -89,7 +88,6 @@ const scss = () => {
since: lastRun(scss),
sourcemaps: true
})
.pipe(wait(500))
.pipe(dependents())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(postcssOptions))
@ -174,7 +172,7 @@ const serve = () => {
server: paths.temp.base
})
watch([paths.src.scss], series(lintScss, scss))
watch([paths.src.scss], { delay: 500 }, series(lintScss, scss))
watch([paths.src.ts], series(lintTs, ts))
watch([paths.src.html, paths.src.base + '*.html', paths.src.partials], series(html, index))
watch([paths.src.assets], series(assets))
@ -227,7 +225,6 @@ const copyDistCssAll = () => {
base: paths.src.scss,
sourcemaps: true
})
.pipe(wait(500))
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(postcssOptions))
.pipe(dest(paths.dist.css, { sourcemaps: '.' }))
@ -235,7 +232,6 @@ const copyDistCssAll = () => {
const copyDistCssRtl = () => {
return src(paths.dist.css + '/*.css', { sourcemaps: true })
.pipe(wait(500))
.pipe(postcss(postcssRtlOptions))
.pipe(rename({ suffix: '.rtl' }))
.pipe(dest(paths.dist.css + '/rtl', { sourcemaps: '.' }))

15
src/partials/_head.html
View File

@ -1,16 +1,21 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- If add @@path/css/dark/adminlte-dark.css then the page supports both dark and light color schemes, and the page author prefers / default is light. -->
<!-- By adding @@path/css/dark/adminlte-dark-addon.css then the page supports both dark color schemes, and the page author prefers / default is light. -->
<meta name="color-scheme" content="light dark">
<!-- By adding @@path/css/dark/adminlte-dark-addon.css then the page supports both dark color schemes, and the page author prefers / default is dark. -->
<!-- <meta name="color-scheme" content="dark light"> -->
<title>@@title</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<!-- For dark mode use @@path/css/dark/adminlte-dark.css, remove dist/css/adminlte.css -->
<!-- <link rel="stylesheet" href="@@path/css/dark/adminlte-dark.css"> -->
<!-- For RTL verison use @@path/css/rtl/adminlte.rtl.css, remove dist/css/adminlte.css -->
<!-- <link rel="stylesheet" href="@@path/css/rtl/adminlte.rtl.css"> -->
<link rel="stylesheet" href="@@path/css/adminlte.css">
<!-- For RTL verison use @@path/css/rtl/adminlte.rtl.css, remove dist/css/adminlte.css -->
<!-- <link rel="stylesheet" href="@@path/css/rtl/adminlte.rtl.css""> -->
<!-- For dark mode use @@path/css/dark/adminlte-dark-addon.css, do not remove dist/css/adminlte.css or if usinf RTL version do not remove @@path/css/rtl/adminlte.rtl.css-->
<!-- ... and then the alternate CSS first as a snap-on for dark color scheme preference -->
<!-- <link rel="stylesheet" href="@@path/css/dark/adminlte-dark-addon.css" media="(prefers-color-scheme: dark)""> -->

36
src/scss/_main-sidebar.scss
View File

@ -2,6 +2,42 @@
// Core: Main Sidebar
//
.sidebar-bg-dark {
@include nav-treeview-dark (
$sidebar-dark-bg,
$sidebar-dark-hover-bg,
$sidebar-dark-color,
$sidebar-dark-hover-color,
$sidebar-dark-active-color,
$sidebar-dark-submenu-bg,
$sidebar-dark-submenu-color,
$sidebar-dark-submenu-hover-color,
$sidebar-dark-submenu-hover-bg,
$sidebar-dark-submenu-active-color,
$sidebar-dark-submenu-active-bg
);
}
.sidebar-bg-light {
@include nav-treeview-light (
$sidebar-light-bg,
$sidebar-light-hover-bg,
$sidebar-light-color,
$sidebar-light-hover-color,
$sidebar-light-active-color,
$sidebar-light-submenu-bg,
$sidebar-light-submenu-color,
$sidebar-light-submenu-hover-color,
$sidebar-light-submenu-hover-bg,
$sidebar-light-submenu-active-color,
$sidebar-light-submenu-active-bg
);
}
.sidebar-color-primary {
@include sidebar-color($primary);
}
.main-sidebar {
grid-area: main-sidebar;
@include transition($sidebar-transition);

36
src/scss/_nav-sidebar.scss
View File

@ -1,39 +1,3 @@
.sidebar-bg-dark {
@include nav-treeview-dark (
$sidebar-dark-bg,
$sidebar-dark-hover-bg,
$sidebar-dark-color,
$sidebar-dark-hover-color,
$sidebar-dark-active-color,
$sidebar-dark-submenu-bg,
$sidebar-dark-submenu-color,
$sidebar-dark-submenu-hover-color,
$sidebar-dark-submenu-hover-bg,
$sidebar-dark-submenu-active-color,
$sidebar-dark-submenu-active-bg
);
}
.sidebar-bg-light {
@include nav-treeview-light (
$sidebar-light-bg,
$sidebar-light-hover-bg,
$sidebar-light-color,
$sidebar-light-hover-color,
$sidebar-light-active-color,
$sidebar-light-submenu-bg,
$sidebar-light-submenu-color,
$sidebar-light-submenu-hover-color,
$sidebar-light-submenu-hover-bg,
$sidebar-light-submenu-active-color,
$sidebar-light-submenu-active-bg
);
}
.sidebar-color-primary {
@include sidebar-color($primary);
}
// Sidebar navigation menu
.nav-sidebar {
// All levels

2
src/scss/_variables.scss
View File

@ -15,7 +15,7 @@ $gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-800: #30363d !default;
$gray-900: #212529 !default;
$black: #000 !default;

22
src/scss/bootstrap-dark/_variables-alt.scss
View File

@ -13,17 +13,17 @@ $color-schemes: (
// items marked //** from https://bootswatch.com/darkly/
// items marked //~~ from https://uxdesign.cc/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129
$white-alt: #fff !default;
$white-alt: #f0f6fc !default;
$gray-100-alt: #f8f9fa !default;
$gray-200-alt: #e9ecef !default;
$gray-300-alt: #dee2e6 !default;
$gray-400-alt: #ced4da !default;
$gray-500-alt: #adb5bd !default;
$gray-600-alt: #6c757d !default;
$gray-700-alt: #495057 !default;
$gray-800-alt: #343a40 !default;
$gray-900-alt: #212529 !default;
$black-alt: #000 !default;
$gray-500-alt: #6c757d !default;
$gray-600-alt: #30363d !default;
$gray-700-alt: #21262d !default;
$gray-800-alt: #161b22 !default;
$gray-900-alt: #0d1117 !default;
$black-alt: #010409 !default;
// fusv-disable
$grays-alt: (
@ -63,8 +63,8 @@ $colors-alt: (
"cyan": $cyan-alt,
"white": $white-alt,
"black": $black-alt,
"gray": #7e7e7e, // $gray-600,
"gray-dark": #121212 //$gray-800
"gray": $gray-600-alt,
"gray-dark": $gray-800-alt
) !default;
$primary-alt: $blue-alt !default;
@ -73,8 +73,8 @@ $success-alt: $green-alt !default;
$info-alt: $cyan-alt !default;
$warning-alt: $yellow-alt !default;
$danger-alt: $red-alt !default;
$light-alt: $gray-400-alt !default;
$dark-alt: $gray-800-alt !default;
$light-alt: $gray-100-alt !default;
$dark-alt: $gray-900-alt !default;
$theme-colors-alt: (
"primary": $primary-alt,

61
src/scss/dark/_cards.scss Normal file
View File

@ -0,0 +1,61 @@
// Color variants
@each $name, $color in $theme-colors-alt {
@include cards-variant($name, $color);
}
@each $name, $color in $colors-alt {
@include cards-variant($name, $color);
}
.card {
background-color: $dark-alt;
color: $white-alt;
.card {
background-color: tint-colors($dark-alt, 5%);
color: $white-alt;
}
.nav.flex-column > li {
border-bottom-color: $gray-600-alt;
}
.card-footer {
background-color: rgba($black-alt, .1);
}
&.card-outline-tabs .card-header a:hover {
border-color: $gray-600-alt;
border-bottom-color: transparent;
}
&:not(.card-outline) > .card-header a.active {
color: $white-alt;
}
}
.card-comments {
background-color: tint-colors($dark-alt, 1.25%);
.username {
color: $gray-400-alt;
}
.card-comment {
border-bottom-color: tint-colors($dark-alt, 7.5%);
}
}
.todo-list > li {
background-color: tint-colors($dark-alt, 5%);
border-color: tint-colors($dark-alt, 7.5%);
color: $white-alt;
}
.todo-list {
@each $name, $color in $theme-colors-alt {
.#{$name} {
border-left-color: $color;
}
}
@each $name, $color in $colors-alt {
.#{$name} {
border-left-color: $color;
}
}
}

31
src/scss/dark/_custom-variables-alt.scss
View File

@ -1,7 +1,36 @@
// SIDEBAR SKINS
// --------------------------------------------------------
// Dark sidebar
$sidebar-dark-bg-alt: $dark-alt !default;
$sidebar-dark-hover-bg-alt: rgba(255, 255, 255, .1) !default;
$sidebar-dark-color-alt: #c2c7d0 !default;
$sidebar-dark-hover-color-alt: $white-alt !default;
$sidebar-dark-active-color-alt: $white-alt !default;
$sidebar-dark-submenu-bg-alt: transparent !default;
$sidebar-dark-submenu-color-alt: #c2c7d0 !default;
$sidebar-dark-submenu-hover-color-alt: $white-alt !default;
$sidebar-dark-submenu-hover-bg-alt: $sidebar-dark-hover-bg-alt !default;
$sidebar-dark-submenu-active-color-alt: $sidebar-dark-bg-alt !default;
$sidebar-dark-submenu-active-bg-alt: rgba(255, 255, 255, .9) !default;
// Light sidebar
$sidebar-light-bg-alt: $white-alt !default;
$sidebar-light-hover-bg-alt: rgba($black-alt, .1) !default;
$sidebar-light-color-alt: $gray-800-alt !default;
$sidebar-light-hover-color-alt: $gray-900-alt !default;
$sidebar-light-active-color-alt: $black-alt !default;
$sidebar-light-submenu-bg-alt: transparent !default;
$sidebar-light-submenu-color-alt: #777 !default;
$sidebar-light-submenu-hover-color-alt: $black-alt !default;
$sidebar-light-submenu-hover-bg-alt: $sidebar-light-hover-bg-alt !default;
$sidebar-light-submenu-active-color-alt: $sidebar-light-hover-color-alt !default;
$sidebar-light-submenu-active-bg-alt: $sidebar-light-submenu-hover-bg-alt !default;
// MAIN FOOTER
// --------------------------------------------------------
$main-footer-bg-alt: $dark-alt !default;
// Body background (Affects main content background only)
$main-bg-alt: tint-color($dark-alt, 7.5%) !default;
$main-bg-alt: $black-alt !default;
$main-color-alt: $white-alt !default;

15
src/scss/dark/_info-box.scss Normal file
View File

@ -0,0 +1,15 @@
.info-box {
background-color: $dark-alt;
color: $white-alt;
@each $name, $color in $theme-colors-alt {
.info-box {
.bg-#{$name} {
color: color-contrast($color);
.progress-bar {
background-color: color-contrast($color);
}
}
}
}
}

39
src/scss/dark/_main-sidebar.scss Normal file
View File

@ -0,0 +1,39 @@
//
// Core: Main Sidebar
//
.sidebar-bg-dark {
@include nav-treeview-dark (
$sidebar-dark-bg-alt,
$sidebar-dark-hover-bg-alt,
$sidebar-dark-color-alt,
$sidebar-dark-hover-color-alt,
$sidebar-dark-active-color-alt,
$sidebar-dark-submenu-bg-alt,
$sidebar-dark-submenu-color-alt,
$sidebar-dark-submenu-hover-color-alt,
$sidebar-dark-submenu-hover-bg-alt,
$sidebar-dark-submenu-active-color-alt,
$sidebar-dark-submenu-active-bg-alt
);
}
.sidebar-bg-light {
@include nav-treeview-light (
$sidebar-light-bg-alt,
$sidebar-light-hover-bg-alt,
$sidebar-light-color-alt,
$sidebar-light-hover-color-alt,
$sidebar-light-active-color-alt,
$sidebar-light-submenu-bg-alt,
$sidebar-light-submenu-color-alt,
$sidebar-light-submenu-hover-color-alt,
$sidebar-light-submenu-hover-bg-alt,
$sidebar-light-submenu-active-color-alt,
$sidebar-light-submenu-active-bg-alt
);
}
.sidebar-color-primary {
@include sidebar-color($primary-alt);
}

28
src/scss/dark/_table.scss Normal file
View File

@ -0,0 +1,28 @@
.table-bordered {
&,
td,
th {
border-color: $gray-600-alt;
}
}
.table-hover {
tbody tr:hover {
color: $gray-300-alt;
background-color: tint-color($dark-alt, 2.5%);
border-color: $gray-600-alt;
}
}
.table {
thead th {
border-bottom-color: $gray-600-alt;
}
th,
td {
border-top-color: $gray-600-alt;
}
&.table-head-fixed {
thead tr:nth-child(1) th {
background-color: tint-color($dark-alt, 5%);
}
}
}

7
src/scss/dark/adminlte-dark-addon.scss
View File

@ -55,3 +55,10 @@
// Unique to dark-mode
@import "../bootstrap-dark/dark";
// AdminLTE dark
@import "../mixins";
@import "custom-variables-alt";
@import "parts/core";
@import "parts/components";
@import "parts/extra-components";

6
src/scss/dark/parts/_components.scss Normal file
View File

@ -0,0 +1,6 @@
//
// Part: Components
//
@import "../cards";
@import "../table";

1
src/scss/dark/parts/_core.scss
View File

@ -1,3 +1,4 @@
@import "../main-header";
@import "../main-sidebar";
@import "../content-wrapper";
@import "../main-footer";

5
src/scss/dark/parts/_extra-components.scss Normal file
View File

@ -0,0 +1,5 @@
//
// Part: Extra Components
//
@import "../info-box";

7
src/scss/dark/parts/_miscellaneous.scss Normal file
View File

@ -0,0 +1,7 @@
//
// Part: Miscellaneous
//
@import "../miscellaneous";
@import "../text";
@import "../colors";