yum cappuccino yay!

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]) 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]) 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]) 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--rose  { background-color: rgba(200, 116, 116, 0.42); }
 }
 
 /* ============================================================

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;

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;

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;

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;

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);
     }

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%,

static/js/settings.js

@@ -92,6 +92,7 @@
     function handle(action) {
         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');

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);
     }
 

templates/partials/nav.html

@@ -25,6 +25,7 @@
                             <div class="settings-row">
                                 <button type="button" class="settings-btn" data-action="theme-light">Light</button>
                                 <button type="button" class="settings-btn" data-action="theme-dark">Dark</button>
+                                <button type="button" class="settings-btn" data-action="theme-cappuccino">Cappuccino</button>
                             </div>
                         </div>
                         <div class="settings-section">

templates/score-reader.html

@@ -18,6 +18,7 @@
                     <div class="settings-row">
                         <button class="settings-btn" data-action="theme-light">Light</button>
                         <button class="settings-btn" data-action="theme-dark">Dark</button>
+                        <button class="settings-btn" data-action="theme-cappuccino">Cappuccino</button>
                     </div>
                 </div>
             </div>