OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Adjust base color definitions to allow for dark mode

Browse Source
This commit is contained in:
squidfunk 2020-03-21 16:06:59 +01:00
parent 08d89aeca2
commit 1fe985244c
5 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/assets/stylesheets/base/_colors.scss
View File

@ -41,16 +41,34 @@
--md-primary-fg-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
--md-primary-fg-color--light: hsla(#{hex2hsl($clr-indigo-300)}, 1);
--md-primary-fg-color--dark: hsla(#{hex2hsl($clr-indigo-700)}, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light);
--md-primary-bg-color: hsla(0, 0%, 100%, 1);
--md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
// Accent color shades
--md-accent-fg-color: hsla(#{hex2hsl($clr-indigo-a200)}, 1);
--md-accent-fg-color--transparent: hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light);
--md-accent-bg-color: hsla(0, 0%, 100%, 1);
--md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
// Code block color shades
--md-code-bg-color: hsla(0, 0%, 96%, 1);
--md-code-fg-color: hsla(200, 18%, 26%, 1);
}
// :root [data-md-color-scheme="dark"] {
:root {
// Default color shades
--md-default-fg-color: hsla(0, 0%, 100%, 1);
--md-default-fg-color--light: hsla(0, 0%, 100%, 0.7);
--md-default-fg-color--lighter: hsla(0, 0%, 100%, 0.3);
--md-default-fg-color--lightest: hsla(0, 0%, 100%, 0.12);
--md-default-bg-color: hsla(232, 15%, 21%, 1);
// --md-default-bg-color--light: hsla(0, 0%, 0%, 0.54);
// --md-default-bg-color--lighter: hsla(0, 0%, 0%, 0.26);
// --md-default-bg-color--lightest: hsla(0, 0%, 0%, 0.07);
// Code block color shades
--md-code-bg-color: hsla(232, 15%, 18%, 1);
--md-code-fg-color: hsla(60, 30%, 96%, 1);
}

1
src/assets/stylesheets/base/_typeset.scss
View File

@ -267,6 +267,7 @@ kbd {
mark {
margin: 0 px2em(4px, 16px);
padding: px2em(1px, 16px) 0;
color: currentColor;
word-break: break-word;
background-color: transparentize($clr-yellow-500, 0.5);
border-radius: px2rem(2px);

2
src/assets/stylesheets/layout/_base.scss
View File

@ -139,7 +139,7 @@ hr {
z-index: 3;
width: 0;
height: 0;
background-color: var(--md-default-fg-color--light);
background-color: hsla(0, 0%, 0%, 0.54);
opacity: 0;
transition:
width 0ms 250ms,

6
src/assets/stylesheets/layout/_search.scss
View File

@ -108,7 +108,7 @@ $md-toggle__search--checked:
left: 0;
width: 0;
height: 0;
background-color: var(--md-default-fg-color--light);
background-color: hsla(0, 0%, 0%, 0.54);
cursor: pointer;
transition:
width 0ms 250ms,
@ -262,7 +262,7 @@ $md-toggle__search--checked:
padding-left: px2rem(44px);
color: inherit;
font-size: ms(0);
background-color: var(--md-default-fg-color--lighter);
background-color: hsla(0, 0%, 0%, 0.26);
border-radius: px2rem(2px);
transition:
background-color 250ms,
@ -285,7 +285,7 @@ $md-toggle__search--checked:
// Hovered search field
&:hover {
background-color: var(--md-default-bg-color--lightest);
background-color: hsla(0, 0%, 100%, 0.12);
}
// Set light background on active search field

24
src/assets/stylesheets/palette.scss
View File

@ -70,11 +70,11 @@
// Inverted text for lighter shades
@if index("lime" "yellow" "amber" "orange", $name) {
--md-primary-bg-color: var(--md-default-fg-color);
--md-primary-bg-color--light: var(--md-default-fg-color--light);
--md-primary-bg-color: hsla(0, 0%, 0%, 0.87);
--md-primary-bg-color--light: hsla(0, 0%, 0%, 0.54);
} @else {
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light);
--md-primary-bg-color: hsla(0, 0%, 100%, 1);
--md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
}
}
}
@ -88,8 +88,8 @@
--md-primary-fg-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
--md-primary-fg-color--light: hsla(#{hex2hsl($clr-indigo-300)}, 1);
--md-primary-fg-color--dark: hsla(#{hex2hsl($clr-indigo-700)}, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light);
--md-primary-bg-color: hsla(0, 0%, 100%, 1);
--md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
// Application header (stays always on top)
.md-header {
@ -173,8 +173,8 @@
--md-primary-fg-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
--md-primary-fg-color--light: hsla(#{hex2hsl($clr-indigo-300)}, 1);
--md-primary-fg-color--dark: hsla(#{hex2hsl($clr-indigo-700)}, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light);
--md-primary-bg-color: hsla(0, 0%, 100%, 1);
--md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
// Application header (stays always on top)
.md-header {
@ -253,11 +253,11 @@
// Inverted text for lighter shades
@if index("lime" "yellow" "amber" "orange", $name) {
--md-accent-bg-color: var(--md-default-fg-color);
--md-accent-bg-color--light: var(--md-default-fg-color--light);
--md-accent-bg-color: hsla(0, 0%, 0%, 0.87);
--md-accent-bg-color--light: hsla(0, 0%, 0%, 0.54);
} @else {
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light);
--md-accent-bg-color: hsla(0, 0%, 100%, 1);
--md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
}
}
}