hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use modern RGB format (fixes #54)

Browse Source
This commit is contained in:
daudix
2024-08-23 23:18:59 +03:00
parent 8411000de7
commit 7808d906f1
8 changed files with 162 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
config.toml
View File

@ -60,11 +60,11 @@ taxonomies = [{ name = "tags", feed = true }]
# See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color # See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
primary_color = "#ff7800" primary_color = "#ff7800"
# Same as primary_color, but with 20% opacity # Same as primary_color, but with 20% opacity
primary_color_alpha = "rgba(255, 120, 0, 0.2)" primary_color_alpha = "rgb(255 120 0 / 0.2)"
# Ditto but for the dark mode. # Ditto but for the dark mode.
# If not set regular variant will be used. # If not set regular variant will be used.
primary_color_dark = "#ffa348" primary_color_dark = "#ffa348"
primary_color_dark_alpha = "rgba(255, 163, 72, 0.2)" primary_color_dark_alpha = "rgb(255 163 72 / 0.2)"
# Whether to fix low contrast in text selection, checkboxes, etc. # Whether to fix low contrast in text selection, checkboxes, etc.
# Use only if the default doesn't provide enough contrast, e.g. the primary color is set to yellow. # Use only if the default doesn't provide enough contrast, e.g. the primary color is set to yellow.
# fix_contrast = true # fix_contrast = true

4
content/_index.md
View File

@ -123,7 +123,7 @@ Duckquill respects chosen primary color everywhere. To use your own, simply chan
```toml ```toml
[extra] [extra]
primary_color = "#3584e4" primary_color = "#3584e4"
primary_color_alpha = "rgba(53, 132, 228, 0.2)" primary_color_alpha = "rgb(53 132 228 / 0.2)"
``` ```
Additionally, you can set a separate color for dark mode: Additionally, you can set a separate color for dark mode:
@ -131,7 +131,7 @@ Additionally, you can set a separate color for dark mode:
```toml ```toml
[extra] [extra]
primary_color_dark = "#ff7800" primary_color_dark = "#ff7800"
primary_color_dark_alpha = "rgba(255, 120, 0, 0.2)" primary_color_dark_alpha = "rgb(255 120 0 / 0.2)"
``` ```
### Favicon ### Favicon

4
content/demo/index.md
View File

@ -558,9 +558,9 @@ Blah blah <q>Inline Quote</q> hmm.
b = parseInt(hex.slice(5, 7), 16); b = parseInt(hex.slice(5, 7), 16);
if (alpha) { if (alpha) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"; return "rgb(" + r + " " + g + " " + b + " / " + alpha + ")";
} else { } else {
return "rgb(" + r + ", " + g + ", " + b + ")"; return "rgb(" + r + " " + g + " " + b + ")";
} }
} }

8
content/tricks/index.md
View File

@ -32,7 +32,7 @@ You can make navbar have more classic look:
#site-nav { #site-nav {
top: 0; top: 0;
margin-top: 0; margin-top: 0;
box-shadow: 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5); box-shadow: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: 0; border-radius: 0;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@ -69,7 +69,7 @@ Or you can make it sticked to top but not full-width:
#site-nav { #site-nav {
top: 0; top: 0;
margin-top: 0; margin-top: 0;
box-shadow: 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5); box-shadow: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem); border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem);
nav ul li { nav ul li {
@ -192,10 +192,10 @@ Most of the time contrast should be okay, but what if it's not? Simply adjust th
```scss ```scss
:root { :root {
--bg-color: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)); --bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
--bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)); --bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
} }
} }
``` ```

28
sass/_crt.scss
View File

@ -1,8 +1,13 @@
.crt { .crt {
margin: 1rem 0 1rem; margin: 1rem 0 1rem;
box-shadow: var(--edge-highlight), 0 0 0 0.0625rem var(--primary-color-alpha), 0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha), 0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha); box-shadow:
var(--edge-highlight),
0 0 0 0.0625rem var(--primary-color-alpha),
0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha),
0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color); background: radial-gradient(rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.85)),
var(--primary-color);
pre { pre {
animation: flicker 0.25s alternate infinite; animation: flicker 0.25s alternate infinite;
@ -11,7 +16,9 @@
background-color: transparent !important; background-color: transparent !important;
padding: 1rem 1rem; padding: 1rem 1rem;
color: var(--primary-color) !important; color: var(--primary-color) !important;
text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem; text-shadow:
var(--primary-color-alpha) 0 0 0.25rem,
var(--primary-color) 0 0 0.75rem;
@keyframes flicker { @keyframes flicker {
25% { 25% {
@ -43,7 +50,13 @@
z-index: 1; z-index: 1;
animation: scanlines 0.1s linear infinite; animation: scanlines 0.1s linear infinite;
inset: 0; inset: 0;
background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 0.125rem, transparent 0.125rem, transparent 0.25rem); background-image: repeating-linear-gradient(
to bottom,
rgb(0 0 0 / 0.25),
rgb(0 0 0 / 0.25) 0.125rem,
transparent 0.125rem,
transparent 0.25rem
);
pointer-events: none; pointer-events: none;
content: ""; content: "";
@ -59,7 +72,12 @@
position: absolute; position: absolute;
animation: scanline 5s linear infinite; animation: scanline 5s linear infinite;
inset: 0; inset: 0;
background-image: linear-gradient(to bottom, transparent, var(--primary-color-alpha) 7rem, transparent 8rem); background-image: linear-gradient(
to bottom,
transparent,
var(--primary-color-alpha) 7rem,
transparent 8rem
);
background-size: auto 8rem; background-size: auto 8rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-y: -8rem; background-position-y: -8rem;

35
sass/_nav.scss
View File

@ -5,7 +5,9 @@
z-index: 999; z-index: 999;
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
margin: 1rem auto; margin: 1rem auto;
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5); box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: 1.625rem; border-radius: 1.625rem;
background-color: var(--nav-bg); background-color: var(--nav-bg);
max-width: 90%; max-width: 90%;
@ -27,7 +29,9 @@
z-index: 999; z-index: 999;
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
transition: var(--transition); transition: var(--transition);
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5); box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: 999px; border-radius: 999px;
background-color: var(--nav-bg); background-color: var(--nav-bg);
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
@ -56,7 +60,14 @@
list-style: none; list-style: none;
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
&:not(#search, #language-switcher, #theme-switcher, #theme-switcher li, #feed, #repo) { &:not(
#search,
#language-switcher,
#theme-switcher,
#theme-switcher li,
#feed,
#repo
) {
flex: 0 0 100%; flex: 0 0 100%;
} }
} }
@ -190,7 +201,8 @@
right: unset; right: unset;
bottom: 0.25rem; bottom: 0.25rem;
left: -0.5rem; left: -0.5rem;
border-inline-end: 0.25rem solid var(--fg-muted-2); border-inline-end: 0.25rem solid
var(--fg-muted-2);
border-block-end: none; border-block-end: none;
border-start-end-radius: 0.25rem; border-start-end-radius: 0.25rem;
border-end-start-radius: 0; border-end-start-radius: 0;
@ -213,7 +225,8 @@
right: unset; right: unset;
bottom: 0; bottom: 0;
left: -0.5rem; left: -0.5rem;
border-inline-end: 0.25rem solid var(--primary-color); border-inline-end: 0.25rem solid
var(--primary-color);
border-block-end: none; border-block-end: none;
content: ""; content: "";
@ -329,7 +342,9 @@
transform: translate(-50%, 1rem); transform: translate(-50%, 1rem);
z-index: 1; z-index: 1;
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5); box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
background-color: var(--nav-bg); background-color: var(--nav-bg);
padding: 0.25rem; padding: 0.25rem;
@ -355,7 +370,9 @@
} }
ul { ul {
border-radius: calc(var(--rounded-corner) + 0.25rem); border-radius: calc(
var(--rounded-corner) + 0.25rem
);
} }
} }
} }
@ -473,7 +490,9 @@
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5); box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: calc(var(--rounded-corner) + 0.5rem); border-radius: calc(var(--rounded-corner) + 0.5rem);
background-color: var(--nav-bg); background-color: var(--nav-bg);
padding: 0.5rem; padding: 0.5rem;

138
sass/_variables.scss
View File

@ -1,47 +1,48 @@
@mixin theme-variables($theme) { @mixin theme-variables($theme) {
@if $theme =="dark" { @if $theme == "dark" {
--bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)); --bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
--fg-color: rgb(255, 255, 255); --fg-color: rgb(255 255 255);
--fg-muted-1: rgba(255, 255, 255, 0.05); --fg-muted-1: rgb(255 255 255 / 0.05);
--fg-muted-2: rgba(255, 255, 255, 0.1); --fg-muted-2: rgb(255 255 255 / 0.1);
--fg-muted-3: rgba(255, 255, 255, 0.2); --fg-muted-3: rgb(255 255 255 / 0.2);
--fg-muted-4: rgba(255, 255, 255, 0.5); --fg-muted-4: rgb(255 255 255 / 0.5);
--fg-muted-5: rgba(255, 255, 255, 0.6); --fg-muted-5: rgb(255 255 255 / 0.6);
--nav-bg: rgba(25, 25, 25, 0.7); --nav-bg: rgb(25 25 25 / 0.7);
--blue-bg: rgba(153, 193, 241, 0.1); --blue-bg: rgb(153 193 241 / 0.1);
--blue-fg: rgb(153, 193, 241); --blue-fg: rgb(153 193 241);
--green-bg: rgba(143, 240, 164, 0.1); --green-bg: rgb(143 240 164 / 0.1);
--green-fg: rgb(143, 240, 164); --green-fg: rgb(143 240 164);
--purple-bg: rgba(220, 138, 221, 0.1); --purple-bg: rgb(220 138 221 / 0.1);
--purple-fg: rgb(220, 138, 221); --purple-fg: rgb(220 138 221);
--red-bg: rgba(226, 97, 81, 0.1); --red-bg: rgb(226 97 81 / 0.1);
--red-fg: rgb(246, 97, 81); --red-fg: rgb(246 97 81);
--yellow-bg: rgba(248, 228, 92, 0.1); --yellow-bg: rgb(248 228 92 / 0.1);
--yellow-fg: rgb(248, 228, 92); --yellow-fg: rgb(248 228 92);
--star-featured: rgba(248, 228, 92, 0.05); --star-featured: rgb(248 228 92 / 0.05);
color-scheme: dark; color-scheme: dark;
} } @else {
--bg-color: linear-gradient(
@else { rgb(255 255 255 / 0.8),
--bg-color: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)); rgb(255 255 255 / 0.8)
--fg-color: rgba(0, 0, 0, 0.8); );
--fg-muted-1: rgba(0, 0, 0, 0.05); --fg-color: rgb(0 0 0 / 0.8);
--fg-muted-2: rgba(0, 0, 0, 0.1); --fg-muted-1: rgb(0 0 0 / 0.05);
--fg-muted-3: rgba(0, 0, 0, 0.2); --fg-muted-2: rgb(0 0 0 / 0.1);
--fg-muted-4: rgba(0, 0, 0, 0.5); --fg-muted-3: rgb(0 0 0 / 0.2);
--fg-muted-5: rgba(0, 0, 0, 0.6); --fg-muted-4: rgb(0 0 0 / 0.5);
--nav-bg: rgba(242, 242, 242, 0.7); --fg-muted-5: rgb(0 0 0 / 0.6);
--blue-bg: rgba(53, 132, 228, 0.1); --nav-bg: rgb(242 242 242 / 0.7);
--blue-fg: rgb(53, 132, 228); --blue-bg: rgb(53 132 228 / 0.1);
--green-bg: rgba(38, 162, 105, 0.1); --blue-fg: rgb(53 132 228);
--green-fg: rgb(38, 162, 105); --green-bg: rgb(38 162 105 / 0.1);
--purple-bg: rgba(145, 65, 172, 0.1); --green-fg: rgb(38 162 105);
--purple-fg: rgb(145, 65, 172); --purple-bg: rgb(145 65 172 / 0.1);
--red-bg: rgba(224, 27, 36, 0.1); --purple-fg: rgb(145 65 172);
--red-fg: rgb(224, 27, 36); --red-bg: rgb(224 27 36 / 0.1);
--yellow-bg: rgba(156, 110, 3, 0.1); --red-fg: rgb(224 27 36);
--yellow-fg: rgb(156, 110, 3); --yellow-bg: rgb(156 110 3 / 0.1);
--star-featured: rgba(156, 110, 3, 0.15); --yellow-fg: rgb(156 110 3);
--star-featured: rgb(156 110 3 / 0.15);
} }
} }
@ -52,32 +53,51 @@
--active: 0.9; --active: 0.9;
--blur: saturate(180%) blur(0.75rem); --blur: saturate(180%) blur(0.75rem);
--container-width: 720px; --container-width: 720px;
--edge-highlight: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.1); --edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
--rounded-corner-small: 0.5rem; --rounded-corner-small: 0.5rem;
--rounded-corner: 0.75rem; --rounded-corner: 0.75rem;
--shadow-raised: 0 0 0 0.0625rem rgba(0, 0, 0, 0.06), 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.14), 0 0.25rem 0.75rem 0.25rem rgba(0, 0, 0, 0.06); --shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06),
--shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.03), 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.07), 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.03); 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14),
0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03),
0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07),
0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
--transition-long: 0.8s; --transition-long: 0.8s;
--transition-longer: 0.4s; --transition-longer: 0.4s;
--transition: 0.2s; --transition: 0.2s;
// FONTS // FONTS
--font-system-ui: system-ui, sans-serif; --font-system-ui: system-ui, sans-serif;
--font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif; --font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria,
--font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif; serif;
--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif; --font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif; P052, serif;
--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif; --font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif; source-sans-pro, sans-serif;
--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic",
source-sans-pro, sans-serif;
--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
sans-serif;
--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova",
"Nimbus Sans", Arial, sans-serif;
--font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace; --font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace;
--font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; --font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro",
--font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif; Menlo, Consolas, "DejaVu Sans Mono", monospace;
--font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif; --font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
--font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif; "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L", "Georgia Pro", Georgia, serif; --font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, serif; Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri,
--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive; source-sans-pro, sans-serif;
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif",
"Sitka Small", serif;
--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
"URW Bookman L", "Georgia Pro", Georgia, serif;
--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L",
P052, Sylfaen, serif;
--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic,
casual, cursive;
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
} }
[data-theme="dark"] { [data-theme="dark"] {

22
templates/partials/head.html
View File

@ -3,9 +3,9 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="{{ config.description }}" /> <meta name="description" content="{{ config.description }}" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="{{ config.extra.primary_color | default(value='#9a9996') }}" /> <meta name="theme-color" content="{{ config.extra.primary_color | default(value='#9a9996' | safe) | safe }}" />
{%- if config.extra.primary_color_dark %} {%- if config.extra.primary_color_dark %}
<meta name="theme-color" content="{{ config.extra.primary_color_dark }}" media="(prefers-color-scheme:dark)" /> <meta name="theme-color" content="{{ config.extra.primary_color_dark | safe }}" media="(prefers-color-scheme:dark)" />
{%- endif %} {%- endif %}
<title>{% include "partials/title.html" %}</title> <title>{% include "partials/title.html" %}</title>
<link rel="canonical" href="{{ current_url | default(value='/') | safe }}" /> <link rel="canonical" href="{{ current_url | default(value='/') | safe }}" />
@ -40,23 +40,23 @@
<style type="text/css"> <style type="text/css">
:root { :root {
--primary-color: {{ config.extra.primary_color | default(value="#6f8396") }}; --primary-color: {{ config.extra.primary_color | default(value="#6f8396" | safe) | safe }};
--primary-color-alpha: {{ config.extra.primary_color_alpha | default(value="rgba(111, 131, 150, 0.2)") }}; --primary-color-alpha: {{ config.extra.primary_color_alpha | default(value="rgb(111 131 150 / 0.2)" | safe) | safe }};
--contrast-color: {% if config.extra.fix_contrast %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %}; --contrast-color: {% if config.extra.fix_contrast %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
} }
{%- if config.extra.primary_color_dark %} {%- if config.extra.primary_color_dark %}
[data-theme="dark"] { [data-theme="dark"] {
--primary-color: {{ config.extra.primary_color_dark }}; --primary-color: {{ config.extra.primary_color_dark | safe }};
--primary-color-alpha: {{ config.extra.primary_color_dark_alpha }}; --primary-color-alpha: {{ config.extra.primary_color_dark_alpha | safe }};
--contrast-color: {% if config.extra.fix_contrast_dark %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %}; --contrast-color: {% if config.extra.fix_contrast_dark %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { :root:not([data-theme="light"]) {
--primary-color: {{ config.extra.primary_color_dark }}; --primary-color: {{ config.extra.primary_color_dark | safe }};
--primary-color-alpha: {{ config.extra.primary_color_dark_alpha }}; --primary-color-alpha: {{ config.extra.primary_color_dark_alpha | safe }};
--contrast-color: {% if config.extra.fix_contrast_dark %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %}; --contrast-color: {% if config.extra.fix_contrast_dark %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
} }
} }
{%- endif %} {%- endif %}