github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-17 18:22:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add supports of light-dark function (#899)

Browse Source
This commit is contained in:
where where 2025-11-03 06:28:49 +00:00 committed by GitHub
parent 5098e8cdfa
commit 0a02719361
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 154 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_config.yml
View File

@ -45,6 +45,12 @@ scheme: Muse
# Dark Mode
darkmode: false
# Light-Dark Mode
lightdark:
enable: false
# Add @supports (color: light-dark(red, red)) check
check_supports: true
# ---------------------------------------------------------------
# Site Information Settings

43
source/css/_colors.styl
View File

@ -77,3 +77,46 @@ if (hexo-config('darkmode')) {
}
}
}
if (hexo-config('lightdark.enable')) {
+light-dark-block() {
:root {
--body-bg-color: light-dark($body-bg-color, $body-bg-color-dark);
--content-bg-color: light-dark($content-bg-color, $content-bg-color-dark);
--card-bg-color: light-dark($card-bg-color, $card-bg-color-dark);
--text-color: light-dark($text-color, $text-color-dark);
--selection-bg: light-dark($selection-bg, $selection-bg-dark);
--selection-color: light-dark($selection-color, $selection-color-dark);
--blockquote-color: light-dark($blockquote-color, $blockquote-color-dark);
--link-color: light-dark($link-color, $link-color-dark);
--link-hover-color: light-dark($link-hover-color, $link-hover-color-dark);
--brand-color: light-dark($brand-color, $brand-color-dark);
--brand-hover-color: light-dark($brand-hover-color, $brand-hover-color-dark);
--table-row-odd-bg-color: light-dark($table-row-odd-bg-color, $table-row-odd-bg-color-dark);
--table-row-hover-bg-color: light-dark($table-row-hover-bg-color, $table-row-hover-bg-color-dark);
--menu-item-bg-color: light-dark($menu-item-bg-color, $menu-item-bg-color-dark);
--theme-color: light-dark($theme-color, $theme-color-dark);
--btn-default-bg: light-dark($btn-default-bg, $btn-default-bg-dark);
--btn-default-color: light-dark($btn-default-color, $btn-default-color-dark);
--btn-default-border-color: light-dark($btn-default-border-color, $btn-default-border-color-dark);
--btn-default-hover-bg: light-dark($btn-default-hover-bg, $btn-default-hover-bg-dark);
--btn-default-hover-color: light-dark($btn-default-hover-color, $btn-default-hover-color-dark);
--btn-default-hover-border-color: light-dark($btn-default-hover-border-color, $btn-default-hover-border-color-dark);
color-scheme: light dark;
img {
opacity: light-dark(1, .75);
&:hover {
opacity: light-dark(1, .9);
}
}
iframe {
color-scheme: light;
}
}
}
}

13
source/css/_common/components/pages/tag-cloud.styl
View File

@ -26,3 +26,16 @@ if (hexo-config('darkmode')) {
}
}
}
if (hexo-config('lightdark.enable')) {
+light-dark-block() {
for $tag-cloud in (0 .. 10) {
$tag-cloud-color = mix($tag-cloud-end, $tag-cloud-start, $tag-cloud * 10);
$tag-cloud-color-dark = mix($tag-cloud-end-dark, $tag-cloud-start-dark, $tag-cloud * 10);
.tag-cloud-{$tag-cloud} {
border-bottom-color: light-dark($tag-cloud-color, $tag-cloud-color-dark);
color: light-dark($tag-cloud-color, $tag-cloud-color-dark);
}
}
}
}

65
source/css/_common/components/third-party/disqusjs.styl vendored
View File

@ -1,39 +1,48 @@
if (hexo-config('disqusjs.enable') and hexo-config('darkmode')) {
@media (prefers-color-scheme:dark) {
html #dsqjs a {
color: var(--link-color);
}
if (hexo-config('disqusjs.enable')) {
html #dsqjs {
color-scheme: light;
}
if (hexo-config('darkmode')) {
@media (prefers-color-scheme:dark) {
html #dsqjs {
color-scheme: dark;
}
html #dsqjs a:focus,html #dsqjs a:hover {
color: var(--link-hover-color);
}
html #dsqjs a {
color: var(--link-color);
}
html #dsqjs .dsqjs-nav,html #dsqjs footer {
border-color: var(--card-bg-color);
}
html #dsqjs a:focus,html #dsqjs a:hover {
color: var(--link-hover-color);
}
html #dsqjs .dsqjs-load-more,html #dsqjs .dsqjs-load-more:hover,html #dsqjs .dsqjs-nav-tab,html #dsqjs .dsqjs-no-comment,html #dsqjs .dsqjs-post-content {
color: var(--text-color);
}
html #dsqjs .dsqjs-nav,html #dsqjs footer {
border-color: var(--card-bg-color);
}
html #dsqjs .dsqjs-order-label {
background-color: #3e4b5e;
}
html #dsqjs .dsqjs-load-more,html #dsqjs .dsqjs-load-more:hover,html #dsqjs .dsqjs-nav-tab,html #dsqjs .dsqjs-no-comment,html #dsqjs .dsqjs-post-content {
color: var(--text-color);
}
html #dsqjs .dsqjs-order-radio:checked+.dsqjs-order-label {
background-color: var(--content-bg-color);
}
html #dsqjs .dsqjs-order-label {
background-color: #3e4b5e;
}
html #dsqjs .dsqjs-tab-active>span:after {
background-color: #2e9fff!important;
}
html #dsqjs .dsqjs-order-radio:checked+.dsqjs-order-label {
background-color: var(--content-bg-color);
}
html #dsqjs .dsqjs-footer,html #dsqjs .dsqjs-meta {
color: var(--text-color);
}
html #dsqjs .dsqjs-tab-active>span:after {
background-color: #2e9fff!important;
}
html #dsqjs .dsqjs-post-body blockquote {
border-color: var(--content-bg-color);
html #dsqjs .dsqjs-footer,html #dsqjs .dsqjs-meta {
color: var(--text-color);
}
html #dsqjs .dsqjs-post-body blockquote {
border-color: var(--content-bg-color);
}
}
}
}

8
source/css/_common/components/third-party/gitalk.styl vendored
View File

@ -14,4 +14,12 @@ if (hexo-config('gitalk.enable')) {
}
}
}
if (hexo-config('lightdark.enable')) {
+light-dark-block() {
.gt-container .gt-header-textarea {
background-color: light-dark(#f6f6f6, var(--card-bg-color-dark)) !important;
}
}
}
}

5
source/css/_common/components/third-party/search.styl vendored
View File

@ -62,6 +62,11 @@ if (hexo-config('local_search.enable') or hexo-config('algolia_search.enable'))
background: $grey-dim;
}
}
if (hexo-config('lightdark.enable')) {
+light-dark-block() {
background: light-dark($gainsboro, $grey-dim);
}
}
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: flex;

8
source/css/_common/scaffolding/highlight/index.styl
View File

@ -75,6 +75,14 @@ figure.highlight {
overflow: auto;
position: relative;
color-scheme: light;
if (hexo-config('darkmode')) {
@media (prefers-color-scheme: dark) {
color-scheme: dark;
}
}
pre {
border: 0;
margin: 0;

23
source/css/_common/scaffolding/tags/note.styl
View File

@ -69,6 +69,11 @@ if (hexo-config('note.style') != 'disabled') {
background: mix($note-bg[$type], $body-bg-color-dark, 10%);
}
}
if (hexo-config('lightdark.enable')) {
+light-dark-block() {
background: light-dark($note-bg[$type], mix($note-bg[$type], $body-bg-color-dark, 10%));
}
}
}
if ($note-style == 'modern') {
@ -103,6 +108,24 @@ if (hexo-config('note.style') != 'disabled') {
}
}
}
if (hexo-config('lightdark.enable')) {
+light-dark-block() {
background: light-dark($note-modern-bg[$type], $note-modern-bg-dark[$type]);
border-color: light-dark($note-modern-border[$type], $note-modern-border-dark[$type]);
color: light-dark($note-modern-text[$type], $note-modern-text-dark[$type]);
a:not(.btn) {
border-bottom-color: light-dark($note-modern-text[$type], $note-modern-text-dark[$type]);
color: light-dark($note-modern-text[$type], $note-modern-text-dark[$type]);
&:hover {
border-bottom-color: light-dark($note-modern-hover[$type], $note-modern-hover-dark[$type]);
color: light-dark($note-modern-hover[$type], $note-modern-hover-dark[$type]);
}
}
}
}
}
if ($note-style != 'modern') {

11
source/css/_mixins.styl
View File

@ -52,6 +52,17 @@ desktop-largest() {
}
}
light-dark-block() {
if (hexo-config('lightdark.check_supports')){
@supports (color: light-dark(red, red)) {
{block};
}
}
else {
{block};
}
}
sidebar() {
if (($scheme == 'Muse') or ($scheme == 'Mist')) {
{block}