alyenc/hugo-theme-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Add comments active dark & light model.

Browse Source
This commit is contained in:
凡梦星尘
2022-09-27 11:01:43 +08:00
parent d4730f89d2
commit dc1c68d5c9
5 changed files with 87 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
assets/css/_colors.scss
View File

@@ -1,4 +1,4 @@
:root:not([data-theme="dark"]) {
:root {
// https://sass-lang.com/documentation/breaking-changes/css-vars
--body-bg-color: #{$body-bg-color};
--content-bg-color: #{$content-bg-color};
@@ -29,52 +29,6 @@
color-scheme: light;
}
@if $darkmode {
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--body-bg-color: #{$body-bg-color-dark};
--content-bg-color: #{$content-bg-color-dark};
--card-bg-color: #{$card-bg-color-dark};
--text-color: #{$text-color-dark};
--blockquote-color: #{$blockquote-color-dark};
--link-color: #{$link-color-dark};
--link-hover-color: #{$link-hover-color-dark};
--brand-color: #{$brand-color-dark};
--brand-hover-color: #{$brand-hover-color-dark};
--table-row-odd-bg-color: #{$table-row-odd-bg-color-dark};
--table-row-hover-bg-color: #{$table-row-hover-bg-color-dark};
--menu-item-bg-color: #{$menu-item-bg-color-dark};
--theme-color: #{$theme-color-dark};
--btn-default-bg: #{$btn-default-bg-dark};
--btn-default-color: #{$btn-default-color-dark};
--btn-default-border-color: #{$btn-default-border-color-dark};
--btn-default-hover-bg: #{$btn-default-hover-bg-dark};
--btn-default-hover-color: #{$btn-default-hover-color-dark};
--btn-default-hover-border-color: #{$btn-default-hover-border-color-dark};
--highlight-background: #{$highlight-background-dark};
--highlight-foreground: #{$highlight-foreground-dark};
--highlight-gutter-background: #{$highlight-gutter-background-dark};
--highlight-gutter-foreground: #{$highlight-gutter-foreground-dark};
color-scheme: dark;
}
img {
opacity: .75;
&:hover {
opacity: .9;
}
}
iframe {
color-scheme: light;
}
}
}
:root[data-theme="dark"] {
--body-bg-color: #{$body-bg-color-dark};
--content-bg-color: #{$content-bg-color-dark};
@@ -104,3 +58,15 @@
color-scheme: dark;
}
img[data-theme="dark"] {
opacity: .75;
&:hover {
opacity: .9;
}
}
iframe[data-theme="dark"] {
color-scheme: light;
}