/* * CootDB colour-scheme palettes. * * Applied via data-palette="" on . * Pairs with data-theme="light"|"dark" for explicit brightness, or no * data-theme for system-automatic (OS preference) mode. * * Palettes: * catppuccin — Latte (light) / Mocha (dark) https://catppuccin.com * solarized — Solarized Light / Solarized Dark * nord — Nord Light / Nord Dark https://nordtheme.com * dracula — Dracula Light / Dracula (dark) https://draculatheme.com * gruvbox — Gruvbox Light / Gruvbox Dark https://github.com/morhetz/gruvbox * tokyo-night — Tokyo Night Day / Tokyo Night https://github.com/enkia/tokyo-night-vscode-theme */ /* ═══════════════════════════════════════════════════════════════════════════ CATPPUCCIN — Latte (light) / Mocha (dark) ═══════════════════════════════════════════════════════════════════════════ */ /* Latte — explicit light, or system default (overridden below for dark OS) */ html[data-palette="catppuccin"][data-theme="light"], html[data-palette="catppuccin"]:not([data-theme]) { --pico-background-color: #eff1f5; --pico-color: #4c4f69; --pico-primary: #1e66f5; --pico-primary-background: #1e66f5; --pico-primary-hover: #1659d8; --pico-primary-hover-background: #1659d8; --pico-primary-border: #1e66f5; --pico-primary-focus: rgba(30, 102, 245, .25); --pico-primary-inverse: #fff; --pico-muted-color: #6c6f85; --pico-muted-border-color: #bcc0cc; --pico-border-color: #bcc0cc; --pico-card-background-color: #e6e9ef; --pico-card-border-color: #ccd0da; --pico-form-element-background-color: #ccd0da; --pico-form-element-border-color: #bcc0cc; --pico-form-element-color: #4c4f69; --pico-form-element-placeholder-color: #9ca0b0; --pico-form-element-active-border-color: #1e66f5; --pico-form-element-focus-color: rgba(30, 102, 245, .25); --pico-secondary-background: #dce0e8; } /* Mocha — explicit dark */ html[data-palette="catppuccin"][data-theme="dark"] { --pico-background-color: #1e1e2e; --pico-color: #cdd6f4; --pico-primary: #89b4fa; --pico-primary-background: #89b4fa; --pico-primary-hover: #74a9f9; --pico-primary-hover-background: #74a9f9; --pico-primary-border: #89b4fa; --pico-primary-focus: rgba(137, 180, 250, .25); --pico-primary-inverse: #1e1e2e; --pico-muted-color: #a6adc8; --pico-muted-border-color: #45475a; --pico-border-color: #45475a; --pico-card-background-color: #181825; --pico-card-border-color: #313244; --pico-form-element-background-color: #313244; --pico-form-element-border-color: #45475a; --pico-form-element-color: #cdd6f4; --pico-form-element-placeholder-color: #6c7086; --pico-form-element-active-border-color: #89b4fa; --pico-form-element-focus-color: rgba(137, 180, 250, .25); --pico-secondary-background: #2a2b3d; } /* Mocha — system dark */ @media (prefers-color-scheme: dark) { html[data-palette="catppuccin"]:not([data-theme]) { --pico-background-color: #1e1e2e; --pico-color: #cdd6f4; --pico-primary: #89b4fa; --pico-primary-background: #89b4fa; --pico-primary-hover: #74a9f9; --pico-primary-hover-background: #74a9f9; --pico-primary-border: #89b4fa; --pico-primary-focus: rgba(137, 180, 250, .25); --pico-primary-inverse: #1e1e2e; --pico-muted-color: #a6adc8; --pico-muted-border-color: #45475a; --pico-border-color: #45475a; --pico-card-background-color: #181825; --pico-card-border-color: #313244; --pico-form-element-background-color: #313244; --pico-form-element-border-color: #45475a; --pico-form-element-color: #cdd6f4; --pico-form-element-placeholder-color: #6c7086; --pico-form-element-active-border-color: #89b4fa; --pico-form-element-focus-color: rgba(137, 180, 250, .25); --pico-secondary-background: #2a2b3d; } } /* ═══════════════════════════════════════════════════════════════════════════ SOLARIZED — Solarized Light / Solarized Dark ═══════════════════════════════════════════════════════════════════════════ */ /* Solarized Light */ html[data-palette="solarized"][data-theme="light"], html[data-palette="solarized"]:not([data-theme]) { --pico-background-color: #fdf6e3; --pico-color: #657b83; --pico-primary: #268bd2; --pico-primary-background: #268bd2; --pico-primary-hover: #1f78ba; --pico-primary-hover-background: #1f78ba; --pico-primary-border: #268bd2; --pico-primary-focus: rgba(38, 139, 210, .25); --pico-primary-inverse: #fdf6e3; --pico-muted-color: #93a1a1; --pico-muted-border-color: #d3cbba; --pico-border-color: #d3cbba; --pico-card-background-color: #eee8d5; --pico-card-border-color: #d7d0bc; --pico-form-element-background-color: #eee8d5; --pico-form-element-border-color: #d3cbba; --pico-form-element-color: #657b83; --pico-form-element-placeholder-color: #b0a99a; --pico-form-element-active-border-color: #268bd2; --pico-form-element-focus-color: rgba(38, 139, 210, .25); --pico-secondary-background: #e8e1cd; } /* Solarized Dark */ html[data-palette="solarized"][data-theme="dark"] { --pico-background-color: #002b36; --pico-color: #839496; --pico-primary: #268bd2; --pico-primary-background: #268bd2; --pico-primary-hover: #1f78ba; --pico-primary-hover-background: #1f78ba; --pico-primary-border: #268bd2; --pico-primary-focus: rgba(38, 139, 210, .25); --pico-primary-inverse: #fdf6e3; --pico-muted-color: #586e75; --pico-muted-border-color: #1d4f5b; --pico-border-color: #1d4f5b; --pico-card-background-color: #073642; --pico-card-border-color: #0d404d; --pico-form-element-background-color: #0a3d49; --pico-form-element-border-color: #1d4f5b; --pico-form-element-color: #839496; --pico-form-element-placeholder-color: #4a6670; --pico-form-element-active-border-color: #268bd2; --pico-form-element-focus-color: rgba(38, 139, 210, .25); --pico-secondary-background: #073642; } /* Solarized Dark — system dark */ @media (prefers-color-scheme: dark) { html[data-palette="solarized"]:not([data-theme]) { --pico-background-color: #002b36; --pico-color: #839496; --pico-primary: #268bd2; --pico-primary-background: #268bd2; --pico-primary-hover: #1f78ba; --pico-primary-hover-background: #1f78ba; --pico-primary-border: #268bd2; --pico-primary-focus: rgba(38, 139, 210, .25); --pico-primary-inverse: #fdf6e3; --pico-muted-color: #586e75; --pico-muted-border-color: #1d4f5b; --pico-border-color: #1d4f5b; --pico-card-background-color: #073642; --pico-card-border-color: #0d404d; --pico-form-element-background-color: #0a3d49; --pico-form-element-border-color: #1d4f5b; --pico-form-element-color: #839496; --pico-form-element-placeholder-color: #4a6670; --pico-form-element-active-border-color: #268bd2; --pico-form-element-focus-color: rgba(38, 139, 210, .25); --pico-secondary-background: #073642; } } /* ═══════════════════════════════════════════════════════════════════════════ NORD ═══════════════════════════════════════════════════════════════════════════ */ /* Nord Light */ html[data-palette="nord"][data-theme="light"], html[data-palette="nord"]:not([data-theme]) { --pico-background-color: #eceff4; --pico-color: #2e3440; --pico-primary: #5e81ac; --pico-primary-background: #5e81ac; --pico-primary-hover: #4c6d96; --pico-primary-hover-background: #4c6d96; --pico-primary-border: #5e81ac; --pico-primary-focus: rgba(94, 129, 172, .25); --pico-primary-inverse: #eceff4; --pico-muted-color: #4c566a; --pico-muted-border-color: #c8d0dd; --pico-border-color: #c8d0dd; --pico-card-background-color: #e5e9f0; --pico-card-border-color: #d8dee9; --pico-form-element-background-color: #d8dee9; --pico-form-element-border-color: #c8d0dd; --pico-form-element-color: #2e3440; --pico-form-element-placeholder-color: #7c8799; --pico-form-element-active-border-color: #5e81ac; --pico-form-element-focus-color: rgba(94, 129, 172, .25); --pico-secondary-background: #dce3ec; } /* Nord Dark */ html[data-palette="nord"][data-theme="dark"] { --pico-background-color: #2e3440; --pico-color: #eceff4; --pico-primary: #88c0d0; --pico-primary-background: #88c0d0; --pico-primary-hover: #7ab3c4; --pico-primary-hover-background: #7ab3c4; --pico-primary-border: #88c0d0; --pico-primary-focus: rgba(136, 192, 208, .25); --pico-primary-inverse: #2e3440; --pico-muted-color: #9099a8; --pico-muted-border-color: #4c566a; --pico-border-color: #4c566a; --pico-card-background-color: #242b38; --pico-card-border-color: #3b4252; --pico-form-element-background-color: #3b4252; --pico-form-element-border-color: #4c566a; --pico-form-element-color: #eceff4; --pico-form-element-placeholder-color: #7c869a; --pico-form-element-active-border-color: #88c0d0; --pico-form-element-focus-color: rgba(136, 192, 208, .25); --pico-secondary-background: #3d4758; } /* Nord Dark — system dark */ @media (prefers-color-scheme: dark) { html[data-palette="nord"]:not([data-theme]) { --pico-background-color: #2e3440; --pico-color: #eceff4; --pico-primary: #88c0d0; --pico-primary-background: #88c0d0; --pico-primary-hover: #7ab3c4; --pico-primary-hover-background: #7ab3c4; --pico-primary-border: #88c0d0; --pico-primary-focus: rgba(136, 192, 208, .25); --pico-primary-inverse: #2e3440; --pico-muted-color: #9099a8; --pico-muted-border-color: #4c566a; --pico-border-color: #4c566a; --pico-card-background-color: #242b38; --pico-card-border-color: #3b4252; --pico-form-element-background-color: #3b4252; --pico-form-element-border-color: #4c566a; --pico-form-element-color: #eceff4; --pico-form-element-placeholder-color: #7c869a; --pico-form-element-active-border-color: #88c0d0; --pico-form-element-focus-color: rgba(136, 192, 208, .25); --pico-secondary-background: #3d4758; } } /* ═══════════════════════════════════════════════════════════════════════════ DRACULA ═══════════════════════════════════════════════════════════════════════════ */ /* Dracula Light (unofficial warm-light variant) */ html[data-palette="dracula"][data-theme="light"], html[data-palette="dracula"]:not([data-theme]) { --pico-background-color: #f8f8ff; --pico-color: #282a36; --pico-primary: #7c5fdb; --pico-primary-background: #7c5fdb; --pico-primary-hover: #6857d6; --pico-primary-hover-background: #6857d6; --pico-primary-border: #7c5fdb; --pico-primary-focus: rgba(124, 95, 219, .25); --pico-primary-inverse: #f8f8ff; --pico-muted-color: #6272a4; --pico-muted-border-color: #cec8d8; --pico-border-color: #cec8d8; --pico-card-background-color: #ededf5; --pico-card-border-color: #e0dded; --pico-form-element-background-color: #e4e0ec; --pico-form-element-border-color: #cec8d8; --pico-form-element-color: #282a36; --pico-form-element-placeholder-color: #9490a0; --pico-form-element-active-border-color: #7c5fdb; --pico-form-element-focus-color: rgba(124, 95, 219, .25); --pico-secondary-background: #e8e4ef; } /* Dracula Dark */ html[data-palette="dracula"][data-theme="dark"] { --pico-background-color: #282a36; --pico-color: #f8f8f2; --pico-primary: #bd93f9; --pico-primary-background: #bd93f9; --pico-primary-hover: #a97ef6; --pico-primary-hover-background: #a97ef6; --pico-primary-border: #bd93f9; --pico-primary-focus: rgba(189, 147, 249, .25); --pico-primary-inverse: #282a36; --pico-muted-color: #6272a4; --pico-muted-border-color: #44475a; --pico-border-color: #44475a; --pico-card-background-color: #1e1f29; --pico-card-border-color: #383a4a; --pico-form-element-background-color: #383a4a; --pico-form-element-border-color: #44475a; --pico-form-element-color: #f8f8f2; --pico-form-element-placeholder-color: #555770; --pico-form-element-active-border-color: #bd93f9; --pico-form-element-focus-color: rgba(189, 147, 249, .25); --pico-secondary-background: #313344; } /* Dracula Dark — system dark */ @media (prefers-color-scheme: dark) { html[data-palette="dracula"]:not([data-theme]) { --pico-background-color: #282a36; --pico-color: #f8f8f2; --pico-primary: #bd93f9; --pico-primary-background: #bd93f9; --pico-primary-hover: #a97ef6; --pico-primary-hover-background: #a97ef6; --pico-primary-border: #bd93f9; --pico-primary-focus: rgba(189, 147, 249, .25); --pico-primary-inverse: #282a36; --pico-muted-color: #6272a4; --pico-muted-border-color: #44475a; --pico-border-color: #44475a; --pico-card-background-color: #1e1f29; --pico-card-border-color: #383a4a; --pico-form-element-background-color: #383a4a; --pico-form-element-border-color: #44475a; --pico-form-element-color: #f8f8f2; --pico-form-element-placeholder-color: #555770; --pico-form-element-active-border-color: #bd93f9; --pico-form-element-focus-color: rgba(189, 147, 249, .25); --pico-secondary-background: #313344; } } /* ═══════════════════════════════════════════════════════════════════════════ GRUVBOX ═══════════════════════════════════════════════════════════════════════════ */ /* Gruvbox Light */ html[data-palette="gruvbox"][data-theme="light"], html[data-palette="gruvbox"]:not([data-theme]) { --pico-background-color: #fbf1c7; --pico-color: #3c3836; --pico-primary: #458588; --pico-primary-background: #458588; --pico-primary-hover: #39717a; --pico-primary-hover-background: #39717a; --pico-primary-border: #458588; --pico-primary-focus: rgba(69, 133, 136, .25); --pico-primary-inverse: #fbf1c7; --pico-muted-color: #7c6f64; --pico-muted-border-color: #d5c4a1; --pico-border-color: #d5c4a1; --pico-card-background-color: #f2e5bc; --pico-card-border-color: #ebdbb2; --pico-form-element-background-color: #ebdbb2; --pico-form-element-border-color: #d5c4a1; --pico-form-element-color: #3c3836; --pico-form-element-placeholder-color: #a89984; --pico-form-element-active-border-color: #458588; --pico-form-element-focus-color: rgba(69, 133, 136, .25); --pico-secondary-background: #ece2b2; } /* Gruvbox Dark */ html[data-palette="gruvbox"][data-theme="dark"] { --pico-background-color: #282828; --pico-color: #ebdbb2; --pico-primary: #83a598; --pico-primary-background: #83a598; --pico-primary-hover: #72958a; --pico-primary-hover-background: #72958a; --pico-primary-border: #83a598; --pico-primary-focus: rgba(131, 165, 152, .25); --pico-primary-inverse: #282828; --pico-muted-color: #928374; --pico-muted-border-color: #504945; --pico-border-color: #504945; --pico-card-background-color: #1d2021; --pico-card-border-color: #3c3836; --pico-form-element-background-color: #32302f; --pico-form-element-border-color: #504945; --pico-form-element-color: #ebdbb2; --pico-form-element-placeholder-color: #7c6f64; --pico-form-element-active-border-color: #83a598; --pico-form-element-focus-color: rgba(131, 165, 152, .25); --pico-secondary-background: #3a3836; } /* Gruvbox Dark — system dark */ @media (prefers-color-scheme: dark) { html[data-palette="gruvbox"]:not([data-theme]) { --pico-background-color: #282828; --pico-color: #ebdbb2; --pico-primary: #83a598; --pico-primary-background: #83a598; --pico-primary-hover: #72958a; --pico-primary-hover-background: #72958a; --pico-primary-border: #83a598; --pico-primary-focus: rgba(131, 165, 152, .25); --pico-primary-inverse: #282828; --pico-muted-color: #928374; --pico-muted-border-color: #504945; --pico-border-color: #504945; --pico-card-background-color: #1d2021; --pico-card-border-color: #3c3836; --pico-form-element-background-color: #32302f; --pico-form-element-border-color: #504945; --pico-form-element-color: #ebdbb2; --pico-form-element-placeholder-color: #7c6f64; --pico-form-element-active-border-color: #83a598; --pico-form-element-focus-color: rgba(131, 165, 152, .25); --pico-secondary-background: #3a3836; } } /* ═══════════════════════════════════════════════════════════════════════════ TOKYO NIGHT — Day (light) / Night (dark) https://github.com/enkia/tokyo-night-vscode-theme ═══════════════════════════════════════════════════════════════════════════ */ /* Tokyo Night Day — explicit light, or system default */ html[data-palette="tokyo-night"][data-theme="light"], html[data-palette="tokyo-night"]:not([data-theme]) { --pico-background-color: #e1e2e7; --pico-color: #3760bf; --pico-primary: #2e7de9; --pico-primary-background: #2e7de9; --pico-primary-hover: #2370d8; --pico-primary-hover-background: #2370d8; --pico-primary-border: #2e7de9; --pico-primary-focus: rgba(46, 125, 233, .25); --pico-primary-inverse: #e1e2e7; --pico-muted-color: #848cb5; --pico-muted-border-color: #b4b5c6; --pico-border-color: #b4b5c6; --pico-card-background-color: #d5d6db; --pico-card-border-color: #c4c8da; --pico-form-element-background-color: #c4c8da; --pico-form-element-border-color: #b4b5c6; --pico-form-element-color: #3760bf; --pico-form-element-placeholder-color: #848cb5; --pico-form-element-active-border-color: #2e7de9; --pico-form-element-focus-color: rgba(46, 125, 233, .25); --pico-secondary-background: #d0d5e3; } /* Tokyo Night — explicit dark */ html[data-palette="tokyo-night"][data-theme="dark"] { --pico-background-color: #1a1b26; --pico-color: #c0caf5; --pico-primary: #7aa2f7; --pico-primary-background: #7aa2f7; --pico-primary-hover: #6a92e7; --pico-primary-hover-background: #6a92e7; --pico-primary-border: #7aa2f7; --pico-primary-focus: rgba(122, 162, 247, .25); --pico-primary-inverse: #1a1b26; --pico-muted-color: #565f89; --pico-muted-border-color: #292e42; --pico-border-color: #292e42; --pico-card-background-color: #16161e; --pico-card-border-color: #292e42; --pico-form-element-background-color: #1f2335; --pico-form-element-border-color: #292e42; --pico-form-element-color: #c0caf5; --pico-form-element-placeholder-color: #565f89; --pico-form-element-active-border-color: #7aa2f7; --pico-form-element-focus-color: rgba(122, 162, 247, .25); --pico-secondary-background: #1f2335; } /* Tokyo Night — system dark */ @media (prefers-color-scheme: dark) { html[data-palette="tokyo-night"]:not([data-theme]) { --pico-background-color: #1a1b26; --pico-color: #c0caf5; --pico-primary: #7aa2f7; --pico-primary-background: #7aa2f7; --pico-primary-hover: #6a92e7; --pico-primary-hover-background: #6a92e7; --pico-primary-border: #7aa2f7; --pico-primary-focus: rgba(122, 162, 247, .25); --pico-primary-inverse: #1a1b26; --pico-muted-color: #565f89; --pico-muted-border-color: #292e42; --pico-border-color: #292e42; --pico-card-background-color: #16161e; --pico-card-border-color: #292e42; --pico-form-element-background-color: #1f2335; --pico-form-element-border-color: #292e42; --pico-form-element-color: #c0caf5; --pico-form-element-placeholder-color: #565f89; --pico-form-element-active-border-color: #7aa2f7; --pico-form-element-focus-color: rgba(122, 162, 247, .25); --pico-secondary-background: #1f2335; } } /* ═══════════════════════════════════════════════════════════════════════════ HIGH CONTRAST Light: black on white, blue accent (21:1 / 11:1) Dark: white on black, yellow accent (21:1 / 19:1) Designed to meet WCAG AAA contrast ratios throughout. ═══════════════════════════════════════════════════════════════════════════ */ /* High Contrast Light */ html[data-palette="high-contrast"][data-theme="light"], html[data-palette="high-contrast"]:not([data-theme]) { --pico-background-color: #ffffff; --pico-color: #000000; --pico-primary: #0000cc; --pico-primary-background: #0000cc; --pico-primary-hover: #000099; --pico-primary-hover-background: #000099; --pico-primary-border: #000000; --pico-primary-focus: rgba(0, 0, 204, .5); --pico-primary-inverse: #ffffff; --pico-muted-color: #595959; --pico-muted-border-color: #767676; --pico-border-color: #000000; --pico-card-background-color: #f5f5f5; --pico-card-border-color: #000000; --pico-form-element-background-color: #ffffff; --pico-form-element-border-color: #000000; --pico-form-element-color: #000000; --pico-form-element-placeholder-color: #595959; --pico-form-element-active-border-color: #0000cc; --pico-form-element-focus-color: rgba(0, 0, 204, .5); --pico-secondary-background: #e8e8e8; --coot-row-alt-bg: #efefef; --coot-hover-bg: #dcdcff; --coot-selected-bg: #0000cc; --coot-selected-color:#ffffff; --coot-shadow: 0 0 0 2px #000000; } /* High Contrast Light — override hardcoded toolbar button colours */ html[data-palette="high-contrast"][data-theme="light"] #clear-btn, html[data-palette="high-contrast"]:not([data-theme]) #clear-btn, html[data-palette="high-contrast"][data-theme="light"] #random-btn, html[data-palette="high-contrast"]:not([data-theme]) #random-btn, html[data-palette="high-contrast"][data-theme="light"] #share-btn, html[data-palette="high-contrast"]:not([data-theme]) #share-btn { background: #000000; border-color: #000000; color: #ffffff; } html[data-palette="high-contrast"][data-theme="light"] #clear-btn:hover, html[data-palette="high-contrast"]:not([data-theme]) #clear-btn:hover, html[data-palette="high-contrast"][data-theme="light"] #random-btn:hover, html[data-palette="high-contrast"]:not([data-theme]) #random-btn:hover, html[data-palette="high-contrast"][data-theme="light"] #share-btn:hover, html[data-palette="high-contrast"]:not([data-theme]) #share-btn:hover { background: #333333; border-color: #333333; } /* High Contrast Dark */ html[data-palette="high-contrast"][data-theme="dark"] { --pico-background-color: #000000; --pico-color: #ffffff; --pico-primary: #ffff00; --pico-primary-background: #ffff00; --pico-primary-hover: #e0e000; --pico-primary-hover-background: #e0e000; --pico-primary-border: #ffffff; --pico-primary-focus: rgba(255, 255, 0, .5); --pico-primary-inverse: #000000; --pico-muted-color: #c0c0c0; --pico-muted-border-color: #767676; --pico-border-color: #ffffff; --pico-card-background-color: #1a1a1a; --pico-card-border-color: #ffffff; --pico-form-element-background-color: #1a1a1a; --pico-form-element-border-color: #ffffff; --pico-form-element-color: #ffffff; --pico-form-element-placeholder-color: #c0c0c0; --pico-form-element-active-border-color: #ffff00; --pico-form-element-focus-color: rgba(255, 255, 0, .5); --pico-secondary-background: #1a1a00; --coot-row-alt-bg: rgba(255, 255, 255, 0.07); --coot-hover-bg: #2a2a00; --coot-selected-bg: #ffff00; --coot-selected-color:#000000; --coot-shadow: 0 0 0 2px #ffffff; } /* High Contrast Dark — system dark */ @media (prefers-color-scheme: dark) { html[data-palette="high-contrast"]:not([data-theme]) { --pico-background-color: #000000; --pico-color: #ffffff; --pico-primary: #ffff00; --pico-primary-background: #ffff00; --pico-primary-hover: #e0e000; --pico-primary-hover-background: #e0e000; --pico-primary-border: #ffffff; --pico-primary-focus: rgba(255, 255, 0, .5); --pico-primary-inverse: #000000; --pico-muted-color: #c0c0c0; --pico-muted-border-color: #767676; --pico-border-color: #ffffff; --pico-card-background-color: #1a1a1a; --pico-card-border-color: #ffffff; --pico-form-element-background-color: #1a1a1a; --pico-form-element-border-color: #ffffff; --pico-form-element-color: #ffffff; --pico-form-element-placeholder-color: #c0c0c0; --pico-form-element-active-border-color: #ffff00; --pico-form-element-focus-color: rgba(255, 255, 0, .5); --pico-secondary-background: #1a1a00; --coot-row-alt-bg: rgba(255, 255, 255, 0.07); --coot-hover-bg: #2a2a00; --coot-selected-bg: #ffff00; --coot-selected-color:#000000; --coot-shadow: 0 0 0 2px #ffffff; } } /* High Contrast Dark — override toolbar button colours */ html[data-palette="high-contrast"][data-theme="dark"] #clear-btn, html[data-palette="high-contrast"][data-theme="dark"] #random-btn, html[data-palette="high-contrast"][data-theme="dark"] #share-btn { background: #000000; border-color: #ffffff; color: #ffffff; } html[data-palette="high-contrast"][data-theme="dark"] #clear-btn:hover, html[data-palette="high-contrast"][data-theme="dark"] #random-btn:hover, html[data-palette="high-contrast"][data-theme="dark"] #share-btn:hover { background: #222222; } /* Stronger focus rings in High Contrast */ html[data-palette="high-contrast"] :focus-visible { outline: 4px solid var(--pico-primary) !important; outline-offset: 3px !important; }