From ca96ff4b85e9bfe9a513135721c25d0fc0a25dae Mon Sep 17 00:00:00 2001 From: Eltrac Date: Mon, 3 Feb 2025 20:01:07 +0800 Subject: feat(pagefind): custom css in dark mode Former-commit-id: 8e752c4de876d8ac67b456737272a6b70895c5c2 --- assets/css/components/_variables.scss | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) (limited to 'assets/css') diff --git a/assets/css/components/_variables.scss b/assets/css/components/_variables.scss index b2e4cb8d..f3908a14 100644 --- a/assets/css/components/_variables.scss +++ b/assets/css/components/_variables.scss @@ -16,31 +16,36 @@ --content-font-size: 20px; --page-width: 700px; -} -.dark { - --background-color: #1D2021; - --block-background-color: #181A1B; - --border-color: rgba(255,255,255,0.2); - --text-color: #D2CEC9; - --secondary-text-color: #A1998D; - --link-color: #277BD9; - --bright-background-color: #666; + /* pagefind custom css */ + --pagefind-ui-primary: var(--text-color); + --pagefind-ui-text: var(--text-color); + --pagefind-ui-background: var(--background-color); + --pagefind-ui-border: var(--border-color); + --pagefind-ui-tag: var(--border-color); } html[lang="en-US"] { --serif-font-family: "Playfair Display", serif; } -@media (prefers-color-scheme: dark) { - :root { +@mixin variablesInDarkMode { --background-color: #1D2021; --block-background-color: #181A1B; --border-color: rgba(255,255,255,0.2); --text-color: #D2CEC9; --secondary-text-color: #A1998D; --link-color: #277BD9; - --bright-background-color: #333; + --bright-background-color: #666; +} + +.dark { + @include variablesInDarkMode; +} + +@media (prefers-color-scheme: dark) { + :root { + @include variablesInDarkMode; } } -- cgit v1.2.3