zhao/heti
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: update darkmode support

Browse source
This commit is contained in:
Sivan 2020-05-18 00:49:59 +08:00
parent 150d657a8e
commit a0367d5a66
14 changed files with 1456 additions and 504 deletions
Download patch file Download diff file Expand all files Collapse all files

45
_site/scss/components/_grid-container.scss
View file

@ -1,6 +1,5 @@
// Author: Sivan [sun.sivan@gmail.com]
// Description: grid container.
$grid-sizes: (
"12": 12px,
"24": 24px
@ -20,6 +19,26 @@ $padding-desktop: 48px;
background-image: linear-gradient(to left, transparent ($grid-width - 1px), $grid-color 1px);
}
@mixin darkmode-mobile {
@each $size, $width in $grid-sizes {
&[data-bg-grid="grid-#{$size}"] {
@include grid-image-horizontal($width, $padding-mobile, hsl(0, 0%, 20%));
.heti--vertical {
@include grid-image-vertical($width, hsl(0, 0%, 20%));
}
}
}
}
@mixin darkmode-desktop {
@each $size, $width in $grid-sizes {
&[data-bg-grid="grid-#{$size}"] {
@include grid-image-horizontal($width, $padding-desktop, hsl(0, 0%, 20%), hsla(360, 100%, 65%, 0.4));
}
}
}
.container {
@each $size, $width in $grid-sizes {
&[data-bg-grid="grid-#{$size}"] {
@ -35,15 +54,13 @@ $padding-desktop: 48px;
}
}
@media (prefers-color-scheme: dark) {
@each $size, $width in $grid-sizes {
&[data-bg-grid="grid-#{$size}"] {
@include grid-image-horizontal($width, $padding-mobile, hsl(0, 0%, 20%));
[data-darkmode="dark"] & {
@include darkmode-mobile;
}
.heti--vertical {
@include grid-image-vertical($width, hsl(0, 0%, 20%));
}
}
@media (prefers-color-scheme: dark) {
[data-darkmode="auto"] & {
@include darkmode-mobile;
}
}
@ -55,11 +72,13 @@ $padding-desktop: 48px;
}
}
[data-darkmode="dark"] & {
@include darkmode-desktop;
}
@media (prefers-color-scheme: dark) {
@each $size, $width in $grid-sizes {
&[data-bg-grid="grid-#{$size}"] {
@include grid-image-horizontal($width, $padding-desktop, hsl(0, 0%, 20%), hsla(360, 100%, 65%, 0.4));
}
[data-darkmode="auto"] & {
@include darkmode-desktop;
}
}
}

127
_site/scss/components/_panel-list.scss
View file

@ -1,7 +1,6 @@
// Author: Sivan [sun.sivan@gmail.com]
// Description: panel list.
.panel-list {
@mixin lightmode {
--bg-color: hsl(240, 100%, 100%);
--bg-tap-color: hsl(300, 3%, 94%);
--border-color: hsla(0, 0%, 76%, 0.88);
@ -53,66 +52,80 @@
--border-block-end-highlight-tap-color: hsl(228, 4%, 26%);
--text-highlight-color: hsl(0, 0%, 92%);
}
}
@media (prefers-color-scheme: dark) {
--bg-color: hsl(225, 2%, 40%);
--bg-tap-color: hsl(210, 2%, 49%);
--border-color: hsla(210, 2%, 33%, 0.88);
--border-inline-start-color: hsl(210, 2%, 33%);
--border-inline-end-color: hsl(210, 2%, 33%);
--border-block-start-color: hsl(225, 2%, 45%);
--border-block-end-color: hsl(210, 2%, 40%);
@mixin darkmode {
--bg-color: hsl(225, 2%, 40%);
--bg-tap-color: hsl(210, 2%, 49%);
--border-color: hsla(210, 2%, 33%, 0.88);
--border-inline-start-color: hsl(210, 2%, 33%);
--border-inline-end-color: hsl(210, 2%, 33%);
--border-block-start-color: hsl(225, 2%, 45%);
--border-block-end-color: hsl(210, 2%, 40%);
--text-color: hsl(0, 0%, 91%);
--box-shadow-color: hsla(225, 4%, 21%, 0.54);
--bg-highlight-color-start: hsl(216, 77%, 49%);
--bg-highlight-color-end: hsl(216, 76%, 45%);
--bg-highlight-tap-color-start: hsl(214, 83%, 55%);
--bg-highlight-tap-color-end: hsl(215, 74%, 51%);
--border-highlight-color: hsla(215, 77%, 47%, 0.88);
--border-highlight-tap-color: hsla(215, 79%, 54%, 0.88);
--border-inline-start-highlight-color: hsl(215, 77%, 47%);
--border-inline-end-highlight-color: hsl(215, 77%, 47%);
--border-inline-start-highlight-tap-color: hsl(215, 79%, 54%);
--border-inline-end-highlight-tap-color: hsl(215, 79%, 54%);
--border-block-start-highlight-color: hsl(216, 76%, 55%);
--border-block-end-highlight-color: hsl(216, 76%, 44%);
--border-block-start-highlight-tap-color: hsl(215, 84%, 60%);
--border-block-end-highlight-tap-color: hsl(215, 74%, 51%);
--text-highlight-color: hsl(0, 0%, 100%);
&--gray {
--bg-color: hsl(0, 0%, 40%);
--bg-tap-color: hsl(0, 0%, 49%);
--border-color: hsla(120, 1%, 34%, 0.88);
--border-inline-start-color: hsl(0, 0%, 40%);
--border-inline-end-color: hsl(360, 0%, 40%);
--border-block-start-color: hsl(0, 0%, 46%);
--border-block-end-color: hsl(120, 0%, 40%);
--text-color: hsl(0, 0%, 91%);
--box-shadow-color: hsla(225, 4%, 21%, 0.54);
--bg-highlight-color-start: hsl(216, 77%, 49%);
--bg-highlight-color-end: hsl(216, 76%, 45%);
--bg-highlight-tap-color-start: hsl(214, 83%, 55%);
--bg-highlight-tap-color-end: hsl(215, 74%, 51%);
--border-highlight-color: hsla(215, 77%, 47%, 0.88);
--border-highlight-tap-color: hsla(215, 79%, 54%, 0.88);
--border-inline-start-highlight-color: hsl(215, 77%, 47%);
--border-inline-end-highlight-color: hsl(215, 77%, 47%);
--border-inline-start-highlight-tap-color: hsl(215, 79%, 54%);
--border-inline-end-highlight-tap-color: hsl(215, 79%, 54%);
--border-block-start-highlight-color: hsl(216, 76%, 55%);
--border-block-end-highlight-color: hsl(216, 76%, 44%);
--border-block-start-highlight-tap-color: hsl(215, 84%, 60%);
--border-block-end-highlight-tap-color: hsl(215, 74%, 51%);
--text-highlight-color: hsl(0, 0%, 100%);
&--gray {
--bg-color: hsl(0, 0%, 40%);
--bg-tap-color: hsl(0, 0%, 49%);
--border-color: hsla(120, 1%, 34%, 0.88);
--border-inline-start-color: hsl(0, 0%, 40%);
--border-inline-end-color: hsl(360, 0%, 40%);
--border-block-start-color: hsl(0, 0%, 46%);
--border-block-end-color: hsl(120, 0%, 40%);
--text-color: hsl(0, 0%, 91%);
--box-shadow-color: hsla(0, 0%, 17%, 0.54);
--bg-highlight-color-start: hsl(0, 0%, 60%);
--bg-highlight-color-end: hsl(0, 0%, 60%);
--bg-highlight-tap-color-start: hsl(0, 0%, 69%);
--bg-highlight-tap-color-end: hsl(0, 0%, 69%);
--border-highlight-color: hsla(0, 0%, 60%, 0.88);
--border-highlight-tap-color: hsla(0, 0%, 69%, 0.88);
--border-inline-start-highlight-color: hsl(0, 0%, 60%);
--border-inline-end-highlight-color: hsl(0, 0%, 60%);
--border-inline-start-highlight-tap-color: hsl(0, 0%, 69%);
--border-inline-end-highlight-tap-color: hsl(0, 0%, 69%);
--border-block-start-highlight-color: hsl(0, 0%, 64%);
--border-block-end-highlight-color: hsl(0, 0%, 60%);
--border-block-start-highlight-tap-color: hsl(0, 0%, 73%);
--border-block-end-highlight-tap-color: hsl(0, 0%, 69%);
--text-highlight-color: hsl(0, 0%, 15%);
}
--box-shadow-color: hsla(0, 0%, 17%, 0.54);
--bg-highlight-color-start: hsl(0, 0%, 60%);
--bg-highlight-color-end: hsl(0, 0%, 60%);
--bg-highlight-tap-color-start: hsl(0, 0%, 69%);
--bg-highlight-tap-color-end: hsl(0, 0%, 69%);
--border-highlight-color: hsla(0, 0%, 60%, 0.88);
--border-highlight-tap-color: hsla(0, 0%, 69%, 0.88);
--border-inline-start-highlight-color: hsl(0, 0%, 60%);
--border-inline-end-highlight-color: hsl(0, 0%, 60%);
--border-inline-start-highlight-tap-color: hsl(0, 0%, 69%);
--border-inline-end-highlight-tap-color: hsl(0, 0%, 69%);
--border-block-start-highlight-color: hsl(0, 0%, 64%);
--border-block-end-highlight-color: hsl(0, 0%, 60%);
--border-block-start-highlight-tap-color: hsl(0, 0%, 73%);
--border-block-end-highlight-tap-color: hsl(0, 0%, 69%);
--text-highlight-color: hsl(0, 0%, 15%);
}
}
.panel-list {
display: inline-flex;
margin: 0;
padding: 0;
list-style-type: none;
@include lightmode;
[data-darkmode="dark"] & {
@include darkmode;
}
@media (prefers-color-scheme: dark) {
[data-darkmode="auto"] & {
@include darkmode;
}
}
& + & {
margin-inline-start: 12px;
}
@ -177,4 +190,12 @@
}
}
}
&--icon {
label {
width: 30px;
padding-inline-start: 8px;
padding-inline-end: 8px;
}
}
}

3
_site/scss/heti.scss Normal file
View file

@ -0,0 +1,3 @@
$darkmode: 'manual';
@import "../../lib/heti";

13
_site/scss/index.scss
View file

@ -127,7 +127,7 @@ a {
}
}
@media (prefers-color-scheme: dark) {
@mixin darkmode() {
body {
background-color: hsl(0, 0%, 24%);
}
@ -151,3 +151,14 @@ a {
}
}
}
// Force dark mode
[data-darkmode="dark"] {
@include darkmode();
}
@media (prefers-color-scheme: dark) {
[data-darkmode="auto"] {
@include darkmode();
}
}