From 05146a10760d3aba22c783ce5ff12c658beee455 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 12 May 2026 22:04:22 +0800 Subject: [PATCH 1/2] Adjust color scheme --- .../stylesheets/main/components/_header.scss | 7 ++-- .../stylesheets/main/components/_nav.scss | 35 ++++++++++++---- .../stylesheets/main/components/_tabs.scss | 8 ++-- .../assets/stylesheets/palette/_primary.scss | 40 +++++++++---------- .../assets/stylesheets/palette/_scheme.scss | 8 ++-- 5 files changed, 59 insertions(+), 39 deletions(-) diff --git a/src/templates/assets/stylesheets/main/components/_header.scss b/src/templates/assets/stylesheets/main/components/_header.scss index 638855007..b7c90c945 100644 --- a/src/templates/assets/stylesheets/main/components/_header.scss +++ b/src/templates/assets/stylesheets/main/components/_header.scss @@ -259,8 +259,9 @@ width: px2rem(20px); height: px2rem(20px); } -} -[data-mx-topbar]:not([data-mx-topbar="glass"]) .md-header { - backdrop-filter: none; + [data-mx-topbar]:not([data-mx-topbar="glass"]) & { + backdrop-filter: none; + box-shadow: none; + } } diff --git a/src/templates/assets/stylesheets/main/components/_nav.scss b/src/templates/assets/stylesheets/main/components/_nav.scss index 9a68defed..dc157ac67 100644 --- a/src/templates/assets/stylesheets/main/components/_nav.scss +++ b/src/templates/assets/stylesheets/main/components/_nav.scss @@ -140,14 +140,25 @@ background-color: var(--md-primary-fg-color--transparent); // Safari 15.4 之前不支持 color-mix() // background: color-mix(in srgb, var(--md-primary-fg-color), transparent 90%); - } - [data-mx-topbar]:not([data-mx-topbar="glass"])[data-md-color-primary="white"] .md-nav--primary &, - [data-mx-topbar]:not([data-mx-topbar="glass"])[data-md-color-primary="black"] .md-nav--primary & { - color: var(--md-primary-bg-color); + [data-md-color-primary="white"] &, + [data-md-color-primary="black"] & { + color: var(--md-primary-bg-color); + + @supports (color: color-mix(in srgb, black, white)) { + background-color: color-mix(in srgb, var(--md-primary-bg-color), transparent 90%); + } + } + + // Use darker yellow for better readability in light mode + [data-md-color-primary="yellow"]:not([data-md-color-scheme="slate"]) & { + color: var(--md-primary-fg-color--dark); + } - @supports (color: color-mix(in srgb, black, white)) { - background-color: color-mix(in srgb, var(--md-primary-bg-color), transparent 90%); + // Fix contrast issues for neutral colors in specific schemes + [data-md-color-primary="black"]:not([data-md-color-scheme="slate"]) &, + [data-md-color-primary="white"][data-md-color-scheme="slate"] & { + background-color: var(--md-default-fg-color--lighter); } } @@ -407,10 +418,18 @@ &__link--active { color: var(--md-primary-fg-color); - [data-mx-topbar]:not([data-mx-topbar="glass"])[data-md-color-primary="white"] &, - [data-mx-topbar]:not([data-mx-topbar="glass"])[data-md-color-primary="black"] & { + [data-md-color-primary="white"] &, + [data-md-color-primary="black"] & { color: var(--md-primary-bg-color); } + [data-md-color-primary="yellow"]:not([data-md-color-scheme="slate"]) & { + color: var(--md-primary-fg-color--dark); + } + // Fix contrast issues for neutral colors in specific schemes + [data-md-color-primary="black"]:not([data-md-color-scheme="slate"]) &, + [data-md-color-primary="white"][data-md-color-scheme="slate"] & { + color: var(--md-default-fg-color); + } } } } diff --git a/src/templates/assets/stylesheets/main/components/_tabs.scss b/src/templates/assets/stylesheets/main/components/_tabs.scss index ea8b395fd..53fbfe50f 100644 --- a/src/templates/assets/stylesheets/main/components/_tabs.scss +++ b/src/templates/assets/stylesheets/main/components/_tabs.scss @@ -151,9 +151,9 @@ transform: translateY(50%); } } -} -[data-mx-topbar]:not([data-mx-topbar="glass"]) .md-tabs { - backdrop-filter: none; - box-shadow: none; + [data-mx-topbar]:not([data-mx-topbar="glass"]) & { + backdrop-filter: none; + box-shadow: none; + } } diff --git a/src/templates/assets/stylesheets/palette/_primary.scss b/src/templates/assets/stylesheets/palette/_primary.scss index d3fb2e72d..cbb854054 100644 --- a/src/templates/assets/stylesheets/palette/_primary.scss +++ b/src/templates/assets/stylesheets/palette/_primary.scss @@ -120,18 +120,18 @@ // Search form .md-search__form { - background-color: hsla(var(--md-hue), 0%, 0%, 0.07); + // background-color: hsla(var(--md-hue), 0%, 0%, 0.07); // Search form on hover &:hover { - background-color: hsla(var(--md-hue), 0%, 0%, 0.32); + background-color: hsla(var(--md-hue), 0%, 0%, 0.2); } } - // Search icon - .md-search__input + .md-search__icon { - color: hsla(var(--md-hue), 0%, 0%, 0.87); - } + // // Search icon + // .md-search__input + .md-search__icon { + // color: hsla(var(--md-hue), 0%, 0%, 0.87); + // } } // [screen +]: Add bottom border for tabs @@ -177,21 +177,21 @@ // background-color: hsla(var(--md-hue), 15%, 9%, 1); // } - // [tablet portrait -]: Layered navigation - @include break-to-device(tablet portrait) { + // // [tablet portrait -]: Layered navigation + // @include break-to-device(tablet portrait) { - // Repository information container - .md-nav__source { - background-color: hsla(var(--md-hue), 15%, 11%, 0.87); - } - } + // // Repository information container + // .md-nav__source { + // background-color: hsla(var(--md-hue), 15%, 11%, 0.87); + // } + // } - // [tablet -]: Layered navigation - @include break-to-device(tablet) { + // // [tablet -]: Layered navigation + // @include break-to-device(tablet) { - // Site title in main navigation - html & .md-nav--primary .md-nav__title[for="__drawer"] { - background-color: hsla(var(--md-hue), 15%, 9%, 1); - } - } + // // Site title in main navigation + // html & .md-nav--primary .md-nav__title[for="__drawer"] { + // background-color: hsla(var(--md-hue), 15%, 9%, 1); + // } + // } } diff --git a/src/templates/assets/stylesheets/palette/_scheme.scss b/src/templates/assets/stylesheets/palette/_scheme.scss index ed2e4e891..3b7d6ba94 100644 --- a/src/templates/assets/stylesheets/palette/_scheme.scss +++ b/src/templates/assets/stylesheets/palette/_scheme.scss @@ -117,10 +117,10 @@ color: hsla(var(--md-hue), 0%, 100%, 1); } - // Header title - .md-header__title { - color: hsla(var(--md-hue), 0%, 100%, 1); - } + // // Header title + // .md-header__title { + // color: hsla(var(--md-hue), 0%, 100%, 1); + // } // Hide images for light mode img[src$="#only-light"], From f18e340ee2ac357d4d826f699c4b72d943a62b2d Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 12 May 2026 22:08:44 +0800 Subject: [PATCH 2/2] Adjust color scheme --- src/templates/assets/stylesheets/main/components/_nav.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/templates/assets/stylesheets/main/components/_nav.scss b/src/templates/assets/stylesheets/main/components/_nav.scss index dc157ac67..365b4c362 100644 --- a/src/templates/assets/stylesheets/main/components/_nav.scss +++ b/src/templates/assets/stylesheets/main/components/_nav.scss @@ -144,7 +144,7 @@ [data-md-color-primary="white"] &, [data-md-color-primary="black"] & { color: var(--md-primary-bg-color); - + @supports (color: color-mix(in srgb, black, white)) { background-color: color-mix(in srgb, var(--md-primary-bg-color), transparent 90%); } @@ -422,6 +422,7 @@ [data-md-color-primary="black"] & { color: var(--md-primary-bg-color); } + [data-md-color-primary="yellow"]:not([data-md-color-scheme="slate"]) & { color: var(--md-primary-fg-color--dark); }