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

10% dark mode implemented

pull/4884/head
Daniel 2023-01-27 01:35:46 +05:30
parent 7ac224b81f
commit fd7730baa5
24 changed files with 98 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.bundlewatch.config.json
View File

@ -8,14 +8,6 @@
"path": "./dist/css/adminlte.min.css",
"maxSize": "35.1 kB"
},
{
"path": "./dist/css/dark/adminlte-dark-addon.css",
"maxSize": "10.17 kB"
},
{
"path": "./dist/css/dark/adminlte-dark-addon.min.css",
"maxSize": "9.9 kB"
},
{
"path": "./dist/css/rtl/adminlte.rtl.css",
"maxSize": "37.80 kB"

4
src/scss/_content-wrapper.scss
View File

@ -1,6 +1,6 @@
.content-wrapper {
grid-area: content-wrapper;
padding-bottom: 1rem;
color: $lte-main-color;
background-color: $lte-main-bg;
color: --#{$lte-prefix}main-color;
background-color: --#{$lte-prefix}main-bg;
}

10
src/scss/_dropdown.scss
View File

@ -203,8 +203,8 @@
a {
@include media-breakpoint-up(sm) {
color: $gray-700 !important;
background-color: $white !important;
color: var(--#{$prefix}body-color) !important;
background-color: var(--#{$prefix}body-bg) !important;
}
}
}
@ -213,14 +213,14 @@
> .user-footer {
@include clearfix ();
padding: 10px;
background-color: $gray-100;
background-color: var(--#{$prefix}secondary-bg);
.btn-default {
color: $gray-600;
color: var(--#{$prefix}body-color);
&:hover {
@include media-breakpoint-up(sm) {
background-color: $gray-100;
background-color: var(--#{$prefix}body-bg);
}
}
}

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

@ -49,8 +49,8 @@
.nav-sidebar > .nav-item {
> .nav-link.active {
color: var(--lte-sidebar-menu-active-color);
background-color: var(--lte-sidebar-menu-active-bg);
color: var(--#{$lte-prefix}sidebar-menu-active-color);
background-color: var(--#{$lte-prefix}sidebar-menu-active-bg);
}
}
}

23
src/scss/_root.scss Normal file
View File

@ -0,0 +1,23 @@
:root {
--#{$lte-prefix}main-color: $lte-main-color;
--#{$lte-prefix}main-bg: $lte-main-bg;
}
@if $enable-dark-mode {
@include color-mode(dark, true) {
color-scheme: dark;
// Body Color
--#{$lte-prefix}main-color: $lte-main-color-dark;
--#{$lte-prefix}main-bg: $lte-main-bg-dark;
// Sidebar active links
--#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
--#{$lte-prefix}sidebar-menu-active-color: #{$white};
// Dark Sidebar Native Variables
--#{$lte-prefix}sidebar-dark-bg: #{$dark};
// Light Sidebar Native Variables
--#{$lte-prefix}sidebar-light-bg: #{$white};
}
}

3
src/scss/_variables-dark.scss Normal file
View File

@ -0,0 +1,3 @@
// Body background (Affects main content background only)
$lte-main-bg-dark: $body-bg-dark !default;
$lte-main-color-dark: $body-color-dark !default;

126
src/scss/_variables.scss
View File

@ -1,5 +1,8 @@
// Custom AdminLTE Variables
// Prefix for :root CSS variables
$lte-prefix: lte- !default;
// COLORS
// --------------------------------------------------------
$lte-gray-x-light: #d2d6de !default;
@ -8,39 +11,39 @@ $lte-gray-x-light: #d2d6de !default;
// --------------------------------------------------------
:root {
// Sidebar
--lte-sidebar-width: 250px;
--#{$lte-prefix}sidebar-width: 250px;
// Sidebar active links
--lte-sidebar-menu-active-bg: #{$primary};
--lte-sidebar-menu-active-color: #{$white};
--#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
--#{$lte-prefix}sidebar-menu-active-color: #{$white};
// Dark Sidebar Native Variables
--lte-sidebar-dark-bg: #343a40;
--lte-sidebar-dark-hover-bg: rgba(255, 255, 255, .1);
--lte-sidebar-dark-color: #c2c7d0;
--lte-sidebar-dark-hover-color: #{$white};
--lte-sidebar-dark-active-color: #{$white};
--lte-sidebar-dark-submenu-bg: transparent;
--lte-sidebar-dark-submenu-color: var(--lte-sidebar-dark-color);
--lte-sidebar-dark-submenu-hover-color: #{$white};
--lte-sidebar-dark-submenu-hover-bg: var(--lte-sidebar-dark-hover-bg);
--lte-sidebar-dark-submenu-active-color: var(--lte-sidebar-dark-bg);
--lte-sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9);
--lte-sidebar-dark-header-color: #{tint-color(#c2c7d0, 5%)};
--#{$lte-prefix}sidebar-dark-bg: #343a40;
--#{$lte-prefix}sidebar-dark-hover-bg: rgba(255, 255, 255, .1);
--#{$lte-prefix}sidebar-dark-color: #c2c7d0;
--#{$lte-prefix}sidebar-dark-hover-color: #{$white};
--#{$lte-prefix}sidebar-dark-active-color: #{$white};
--#{$lte-prefix}sidebar-dark-submenu-bg: transparent;
--#{$lte-prefix}sidebar-dark-submenu-color: var(--#{$lte-prefix}sidebar-dark-color);
--#{$lte-prefix}sidebar-dark-submenu-hover-color: #{$white};
--#{$lte-prefix}sidebar-dark-submenu-hover-bg: var(--#{$lte-prefix}sidebar-dark-hover-bg);
--#{$lte-prefix}sidebar-dark-submenu-active-color: var(--#{$lte-prefix}sidebar-dark-bg);
--#{$lte-prefix}sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9);
--#{$lte-prefix}sidebar-dark-header-color: #{tint-color(#c2c7d0, 5%)};
// Light Sidebar Native Variables
--lte-sidebar-light-bg: #{$white};
--lte-sidebar-light-hover-bg: rgba(#{$black}, .1);
--lte-sidebar-light-color: #{$gray-800};
--lte-sidebar-light-hover-color: #{$gray-900};
--lte-sidebar-light-active-color: #{$black};
--lte-sidebar-light-submenu-bg: transparent;
--lte-sidebar-light-submenu-color: #777;
--lte-sidebar-light-submenu-hover-color: #{$black};
--lte-sidebar-light-submenu-hover-bg: var(--lte-sidebar-light-hover-bg);
--lte-sidebar-light-submenu-active-color: var(--lte-sidebar-light-hover-color);
--lte-sidebar-light-submenu-active-bg: var(--lte-sidebar-light-submenu-hover-bg);
--lte-sidebar-light-header-color: #{shade-color($gray-800, 5%)};
--#{$lte-prefix}sidebar-light-bg: #{$white};
--#{$lte-prefix}sidebar-light-hover-bg: rgba(#{$black}, .1);
--#{$lte-prefix}sidebar-light-color: #{$gray-800};
--#{$lte-prefix}sidebar-light-hover-color: #{$gray-900};
--#{$lte-prefix}sidebar-light-active-color: #{$black};
--#{$lte-prefix}sidebar-light-submenu-bg: transparent;
--#{$lte-prefix}sidebar-light-submenu-color: #777;
--#{$lte-prefix}sidebar-light-submenu-hover-color: #{$black};
--#{$lte-prefix}sidebar-light-submenu-hover-bg: var(--#{$lte-prefix}sidebar-light-hover-bg);
--#{$lte-prefix}sidebar-light-submenu-active-color: var(--#{$lte-prefix}sidebar-light-hover-color);
--#{$lte-prefix}sidebar-light-submenu-active-bg: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg);
--#{$lte-prefix}sidebar-light-header-color: #{shade-color($gray-800, 5%)};
}
// LAYOUT
@ -57,7 +60,7 @@ $lte-transition-fn: ease-in-out !default;
// Sidebar
// --------------------------------------------------------
$lte-sidebar-width: var(--lte-sidebar-width) !default;
$lte-sidebar-width: var(--#{$lte-prefix}sidebar-width) !default;
$lte-sidebar-padding-x: .5rem !default;
$lte-sidebar-padding-y: .5rem !default;
$lte-sidebar-custom-height: 4rem !default;
@ -77,32 +80,32 @@ $lte-sidebar-transition: min-width $lte-transition-speed $lte-transitio
// --------------------------------------------------------
// Dark sidebar
$lte-sidebar-dark-bg: var(--lte-sidebar-dark-bg) !default;
$lte-sidebar-dark-hover-bg: var(--lte-sidebar-dark-hover-bg) !default;
$lte-sidebar-dark-color: var(--lte-sidebar-dark-color) !default;
$lte-sidebar-dark-hover-color: var(--lte-sidebar-dark-hover-color) !default;
$lte-sidebar-dark-active-color: var(--lte-sidebar-dark-active-color) !default;
$lte-sidebar-dark-submenu-bg: var(--lte-sidebar-dark-submenu-bg) !default;
$lte-sidebar-dark-submenu-color: var(--lte-sidebar-dark-submenu-color) !default;
$lte-sidebar-dark-submenu-hover-color: var(--lte-sidebar-dark-submenu-hover-color) !default;
$lte-sidebar-dark-submenu-hover-bg: var(--lte-sidebar-dark-submenu-hover-bg) !default;
$lte-sidebar-dark-submenu-active-color: var(--lte-sidebar-dark-submenu-active-color) !default;
$lte-sidebar-dark-submenu-active-bg: var(--lte-sidebar-dark-submenu-active-bg) !default;
$lte-sidebar-dark-header-color: var(--lte-sidebar-dark-header-color) !default;
$lte-sidebar-dark-bg: var(--#{$lte-prefix}sidebar-dark-bg) !default;
$lte-sidebar-dark-hover-bg: var(--#{$lte-prefix}sidebar-dark-hover-bg) !default;
$lte-sidebar-dark-color: var(--#{$lte-prefix}sidebar-dark-color) !default;
$lte-sidebar-dark-hover-color: var(--#{$lte-prefix}sidebar-dark-hover-color) !default;
$lte-sidebar-dark-active-color: var(--#{$lte-prefix}sidebar-dark-active-color) !default;
$lte-sidebar-dark-submenu-bg: var(--#{$lte-prefix}sidebar-dark-submenu-bg) !default;
$lte-sidebar-dark-submenu-color: var(--#{$lte-prefix}sidebar-dark-submenu-color) !default;
$lte-sidebar-dark-submenu-hover-color: var(--#{$lte-prefix}sidebar-dark-submenu-hover-color) !default;
$lte-sidebar-dark-submenu-hover-bg: var(--#{$lte-prefix}sidebar-dark-submenu-hover-bg) !default;
$lte-sidebar-dark-submenu-active-color: var(--#{$lte-prefix}sidebar-dark-submenu-active-color) !default;
$lte-sidebar-dark-submenu-active-bg: var(--#{$lte-prefix}sidebar-dark-submenu-active-bg) !default;
$lte-sidebar-dark-header-color: var(--#{$lte-prefix}sidebar-dark-header-color) !default;
// Light sidebar
$lte-sidebar-light-bg: var(--lte-sidebar-light-bg) !default;
$lte-sidebar-light-hover-bg: var(--lte-sidebar-light-hover-bg) !default;
$lte-sidebar-light-color: var(--lte-sidebar-light-color) !default;
$lte-sidebar-light-hover-color: var(--lte-sidebar-light-hover-color) !default;
$lte-sidebar-light-active-color: var(--lte-sidebar-light-active-color) !default;
$lte-sidebar-light-submenu-bg: var(--lte-sidebar-light-submenu-bg) !default;
$lte-sidebar-light-submenu-color: var(--lte-sidebar-light-submenu-color) !default;
$lte-sidebar-light-submenu-hover-color: var(--lte-sidebar-light-submenu-hover-color) !default;
$lte-sidebar-light-submenu-hover-bg: var(--lte-sidebar-light-submenu-hover-bg) !default;
$lte-sidebar-light-submenu-active-color: var(--lte-sidebar-light-submenu-active-color) !default;
$lte-sidebar-light-submenu-active-bg: var(--lte-sidebar-light-submenu-active-bg) !default;
$lte-sidebar-light-header-color: var(--lte-sidebar-light-header-color) !default;
$lte-sidebar-light-bg: var(--#{$lte-prefix}sidebar-light-bg) !default;
$lte-sidebar-light-hover-bg: var(--#{$lte-prefix}sidebar-light-hover-bg) !default;
$lte-sidebar-light-color: var(--#{$lte-prefix}sidebar-light-color) !default;
$lte-sidebar-light-hover-color: var(--#{$lte-prefix}sidebar-light-hover-color) !default;
$lte-sidebar-light-active-color: var(--#{$lte-prefix}sidebar-light-active-color) !default;
$lte-sidebar-light-submenu-bg: var(--#{$lte-prefix}sidebar-light-submenu-bg) !default;
$lte-sidebar-light-submenu-color: var(--#{$lte-prefix}sidebar-light-submenu-color) !default;
$lte-sidebar-light-submenu-hover-color: var(--#{$lte-prefix}sidebar-light-submenu-hover-color) !default;
$lte-sidebar-light-submenu-hover-bg: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg) !default;
$lte-sidebar-light-submenu-active-color: var(--#{$lte-prefix}sidebar-light-submenu-active-color) !default;
$lte-sidebar-light-submenu-active-bg: var(--#{$lte-prefix}sidebar-light-submenu-active-bg) !default;
$lte-sidebar-light-header-color: var(--#{$lte-prefix}sidebar-light-header-color) !default;
// SIDEBAR MINI
// --------------------------------------------------------
@ -135,17 +138,10 @@ $lte-main-header-height-sm: add($lte-main-header-height-sm-inner, $lt
// HEADER SKINS
// --------------------------------------------------------
// Dark sidebar
$lte-header-dark-bg: $dark !default;
$lte-header-dark-color: $white !default;
$lte-header-mobile-dark-bg: $dark !default;
$lte-header-mobile-dark-color: $white !default;
// Light sidebar
$lte-header-light-bg: $white !default;
$lte-header-light-color: $dark !default;
$lte-header-mobile-light-bg: $light !default;
$lte-header-mobile-light-color: $dark !default;
$lte-header-light-bg: var(--#{$prefix}body-bg) !default;
$lte-header-light-color: var(--#{$prefix}body-color) !default;
$lte-header-mobile-light-bg: $lte-header-light-bg !default;
$lte-header-mobile-light-color: $lte-header-light-color !default;
// Content padding
$lte-content-padding-y: 0 !default;
@ -169,8 +165,8 @@ $lte-main-footer-height-inner: (($lte-font-size-root * $line-height-base) +
$lte-main-footer-height: add($lte-main-footer-height-inner, $lte-main-footer-border-top-width) !default;
$lte-main-footer-height-sm-inner: (($font-size-sm * $line-height-base) + ($lte-main-footer-padding-sm * 2)) !default;
$lte-main-footer-height-sm: add($lte-main-footer-height-sm-inner, $lte-main-footer-border-top-width) !default;
$lte-main-footer-bg: $white !default;
$lte-main-footer-color: tint-color($gray-700, 25%) !default;
$lte-main-footer-bg: var(--#{$prefix}body-bg) !default;
$lte-main-footer-color: var(--#{$prefix}secondary-color) !default;
// BRAND LINK
// --------------------------------------------------------

1
src/scss/_wrapper.scss
View File

@ -14,6 +14,5 @@
grid-gap: 0;
align-content: stretch;
align-items: stretch;
min-height: 100vh;
}

1
src/scss/adminlte.scss
View File

@ -65,6 +65,7 @@
// AdminLTE Configuration
// ---------------------------------------------------
@import "variables";
@import "variables-dark";
@import "mixins";
// AdiminLTE Parts

57
src/scss/dark/_cards.scss
View File

@ -1,57 +0,0 @@
// 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 {
.card {
background-color: tint-colors($gray-900-alt, 5%);
}
.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($gray-900-alt, 1.25%);
.username {
color: $gray-400-alt;
}
.card-comment {
border-bottom-color: tint-colors($gray-900-alt, 7.5%);
}
}
.todo-list > li {
color: $white-alt;
background-color: tint-colors($gray-900-alt, 5%);
border-color: tint-colors($gray-900-alt, 7.5%);
}
.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;
}
}
}

4
src/scss/dark/_content-wrapper.scss
View File

@ -1,4 +0,0 @@
.content-wrapper {
color: $lte-main-color-alt;
background-color: $lte-main-bg-alt;
}

72
src/scss/dark/_direct-chat.scss
View File

@ -1,72 +0,0 @@
.direct-chat-text {
color: $white-alt;
background-color: $gray-800-alt;
border-color: tint-color($gray-800-alt, 10%);
&::after,
&::before {
border-right-color: $gray-800-alt;
}
}
.direct-chat-timestamp {
color: $gray-300-alt;
}
.end > .direct-chat-text {
&::after,
&::before {
border-right-color: transparent;
}
}
.direct-chat-contacts {
color: $white-alt;
background-color: $gray-800-alt;
}
.direct-chat-contacts-light {
background-color: $dark-alt;
.contacts-list-name {
color: $light-alt;
}
.contacts-list-date {
color: $gray-200-alt;
}
.contacts-list-msg {
color: $gray-300-alt;
}
}
//Contacts list -- for displaying contacts in direct chat contacts pane
.contacts-list > li {
border-bottom-color: rgba($white-alt, .2);
}
.contacts-list-info {
color: $white-alt;
}
.contacts-list-date {
color: $gray-300-alt;
}
.contacts-list-msg {
color: $gray-400-alt;
}
// Color variants
@each $name, $color in $theme-colors-alt {
.direct-chat-#{$name} {
@include direct-chat-variant($color);
}
}
@each $name, $color in $colors-alt {
.direct-chat-#{$name} {
@include direct-chat-variant($color);
}
}

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

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

4
src/scss/dark/_main-footer.scss
View File

@ -1,4 +0,0 @@
.main-footer {
background-color: $lte-main-footer-bg-alt;
border-top-color: tint-color($dark-alt, 10%);
}

13
src/scss/dark/_main-header.scss
View File

@ -1,13 +0,0 @@
.main-header {
background-color: $dark-alt;
border-bottom-color: tint-color($dark-alt, 10%);
.nav-link {
color: $body-color-alt;
&:hover,
&:focus {
color: $white-alt;
}
}
}

9
src/scss/dark/_products.scss
View File

@ -1,9 +0,0 @@
.products-list > .item {
color: $body-color-alt;
background-color: $body-bg-alt;
border-bottom-color: $gray-600-alt;
}
.product-description {
color: $gray-200-alt;
}

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

@ -1,22 +0,0 @@
// Dynamic Variables
// --------------------------------------------------------
:root {
// Sidebar active links
--lte-sidebar-menu-active-bg: #{$primary-alt};
--lte-sidebar-menu-active-color: #{$white-alt};
// Dark Sidebar Native Variables
--lte-sidebar-dark-bg: #{$dark-alt};
// Light Sidebar Native Variables
--lte-sidebar-light-bg: #{$white-alt};
}
// MAIN FOOTER
// --------------------------------------------------------
$lte-main-footer-bg-alt: $dark-alt !default;
// Body background (Affects main content background only)
$lte-main-bg-alt: $gray-900-alt !default;
$lte-main-color-alt: $white-alt !default;

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

@ -1,31 +0,0 @@
/*!
* AdminLTE Dark mode Add-on v4.0.0-alpha.1
* Author: Colorlib
* Website: AdminLTE.io <https://adminlte.io>
* License: Open source - MIT <https://opensource.org/licenses/MIT>
*/
// Configuration
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables"; // defaults are here
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
// stylelint-disable no-invalid-position-at-import-rule
:root { color-scheme: dark; }
// Layout & components
// Helpers
// Utilities
// Unique to dark-mode
// AdminLTE dark
@import "variables-alt";
@import "../mixins";
@import "parts/core";
@import "parts/components";
@import "parts/extra-components";

5
src/scss/dark/parts/_components.scss
View File

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

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

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

7
src/scss/dark/parts/_extra-components.scss
View File

@ -1,7 +0,0 @@
//
// Part: Extra Components
//
@import "../info-box";
@import "../direct-chat";
@import "../products";

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

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

9
src/scss/mixins/_header-variant.scss
View File

@ -11,15 +11,6 @@
.main-header {
color: $lte-header-color;
background-color: $lte-header-bg;
.nav-link {
color: $dark;
&:hover,
&:focus {
color: $black;
}
}
}
@include media-breakpoint-down(lg) {

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

@ -2,6 +2,7 @@
// Part: Core
//
@import "../root";
@import "../wrapper";
@import "../main-header";
@import "../brand-container";