@abreen/tada 1.15.12 → 1.16.0

package/src/appearance-picker/index.ts

@@ -0,0 +1,168 @@
+export type FontPreference = 'sans' | 'serif';
+export type ContrastPreference = 'standard' | 'high';
+
+const FONT_STORAGE_KEY = 'fontPreference';
+const CONTRAST_STORAGE_KEY = 'contrastPreference';
+
+function getStorage(window: Window): Storage | null {
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+function getStoredPreference<T extends string>(
+  storage: Storage | null,
+  key: string,
+  storedValue: T,
+  defaultValue: T,
+): T {
+  try {
+    return storage?.getItem(key) === storedValue ? storedValue : defaultValue;
+  } catch {
+    return defaultValue;
+  }
+}
+
+function saveStoredPreference<T extends string>(
+  storage: Storage | null,
+  key: string,
+  preference: T,
+  storedValue: T,
+): void {
+  try {
+    if (preference === storedValue) {
+      storage?.setItem(key, preference);
+    } else {
+      storage?.removeItem(key);
+    }
+  } catch {
+    // Storage can be unavailable in privacy-restricted contexts.
+  }
+}
+
+export function getFontPreference(storage: Storage | null): FontPreference {
+  return getStoredPreference(storage, FONT_STORAGE_KEY, 'serif', 'sans');
+}
+
+export function getContrastPreference(
+  storage: Storage | null,
+): ContrastPreference {
+  return getStoredPreference(storage, CONTRAST_STORAGE_KEY, 'high', 'standard');
+}
+
+export function saveFontPreference(
+  storage: Storage | null,
+  preference: FontPreference,
+): void {
+  saveStoredPreference(storage, FONT_STORAGE_KEY, preference, 'serif');
+}
+
+export function saveContrastPreference(
+  storage: Storage | null,
+  preference: ContrastPreference,
+): void {
+  saveStoredPreference(storage, CONTRAST_STORAGE_KEY, preference, 'high');
+}
+
+export function applyFontPreference(
+  document: Document,
+  preference: FontPreference,
+): void {
+  if (preference === 'serif') {
+    document.documentElement.dataset.fontPreference = preference;
+  } else {
+    delete document.documentElement.dataset.fontPreference;
+  }
+}
+
+export function applyContrastPreference(
+  document: Document,
+  preference: ContrastPreference,
+): void {
+  if (preference === 'high') {
+    document.documentElement.dataset.contrastPreference = preference;
+  } else {
+    delete document.documentElement.dataset.contrastPreference;
+  }
+}
+
+function syncControls(
+  document: Document,
+  selector: string,
+  preference: string,
+): void {
+  document.querySelectorAll<HTMLButtonElement>(selector).forEach(button => {
+    button.disabled = false;
+    button.setAttribute(
+      'aria-pressed',
+      String(
+        button.dataset.fontPreferenceValue === preference ||
+          button.dataset.contrastPreferenceValue === preference,
+      ),
+    );
+  });
+}
+
+function syncAppearance(
+  document: Document,
+  fontPreference: FontPreference,
+  contrastPreference: ContrastPreference,
+): void {
+  syncControls(document, '[data-font-preference-value]', fontPreference);
+  syncControls(
+    document,
+    '[data-contrast-preference-value]',
+    contrastPreference,
+  );
+}
+
+export default function mountAppearancePicker(window: Window): () => void {
+  const { document } = window;
+  const container = document.querySelector<HTMLElement>('.appearance-pickers');
+  if (!container) {
+    return () => {};
+  }
+
+  const buttons = Array.from(
+    container.querySelectorAll<HTMLButtonElement>('button'),
+  );
+  const storage = getStorage(window);
+  let fontPreference = getFontPreference(storage);
+  let contrastPreference = getContrastPreference(storage);
+
+  applyFontPreference(document, fontPreference);
+  applyContrastPreference(document, contrastPreference);
+  syncAppearance(document, fontPreference, contrastPreference);
+
+  const handleClick = (event: Event) => {
+    const button = event.currentTarget as HTMLButtonElement;
+    const fontValue = button.dataset.fontPreferenceValue;
+    const contrastValue = button.dataset.contrastPreferenceValue;
+
+    if (fontValue === 'sans' || fontValue === 'serif') {
+      fontPreference = fontValue;
+      saveFontPreference(storage, fontPreference);
+      applyFontPreference(document, fontPreference);
+    } else if (contrastValue === 'standard' || contrastValue === 'high') {
+      contrastPreference = contrastValue;
+      saveContrastPreference(storage, contrastPreference);
+      applyContrastPreference(document, contrastPreference);
+    } else {
+      return;
+    }
+
+    syncAppearance(document, fontPreference, contrastPreference);
+  };
+
+  for (const button of buttons) {
+    button.addEventListener('click', handleClick);
+  }
+
+  return () => {
+    for (const button of buttons) {
+      button.removeEventListener('click', handleClick);
+    }
+  };
+}

package/src/appearance-picker/style.scss

@@ -0,0 +1,119 @@
+@use '../mixins' as *;
+
+.appearance-pickers {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  margin: 2rem auto 1rem;
+}
+
+.preference-picker {
+  --preference-picker-option-width: 2.5rem;
+  --preference-picker-gap: 0.5rem;
+  --preference-picker-padding: 6px;
+
+  @include user-select(none);
+
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(2, var(--preference-picker-option-width));
+  gap: var(--preference-picker-gap);
+  width: fit-content;
+  padding: var(--preference-picker-padding);
+  background: var(--bg2-color);
+  border-radius: calc(var(--border-radius) + 4px);
+}
+
+.preference-picker::before {
+  position: absolute;
+  top: var(--preference-picker-padding);
+  bottom: var(--preference-picker-padding);
+  left: var(--preference-picker-padding);
+  width: var(--preference-picker-option-width);
+  content: '';
+  background: var(--bg-color);
+  border-radius: var(--border-radius);
+  box-shadow: 0 0 0 var(--control-border-width) var(--fg2-color);
+  transform: translateX(0);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform 0.2s ease;
+  }
+}
+
+:root[data-font-preference='serif'] .font-picker::before,
+:root[data-contrast-preference='high'] .contrast-picker::before {
+  transform: translateX(calc(100% + var(--preference-picker-gap)));
+}
+
+.preference-picker:has(
+    .preference-picker-option[aria-pressed='true']:is(:hover, :focus)
+  )::before {
+  background: var(--bg2-color);
+}
+
+.preference-picker:has(
+    .preference-picker-option[aria-pressed='true']:active:not(:disabled)
+  )::before {
+  background: var(--link-active-color);
+}
+
+.preference-picker-option {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--preference-picker-option-width);
+  height: 2rem;
+  padding: 0;
+  font-size: var(--font-size-smaller);
+  color: var(--fg2-color);
+  background: transparent;
+  border: 0;
+  border-radius: var(--border-radius);
+}
+
+.font-picker-option-sans {
+  font-family: var(--sans-font);
+  font-feature-settings: var(--sans-font-feature-settings);
+}
+
+.font-picker-option-serif {
+  // Avoid requesting the bundled serif face just to render the inactive
+  // preview on a default sans page.
+  font-family: var(--serif-preview-font);
+  font-feature-settings: var(--serif-font-feature-settings);
+}
+
+.material-symbol-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.material-symbol-icon-contrast-standard {
+  --material-symbol-icon: var(--icon-contrast-standard);
+}
+
+.material-symbol-icon-contrast-high {
+  --material-symbol-icon: var(--icon-contrast-high);
+}
+
+.preference-picker-option[aria-pressed='true'] {
+  color: var(--fg-color);
+  background: transparent;
+}
+
+.preference-picker-option[aria-pressed='true']:is(:hover, :focus) {
+  background: transparent;
+}
+
+.preference-picker-option[aria-pressed='true']:active:not(:disabled) {
+  background: transparent !important;
+}
+
+@media print {
+  .appearance-pickers {
+    display: none;
+  }
+}

package/src/code.scss

@@ -35,6 +35,7 @@ body.code {
   padding: 0 0.75em;
   margin-right: var(--gap);
   font-family: var(--mono-font);
+  font-feature-settings: var(--mono-font-feature-settings);
   color: var(--fg2-color);
   text-align: right;
   text-decoration: none;

package/src/header/_base.scss

@@ -56,15 +56,20 @@ header details summary::marker {
 }
 
 header summary::after {
+  flex: 0 0 24px;
   order: -1;
+  width: 24px;
   height: 24px;
   margin-right: 8px;
   margin-left: var(--gap);
-  content: var(--icon-chevron);
+  content: '';
+
+  @include contained-mask(var(--icon-header-menu));
 }
 
 header details[open] summary::after {
-  transform: rotate(90deg);
+  -webkit-mask-image: var(--icon-header-close);
+  mask-image: var(--icon-header-close);
 }
 
 header .content {
@@ -131,16 +136,35 @@ header .results-container {
 }
 
 header .search-controls {
+  position: relative;
   display: flex;
   align-items: center;
   height: var(--header-collapsed-height);
 
+  @media (width <= 400px) {
+    display: none;
+  }
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 7px;
+    z-index: 1;
+    width: 22px;
+    height: 22px;
+    pointer-events: none;
+    content: '';
+    transform: translateY(-50%);
+
+    @include contained-mask(var(--icon-search));
+  }
+
+  &:has(input:disabled)::before {
+    opacity: 0.4;
+  }
+
   input.search {
     width: 180px;
-
-    @media (width <= 400px) {
-      display: none;
-    }
   }
 }
 

package/src/header/index.ts

@@ -40,7 +40,7 @@ export default (window: Window) => {
       return;
     }
     const next = e.relatedTarget as Node | null;
-    if (!next || !details.contains(next)) {
+    if (next && !details.contains(next)) {
       close();
     }
   }

package/src/index.ts

@@ -1,5 +1,6 @@
 import './style.scss';
 
+import './material-symbols.scss';
 import './anchor/style.scss';
 import './code.scss';
 import './code/style.scss';
@@ -12,6 +13,7 @@ import './slides/style.scss';
 import './timezone/style.scss';
 import './toc/style.scss';
 import './trace/style.scss';
+import './appearance-picker/style.scss';
 import './navigate/style.scss';
 import './page-update/style.scss';
 

package/src/material-symbols.scss

@@ -0,0 +1,11 @@
+@use 'mixins' as *;
+
+.material-symbol-icon {
+  @include contained-mask(var(--material-symbol-icon));
+
+  display: block;
+}
+
+.material-symbol-icon-heading-anchor {
+  --material-symbol-icon: var(--icon-heading-anchor);
+}

package/src/navigate/lifecycle.ts

@@ -6,6 +6,7 @@ import mountCode from '../code';
 import mountTrace from '../trace';
 import mountPrint from '../print';
 import mountSlides from '../slides';
+import mountAppearancePicker from '../appearance-picker';
 import { scheduleTask } from '../util';
 
 const PER_PAGE_COMPONENTS: Record<
@@ -20,6 +21,7 @@ const PER_PAGE_COMPONENTS: Record<
   trace: mountTrace,
   slides: mountSlides,
   print: mountPrint,
+  appearancePicker: mountAppearancePicker,
 };
 
 let cleanups: (() => void)[] = [];

package/src/search/style.scss

@@ -2,7 +2,6 @@
 
 header {
   .search-controls {
-    display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     align-items: center;

package/src/slides/style.scss

@@ -94,6 +94,7 @@ body.is-presenting header,
 body.is-presenting .title-and-info,
 body.is-presenting nav.toc,
 body.is-presenting footer,
+body.is-presenting .appearance-pickers,
 body.is-presenting .slides-header,
 body.is-presenting .trace-toolbar {
   display: none;

package/src/style.scss

@@ -37,6 +37,32 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'Source Serif 4';
+  font-style: normal;
+  font-weight: 200 900;
+  src: url('source-serif-4/SourceSerif4-VariableFont_opsz,wght.woff2')
+    format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Source Serif 4';
+  font-style: italic;
+  font-weight: 200 900;
+  src: url('source-serif-4/SourceSerif4-Italic-VariableFont_opsz,wght.woff2')
+    format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Libertinus Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('libertinus-mono/LibertinusMono-Regular.woff2') format('woff2');
+  font-display: swap;
+}
+
 ::selection {
   color: var(--bg-color);
   background: var(--fg-color);
@@ -93,35 +119,14 @@ a.external:not(:has(.external-link-tail))::after {
   margin: 0;
 }
 
-.footnotes ol {
-  padding-left: 0;
-  list-style: none;
-}
-
 .footnotes li {
-  position: relative;
-  padding-left: 1.8em;
   margin-bottom: 8px;
 }
 
 a.footnote-ref {
   font-size: 0.8em;
-  font-weight: 600;
-  vertical-align: text-bottom;
-}
-
-.footnote-marker {
-  @include user-select(none);
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  font-weight: 500;
-}
-
-a.footnote-ref,
-.footnote-marker {
-  font-feature-settings: 'ss06'; // squared numbers
+  vertical-align: super;
+  border-bottom: none;
 }
 
 .footnote-item {
@@ -131,10 +136,7 @@ a.footnote-ref,
   }
 }
 
-a.footnote-ref {
-  @include user-select(none);
-}
-
+a.footnote-ref,
 .footnotes .footnote-backref {
   display: inline-block;
 
@@ -416,7 +418,7 @@ a.breadcrumb {
     vertical-align: middle;
     content: '';
 
-    @include contained-mask(var(--icon-breadcrumb));
+    @include contained-mask(var(--icon-parent));
   }
 }
 

package/src/toc/style.scss

@@ -17,6 +17,7 @@
 body.code .toc ol li:has(a) {
   font-family: var(--mono-font);
   font-size: var(--mono-font-size);
+  font-feature-settings: var(--mono-font-feature-settings);
 }
 
 body.code .toc ol a {
@@ -30,6 +31,7 @@ body.code .toc ol a {
   font-family: var(--mono-font);
   font-size: var(--font-size-small);
   font-style: italic;
+  font-feature-settings: var(--mono-font-feature-settings);
   text-align: center;
   content: 'On this page';
 }
@@ -144,7 +146,7 @@ body.code .toc ol a {
 }
 
 .toc ol li.alert-item.note a::before {
-  @include contained-mask(var(--icon-note));
+  @include contained-mask(var(--icon-info));
 }
 
 .toc ol li.label {

package/src/trace/style.scss

@@ -186,6 +186,7 @@
   height: auto;
   font-family: var(--mono-font, monospace);
   font-size: 15px;
+  font-feature-settings: var(--mono-font-feature-settings, normal);
 
   .trace-separator {
     stroke: var(--fg2-color);

package/templates/_appearance-picker.html

@@ -0,0 +1,18 @@
+<div class="appearance-pickers" data-pagefind-ignore>
+  <div class="preference-picker font-picker" role="group" aria-label="Font style">
+    <button type="button" class="preference-picker-option font-picker-option-sans" data-font-preference-value="sans" aria-label="Use sans-serif fonts" aria-pressed="true" disabled>
+      <span aria-hidden="true">Aa</span>
+    </button>
+    <button type="button" class="preference-picker-option font-picker-option-serif" data-font-preference-value="serif" aria-label="Use serif fonts" aria-pressed="false" disabled>
+      <span aria-hidden="true">Aa</span>
+    </button>
+  </div>
+  <div class="preference-picker contrast-picker" role="group" aria-label="Contrast">
+    <button type="button" class="preference-picker-option contrast-picker-option-standard" data-contrast-preference-value="standard" aria-label="Use standard contrast" aria-pressed="true" disabled>
+      <span class="material-symbol-icon material-symbol-icon-contrast-standard" aria-hidden="true"></span>
+    </button>
+    <button type="button" class="preference-picker-option contrast-picker-option-high" data-contrast-preference-value="high" aria-label="Use high contrast" aria-pressed="false" disabled>
+      <span class="material-symbol-icon material-symbol-icon-contrast-high" aria-hidden="true"></span>
+    </button>
+  </div>
+</div>

package/templates/_theme.scss

@@ -36,13 +36,25 @@
   --box-shadow: 0 2px 9px
     hsl(var(--tint-hue) calc(85% * var(--tint-amount)) 10% / 25%);
   --backdrop-filter: blur(10px);
-  --font:
+  --sans-font:
     'Inter', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto',
     'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol';
+  --sans-mono-font: 'Google Sans Code', 'Consolas', 'Courier', monospace;
+  --serif-font: 'Source Serif 4', 'Times New Roman', 'Times', serif;
+  --serif-preview-font: 'Times New Roman', 'Times', serif;
+  --serif-mono-font: 'Libertinus Mono', 'Courier New', 'Courier', monospace;
+  --sans-font-feature-settings:
+    'liga', 'calt', 'ss07', 'ss08', 'cv01', 'cv08', 'cv10';
+  --sans-mono-font-feature-settings: normal;
+  --serif-font-feature-settings: normal;
+  --serif-mono-font-feature-settings: normal;
+  --font: var(--sans-font);
   --heading-font: var(--font);
   --heading-line-height: 1.3;
-  --mono-font: 'Google Sans Code', 'Consolas', 'Courier', monospace;
+  --mono-font: var(--sans-mono-font);
+  --font-feature-settings: var(--sans-font-feature-settings);
+  --mono-font-feature-settings: var(--sans-mono-font-feature-settings);
   --font-size: 1rem;
   --font-size-smaller: 0.9375em;
   --font-size-small: 0.8125em;
@@ -55,19 +67,30 @@
 
   // SVG icons
   // Mask icons (color-agnostic, painted via background-color: currentColor)
-  --icon-external-link: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M6 18 L20 4 M10 4 H20 V14' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
-  --icon-anchor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 28'><path d='M11 4 L8 20 M17 4 L14 20 M5 9 H21 M3 15 H19' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
-  --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.8 4.2 Q12 2 13.2 4.2 L20.8 17.9 Q22 20 19.6 20 H4.4 Q2 20 3.2 17.9 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='black' stroke-width='2' stroke-linecap='square'/><line x1='12' y1='16' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='square'/></svg>");
-  --icon-note: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='1.5'/><line x1='12' y1='10' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='square'/><line x1='12' y1='7' x2='12' y2='7' stroke='black' stroke-width='2' stroke-linecap='square'/></svg>");
   --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M5 12.5 10 17 19 7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
-  --icon-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7' stroke='<%= iconColor %>' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/></svg>");
-  --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='<%= iconColor %>' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --icon-breadcrumb: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M3 7 H17 V22' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/><polyline points='11 16 17 22 23 16' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
-  --icon-tada: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 -960 960 960'><path d='m121-172 151-426q4-11 13.48-17.5 9.47-6.5 20.3-6.5 7.22 0 13.52 2.5T331-612l277 276q5 5.4 7.5 11.7 2.5 6.3 2.5 13.5 0 10.8-6.5 20.3T594-277L167-126q-11 4-20.53.97-9.54-3.04-16.47-9.97-6.93-6.93-9.97-16.47Q117-161 121-172Zm791-506q-8 8-17 8t-17-8l-17-17q-13.8-14-34.5-14T792-695L589-491q-7.36 7-17.18 7T555-491q-7-7-7-16.82t7-17.18l203-204q28.07-28 67.53-28Q865-757 894-729l18 18q7 7.09 7 16.55 0 9.45-7 16.45ZM418-797q7.36-7 17.18-7t16.82 7l17 17q27 28.53 27 67.77Q496-673 469-644l-17 17q-7.36 7-17.18 7T418-627q-7-7-7-16.82t7-17.18l17-17q14-13.79 14-33.5T435-745l-18-18q-7-7.09-7-16.55 0-9.45 8-17.45Zm119-50q7-7 16.82-7t17.18 7l51 51q29 29 29 68.47 0 39.46-29 67.53L521-559q-7.09 7-16.55 7-9.45 0-17.45-7t-8-17.18q0-10.18 8-17.82l101-101q14-13.6 14-34t-14-34l-51-50q-7-7.36-7-17.18t7-16.82Zm340 407q-7 7-16.82 7T843-440l-51-51q-13.6-14-34-14t-34 14l-68 68q-7.36 7-17.18 7T622-423q-7-7-7-16.82t7-17.18l68-68q29-27 68.5-27.5T826-525l51 51q7 7.36 7 17.18T877-440Z'/></svg>");
+  /* TADA_MATERIAL_SYMBOL_VARIABLES */
 
   color-scheme: light dark;
 }
 
+:root[data-font-preference='serif'] {
+  --font: var(--serif-font);
+  --mono-font: var(--serif-mono-font);
+  --font-feature-settings: var(--serif-font-feature-settings);
+  --mono-font-feature-settings: var(--serif-mono-font-feature-settings);
+}
+
+:root[data-contrast-preference='high'] {
+  --fg-color: hsl(0deg 0% 0%);
+  --fg-color-translucent: hsl(0deg 0% 0% / 33%);
+  --fg2-color: hsl(0deg 0% 30%);
+  --bg-color: hsl(0deg 0% 100%);
+  --bg-color-translucent: hsl(0deg 0% 100% / 66%);
+  --bg2-color: #f4f4f4;
+  --bg2-color-translucent: rgb(244 244 244 / 66%);
+  --box-shadow: 0 2px 9px hsl(0deg 0% 0% / 25%);
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --theme-color: <%= themeColorDark %>;
@@ -94,9 +117,16 @@
     --link-active-color: #fff;
     --warning-bg-color: hsl(36deg 77% 27%);
     --note-bg-color: hsl(209deg 90% 25%);
+  }
 
-    // SVG icons (dark overrides)
-    --icon-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7' stroke='<%= iconColorDark %>' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round'/></svg>");
-    --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='<%= iconColorDark %>' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  :root[data-contrast-preference='high'] {
+    --fg-color: hsl(0deg 0% 100%);
+    --fg-color-translucent: hsl(0deg 0% 100% / 33%);
+    --fg2-color: hsl(0deg 0% 70%);
+    --bg-color: hsl(0deg 0% 0%);
+    --bg-color-translucent: hsl(0deg 0% 0% / 66%);
+    --bg2-color: hsl(0deg 0% 15%);
+    --bg2-color-translucent: hsl(0deg 0% 15% / 66%);
+    --box-shadow: 0 3px 8px hsl(0deg 0% 0% / 70%);
   }
 }