diff --git a/static/css/annotations.css b/static/css/annotations.css index 5e4cfd5..a05baaa 100644 --- a/static/css/annotations.css +++ b/static/css/annotations.css @@ -30,12 +30,18 @@ mark.user-annotation:hover { filter: brightness(0.80); } [data-theme="dark"] mark.user-annotation.user-annotation--steel { background-color: rgba(112, 150, 184, 0.42); } [data-theme="dark"] mark.user-annotation.user-annotation--rose { background-color: rgba(200, 116, 116, 0.42); } +/* Cappuccino — dark warm bg, so highlights need dark-mode-level opacity */ +[data-theme="cappuccino"] mark.user-annotation.user-annotation--amber { background-color: rgba(245, 180, 70, 0.42); } +[data-theme="cappuccino"] mark.user-annotation.user-annotation--sage { background-color: rgba(130, 175, 140, 0.42); } +[data-theme="cappuccino"] mark.user-annotation.user-annotation--steel { background-color: rgba(140, 170, 200, 0.42); } +[data-theme="cappuccino"] mark.user-annotation.user-annotation--rose { background-color: rgba(220, 140, 140, 0.42); } + /* System dark mode fallback (for prefers-color-scheme without explicit data-theme) */ @media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) mark.user-annotation.user-annotation--amber { background-color: rgba(245, 158, 11, 0.40); } - :root:not([data-theme="light"]) mark.user-annotation.user-annotation--sage { background-color: rgba(107, 158, 120, 0.42); } - :root:not([data-theme="light"]) mark.user-annotation.user-annotation--steel { background-color: rgba(112, 150, 184, 0.42); } - :root:not([data-theme="light"]) mark.user-annotation.user-annotation--rose { background-color: rgba(200, 116, 116, 0.42); } + :root:not([data-theme]) mark.user-annotation.user-annotation--amber { background-color: rgba(245, 158, 11, 0.40); } + :root:not([data-theme]) mark.user-annotation.user-annotation--sage { background-color: rgba(107, 158, 120, 0.42); } + :root:not([data-theme]) mark.user-annotation.user-annotation--steel { background-color: rgba(112, 150, 184, 0.42); } + :root:not([data-theme]) mark.user-annotation.user-annotation--rose { background-color: rgba(200, 116, 116, 0.42); } } /* ============================================================ diff --git a/static/css/base.css b/static/css/base.css index eedb913..6790eb4 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -196,9 +196,42 @@ --hm-4: #d4d0c8; } +/* ============================================================ + CAPPUCCINO (warm milky-coffee — opt-in only, no system trigger) + ============================================================ */ + +[data-theme="cappuccino"] { + --bg: #553a28; + --bg-nav: #503626; + --nav-logo-fg: #ead0a0; + --bg-offset: #4a3324; + --text: #ead0a0; /* warm microfoam — golden cream */ + --text-muted: #d0b888; + --text-faint: #b09575; + --border: #7a5d44; + --border-muted: #6a4f38; + + --link: #ead0a0; + --link-underline: #b09575; + --link-hover: #f5e6c0; + --link-hover-underline: #f5e6c0; + --link-visited: #d0b888; + + --selection-bg: #ead0a0; + --selection-text: #3a2418; + + --bg-subtle: var(--bg-offset); + + --hm-0: #4a3324; + --hm-1: #6a4f38; + --hm-2: #8d6c4e; + --hm-3: #b09575; + --hm-4: #ead0a0; +} + /* System dark mode fallback */ @media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) { + :root:not([data-theme]) { --bg: #121212; --bg-nav: #181818; --nav-logo-fg: #d4d0c8; diff --git a/static/css/library.css b/static/css/library.css index f5b29bd..944836a 100644 --- a/static/css/library.css +++ b/static/css/library.css @@ -22,8 +22,14 @@ --library-intro-ink: #c8beac; } +[data-theme="cappuccino"] { + --library-accent: #d0b888; /* foam — matches text-muted */ + --library-accent-muted: #957a5a; + --library-intro-ink: #dcc296; +} + @media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) { + :root:not([data-theme]) { --library-accent: #b5a890; --library-accent-muted: #897f6e; --library-intro-ink: #c8beac; diff --git a/static/css/links.css b/static/css/links.css index 20828a0..b62cc6c 100644 --- a/static/css/links.css +++ b/static/css/links.css @@ -22,8 +22,14 @@ --links-intro-ink: #bcc3d6; } +[data-theme="cappuccino"] { + --links-accent: #c0c8e0; + --links-accent-muted: #8e95ad; + --links-intro-ink: #cdd4e8; +} + @media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) { + :root:not([data-theme]) { --links-accent: #a9b3cc; --links-accent-muted: #7d8499; --links-intro-ink: #bcc3d6; diff --git a/static/css/print.css b/static/css/print.css index 8e2b39e..9d230d3 100644 --- a/static/css/print.css +++ b/static/css/print.css @@ -10,7 +10,8 @@ reaching for hardcoded #fff/#000 again. ---------------------------------------------------------------- */ :root, - [data-theme="dark"] { + [data-theme="dark"], + [data-theme="cappuccino"] { --bg: #ffffff; --bg-offset: #f5f5f5; --bg-subtle: #f9f9f9; diff --git a/static/css/reading.css b/static/css/reading.css index 51ae328..e0de556 100644 --- a/static/css/reading.css +++ b/static/css/reading.css @@ -35,8 +35,13 @@ body.reading-mode { background-color: var(--bg); } +[data-theme="cappuccino"] body.reading-mode { + --bg: #634432; + background-color: var(--bg); +} + @media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) body.reading-mode { + :root:not([data-theme]) body.reading-mode { --bg: #1c1917; background-color: var(--bg); } diff --git a/static/css/typography.css b/static/css/typography.css index 35d76da..00e4395 100644 --- a/static/css/typography.css +++ b/static/css/typography.css @@ -328,8 +328,17 @@ sub { font-variant-position: sub; line-height: 1; } rgba(80, 110, 160, 0) 100% ); } +[data-theme="cappuccino"] #markdownBody mark:not(.user-annotation) { + background-image: linear-gradient( + 104deg, + rgba(245, 215, 130, 0) 0%, + rgba(245, 215, 130, 0.45) 2%, + rgba(230, 195, 110, 0.55) 98%, + rgba(230, 195, 110, 0) 100% + ); +} @media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) #markdownBody mark:not(.user-annotation) { + :root:not([data-theme]) #markdownBody mark:not(.user-annotation) { background-image: linear-gradient( 104deg, rgba(100, 130, 180, 0) 0%, diff --git a/static/js/settings.js b/static/js/settings.js index 5510d62..f7e9db2 100644 --- a/static/js/settings.js +++ b/static/js/settings.js @@ -90,8 +90,9 @@ ------------------------------------------------------------------ */ function handle(action) { - if (action === 'theme-light') setTheme('light'); - else if (action === 'theme-dark') setTheme('dark'); + if (action === 'theme-light') setTheme('light'); + else if (action === 'theme-dark') setTheme('dark'); + else if (action === 'theme-cappuccino') setTheme('cappuccino'); else if (action === 'text-smaller') shiftSize(-1); else if (action === 'text-larger') shiftSize(+1); else if (action === 'focus-mode') toggleDataAttr('focus-mode', 'data-focus-mode'); diff --git a/static/js/theme.js b/static/js/theme.js index b7037bb..161045b 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -14,7 +14,7 @@ /* Theme */ var storedTheme = safeGet('theme'); - if (storedTheme === 'dark' || storedTheme === 'light') { + if (storedTheme === 'dark' || storedTheme === 'light' || storedTheme === 'cappuccino') { document.documentElement.setAttribute('data-theme', storedTheme); } diff --git a/templates/partials/nav.html b/templates/partials/nav.html index 5c6eb99..01945a0 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -25,6 +25,7 @@
+
diff --git a/templates/score-reader.html b/templates/score-reader.html index c430930..df134e2 100644 --- a/templates/score-reader.html +++ b/templates/score-reader.html @@ -18,6 +18,7 @@
+