From 225c8718a522cde9681fd305b419a92d5efae18e Mon Sep 17 00:00:00 2001
From: nvi9 <42123156+nvi9@users.noreply.github.com>
Date: Mon, 19 Oct 2026 11:44:42 +0200
Subject: [PATCH] fix: respect explicit light theme

Guard system dark styles when the viewer explicitly uses LIGHT.
Add regression coverage for LIGHT, DARK, AUTOMATIC, and unset modes.
---
 src/themes/paper-and-ink.css | 508 ++++++++++++++++++-----------------
 tests/basic.test.ts          |  28 ++
 2 files changed, 284 insertions(+), 252 deletions(-)

diff --git a/src/themes/paper-and-ink.css b/src/themes/paper-and-ink.css
index 064ae43..4a30605 100644
--- a/src/themes/paper-and-ink.css
+++ b/src/themes/paper-and-ink.css
@@ -364,164 +364,166 @@ input[type="number"] {
     --editor-toolbar-highlight-image: var(--pi-icon-highlight);
 }
 @media (prefers-color-scheme: dark) {
-  :root {
-    --main-color: #f2eee8;
-    --toolbar-icon-bg-color: #f2eee8;
-    --toolbar-icon-hover-bg-color: #ffffff;
-    --body-bg-color: #1b1a18;
-    --toolbar-bg-color: #242220;
-    --toolbar-border-color: #3a3630;
-    --toolbar-border-bottom: 0;
-    --toolbar-box-shadow: 0 1px 0 rgb(0 0 0 / 35%);
-    --toolbarSidebar-box-shadow: inset -1px 0 0 rgb(249 247 244 / 10%), 0 1px 0 rgb(0 0 0 / 28%);
-    --toolbarSidebar-border-bottom: 1px solid #3a3630;
-
-    --separator-color: #4b463f;
-    --field-color: #f2eee8;
-    --field-bg-color: #26231f;
-    --field-border-color: #4c463e;
-
-    --button-hover-color: rgb(125 176 228 / 18%);
-    --toggled-btn-color: #f2eee8;
-    --toggled-btn-bg-color: rgb(125 176 228 / 28%);
-    --toggled-hover-active-btn-color: rgb(125 176 228 / 36%);
-    --toggled-hover-btn-outline: 1px solid rgb(125 176 228 / 46%);
-
-    --doorhanger-bg-color: #26231f;
-    --doorhanger-border-color: rgb(242 238 232 / 18%);
-    --doorhanger-hover-bg-color: rgb(125 176 228 / 20%);
-    --doorhanger-hover-color: #f2eee8;
-    --doorhanger-separator-color: #4b463f;
-    --dropdown-btn-bg-color: #2a2723;
-    --dropdown-btn-border: 1px solid #4c463e;
-
-    --focus-ring-color: #7db0e4;
-    --outline-color: #7db0e4;
-    --outline-around-color: #2b2824;
-
-    --dialog-button-border: 1px solid #4c463e;
-    --dialog-button-bg-color: #2a2723;
-    --dialog-button-hover-bg-color: rgb(125 176 228 / 26%);
-
-    --progressBar-color: #7db0e4;
-    --progressBar-bg-color: #2f3a46;
-    --progressBar-blend-color: #9ac2ea;
-
-    --thickness-bg: #1f1d1a;
-    --find-not-found-bg-color: #5a2f2a;
-
-    --editorFreeText-editing-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M10 3h4M10 21h4M12 3v18' fill='none' stroke='%23f2eee8' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M8.5 6.2c1.4-1.1 2.4-1.6 3.5-1.6M15.5 6.2c-1.4-1.1-2.4-1.6-3.5-1.6M8.5 17.8c1.4 1.1 2.4 1.6 3.5 1.6M15.5 17.8c-1.4 1.1-2.4 1.6-3.5 1.6' fill='none' stroke='%237db0e4' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 16, text;
-    --editorInk-editing-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M2 22l7.2-2.2L19 10l-5-5-9.8 9.8z' fill='%237db0e4'/%3E%3Cpath d='M14 5l5 5M2 22l7.2-2.2' fill='none' stroke='%23f2eee8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 16, pointer;
-    --editorHighlight-editing-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M4 16l8-8l8 8' fill='none' stroke='%23f2eee8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='3' y='16' width='18' height='4' rx='1.5' fill='%237db0e4' fill-opacity='.55'/%3E%3C/svg%3E") 12 12, text;
-    --editorFreeHighlight-editing-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M2 18c2.5-4 6-6.8 11-8.8l2.2 3.2C10.4 14.2 7 16.6 4.8 20z' fill='%237db0e4' fill-opacity='.6'/%3E%3Cpath d='M13 9.2l2.2 3.2M2 18c2.5-4 6-6.8 11-8.8' fill='none' stroke='%23f2eee8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 1 18, pointer;
-  }
-
-  #viewsManager {
-    --sidebar-bg-color: rgb(27 26 24 / 0.96);
-    --header-bg: rgb(36 34 32 / 0.96);
-    --text-color: #f2eee8;
-    --button-fg: #f2eee8;
-    --button-bg: rgb(249 247 244 / 10%);
-    --button-hover-bg: rgb(125 176 228 / 24%);
-    --button-hover-fg: #f2eee8;
-    --button-active-bg: rgb(125 176 228 / 32%);
-    --button-active-fg: #f2eee8;
-    --button-focus-outline-color: #7db0e4;
-    --button-focus-border-color: #f2eee8;
-    --status-actions-bg: rgb(249 247 244 / 10%);
-    --status-undo-bg: rgb(125 176 228 / 20%);
-    --status-waiting-bg: rgb(125 176 228 / 20%);
-    --status-warning-bg: #4f2f24;
-    --indicator-color: #7db0e4;
-    --indicator-warning-color: #f3a46f;
-    --header-shadow: 0 1px 4px rgb(0 0 0 / 35%);
-    --image-border-color: #4c463e;
-    --image-hover-border-color: #7db0e4;
-    --image-current-border-color: #7db0e4;
-    --image-current-focused-outline-color: #7db0e4;
-    --image-page-number-bg: #2a2723;
-    --image-page-number-fg: #f2eee8;
-    --image-current-page-number-bg: #7db0e4;
-    --image-current-page-number-fg: #101214;
-    --image-shadow: 0 1px 2px rgb(0 0 0 / 28%), 0 0 0 1px var(--image-border-color);
-  }
-
-  .sidebar {
-    --sidebar-bg-color: #1f1d1a;
-    --sidebar-border-color: rgb(242 238 232 / 20%);
-    --sidebar-box-shadow: 0 1px 3px rgb(0 0 0 / 35%), 0 6px 16px rgb(0 0 0 / 32%);
-    --resizer-hover-bg-color: #7db0e4;
-  }
-
-  .dialog {
-    --dialog-bg-color: #23201c;
-    --dialog-border-color: #4c463e;
-    --dialog-shadow: 0 8px 24px rgb(0 0 0 / 38%);
-    --text-primary-color: #f2eee8;
-    --text-secondary-color: #c9c1b8;
-    --separator-color: #4c463e;
-    --link-fg-color: #7db0e4;
-    --link-hover-fg-color: #9ac2ea;
-    --textarea-border-color: #4c463e;
-    --textarea-bg-color: #1f1d1a;
-    --textarea-fg-color: #f2eee8;
-    --input-text-bg-color: #1f1d1a;
-    --input-text-fg-color: #f2eee8;
-    --button-secondary-bg-color: #2a2723;
-    --button-secondary-hover-bg-color: #332f2a;
-    --button-secondary-active-bg-color: #3a352f;
-    --button-secondary-border-color: #4c463e;
-    --button-primary-bg-color: #7db0e4;
-    --button-primary-hover-bg-color: #9ac2ea;
-    --button-primary-active-bg-color: #b6d4f1;
-    --button-primary-fg-color: #101214;
-    --button-primary-border-color: #7db0e4;
-
-    --radio-bg-color: #2a2723;
-    --radio-checked-bg-color: #1f1d1a;
-    --radio-border-color: #6a635a;
-    --radio-checked-border-color: #7db0e4;
-  }
-
-  .colorPicker {
-    --hover-outline-color: #9ac2ea;
-    --selected-outline-color: #7db0e4;
-    --swatch-border-color: #4c463e;
-  }
-
-  .toggle-button {
-    --color-accent-primary: light-dark(#4a90d9, #7db0e4);
-    --color-accent-primary-hover: light-dark(#3f83cb, #9ac2ea);
-    --color-accent-primary-active: light-dark(#2f73b8, #b6d4f1);
-    --color-canvas: light-dark(#ffffff, #1f1d1a);
-    --border-color-interactive: light-dark(#cfcac3, #f2eee8);
-  }
-
-  .toggle-button[aria-pressed=true] {
-    --toggle-dot-background-color-on-pressed: #1f1d1a;
-  }
-
-  .messageBar {
-    --message-bar-close-button-color: #f2eee8;
-    --message-bar-close-button-color-hover: #ffffff;
-    --message-bar-close-button-hover-bg-color: rgb(125 176 228 / 22%);
-    --message-bar-close-button-active-bg-color: rgb(125 176 228 / 30%);
-    --message-bar-close-button-focus-bg-color: rgb(125 176 228 / 26%);
-  }
-
-  #editorUndoBar {
-    --text-primary-color: #f2eee8;
-    --message-bar-icon-color: #7db0e4;
-    --message-bar-bg-color: #273341;
-    --message-bar-border-color: #3a4f64;
-    --message-bar-fg-color: #f2eee8;
-    --undo-button-bg-color: #2a2723;
-    --undo-button-bg-color-hover: #332f2a;
-    --undo-button-bg-color-active: #3a352f;
-    --undo-button-border: 1px solid #4c463e;
-    --undo-button-fg-color: #f2eee8;
-    --undo-button-fg-color-hover: #ffffff;
-    --undo-button-fg-color-active: #ffffff;
+  :where(:root:not([style*="color-scheme: light"])) {
+    &:root {
+      --main-color: #f2eee8;
+      --toolbar-icon-bg-color: #f2eee8;
+      --toolbar-icon-hover-bg-color: #ffffff;
+      --body-bg-color: #1b1a18;
+      --toolbar-bg-color: #242220;
+      --toolbar-border-color: #3a3630;
+      --toolbar-border-bottom: 0;
+      --toolbar-box-shadow: 0 1px 0 rgb(0 0 0 / 35%);
+      --toolbarSidebar-box-shadow: inset -1px 0 0 rgb(249 247 244 / 10%), 0 1px 0 rgb(0 0 0 / 28%);
+      --toolbarSidebar-border-bottom: 1px solid #3a3630;
+
+      --separator-color: #4b463f;
+      --field-color: #f2eee8;
+      --field-bg-color: #26231f;
+      --field-border-color: #4c463e;
+
+      --button-hover-color: rgb(125 176 228 / 18%);
+      --toggled-btn-color: #f2eee8;
+      --toggled-btn-bg-color: rgb(125 176 228 / 28%);
+      --toggled-hover-active-btn-color: rgb(125 176 228 / 36%);
+      --toggled-hover-btn-outline: 1px solid rgb(125 176 228 / 46%);
+
+      --doorhanger-bg-color: #26231f;
+      --doorhanger-border-color: rgb(242 238 232 / 18%);
+      --doorhanger-hover-bg-color: rgb(125 176 228 / 20%);
+      --doorhanger-hover-color: #f2eee8;
+      --doorhanger-separator-color: #4b463f;
+      --dropdown-btn-bg-color: #2a2723;
+      --dropdown-btn-border: 1px solid #4c463e;
+
+      --focus-ring-color: #7db0e4;
+      --outline-color: #7db0e4;
+      --outline-around-color: #2b2824;
+
+      --dialog-button-border: 1px solid #4c463e;
+      --dialog-button-bg-color: #2a2723;
+      --dialog-button-hover-bg-color: rgb(125 176 228 / 26%);
+
+      --progressBar-color: #7db0e4;
+      --progressBar-bg-color: #2f3a46;
+      --progressBar-blend-color: #9ac2ea;
+
+      --thickness-bg: #1f1d1a;
+      --find-not-found-bg-color: #5a2f2a;
+
+      --editorFreeText-editing-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M10 3h4M10 21h4M12 3v18' fill='none' stroke='%23f2eee8' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M8.5 6.2c1.4-1.1 2.4-1.6 3.5-1.6M15.5 6.2c-1.4-1.1-2.4-1.6-3.5-1.6M8.5 17.8c1.4 1.1 2.4 1.6 3.5 1.6M15.5 17.8c-1.4 1.1-2.4 1.6-3.5 1.6' fill='none' stroke='%237db0e4' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 16, text;
+      --editorInk-editing-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M2 22l7.2-2.2L19 10l-5-5-9.8 9.8z' fill='%237db0e4'/%3E%3Cpath d='M14 5l5 5M2 22l7.2-2.2' fill='none' stroke='%23f2eee8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 16, pointer;
+      --editorHighlight-editing-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M4 16l8-8l8 8' fill='none' stroke='%23f2eee8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='3' y='16' width='18' height='4' rx='1.5' fill='%237db0e4' fill-opacity='.55'/%3E%3C/svg%3E") 12 12, text;
+      --editorFreeHighlight-editing-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M2 18c2.5-4 6-6.8 11-8.8l2.2 3.2C10.4 14.2 7 16.6 4.8 20z' fill='%237db0e4' fill-opacity='.6'/%3E%3Cpath d='M13 9.2l2.2 3.2M2 18c2.5-4 6-6.8 11-8.8' fill='none' stroke='%23f2eee8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 1 18, pointer;
+    }
+
+    #viewsManager {
+      --sidebar-bg-color: rgb(27 26 24 / 0.96);
+      --header-bg: rgb(36 34 32 / 0.96);
+      --text-color: #f2eee8;
+      --button-fg: #f2eee8;
+      --button-bg: rgb(249 247 244 / 10%);
+      --button-hover-bg: rgb(125 176 228 / 24%);
+      --button-hover-fg: #f2eee8;
+      --button-active-bg: rgb(125 176 228 / 32%);
+      --button-active-fg: #f2eee8;
+      --button-focus-outline-color: #7db0e4;
+      --button-focus-border-color: #f2eee8;
+      --status-actions-bg: rgb(249 247 244 / 10%);
+      --status-undo-bg: rgb(125 176 228 / 20%);
+      --status-waiting-bg: rgb(125 176 228 / 20%);
+      --status-warning-bg: #4f2f24;
+      --indicator-color: #7db0e4;
+      --indicator-warning-color: #f3a46f;
+      --header-shadow: 0 1px 4px rgb(0 0 0 / 35%);
+      --image-border-color: #4c463e;
+      --image-hover-border-color: #7db0e4;
+      --image-current-border-color: #7db0e4;
+      --image-current-focused-outline-color: #7db0e4;
+      --image-page-number-bg: #2a2723;
+      --image-page-number-fg: #f2eee8;
+      --image-current-page-number-bg: #7db0e4;
+      --image-current-page-number-fg: #101214;
+      --image-shadow: 0 1px 2px rgb(0 0 0 / 28%), 0 0 0 1px var(--image-border-color);
+    }
+
+    .sidebar {
+      --sidebar-bg-color: #1f1d1a;
+      --sidebar-border-color: rgb(242 238 232 / 20%);
+      --sidebar-box-shadow: 0 1px 3px rgb(0 0 0 / 35%), 0 6px 16px rgb(0 0 0 / 32%);
+      --resizer-hover-bg-color: #7db0e4;
+    }
+
+    .dialog {
+      --dialog-bg-color: #23201c;
+      --dialog-border-color: #4c463e;
+      --dialog-shadow: 0 8px 24px rgb(0 0 0 / 38%);
+      --text-primary-color: #f2eee8;
+      --text-secondary-color: #c9c1b8;
+      --separator-color: #4c463e;
+      --link-fg-color: #7db0e4;
+      --link-hover-fg-color: #9ac2ea;
+      --textarea-border-color: #4c463e;
+      --textarea-bg-color: #1f1d1a;
+      --textarea-fg-color: #f2eee8;
+      --input-text-bg-color: #1f1d1a;
+      --input-text-fg-color: #f2eee8;
+      --button-secondary-bg-color: #2a2723;
+      --button-secondary-hover-bg-color: #332f2a;
+      --button-secondary-active-bg-color: #3a352f;
+      --button-secondary-border-color: #4c463e;
+      --button-primary-bg-color: #7db0e4;
+      --button-primary-hover-bg-color: #9ac2ea;
+      --button-primary-active-bg-color: #b6d4f1;
+      --button-primary-fg-color: #101214;
+      --button-primary-border-color: #7db0e4;
+
+      --radio-bg-color: #2a2723;
+      --radio-checked-bg-color: #1f1d1a;
+      --radio-border-color: #6a635a;
+      --radio-checked-border-color: #7db0e4;
+    }
+
+    .colorPicker {
+      --hover-outline-color: #9ac2ea;
+      --selected-outline-color: #7db0e4;
+      --swatch-border-color: #4c463e;
+    }
+
+    .toggle-button {
+      --color-accent-primary: light-dark(#4a90d9, #7db0e4);
+      --color-accent-primary-hover: light-dark(#3f83cb, #9ac2ea);
+      --color-accent-primary-active: light-dark(#2f73b8, #b6d4f1);
+      --color-canvas: light-dark(#ffffff, #1f1d1a);
+      --border-color-interactive: light-dark(#cfcac3, #f2eee8);
+    }
+
+    .toggle-button[aria-pressed=true] {
+      --toggle-dot-background-color-on-pressed: #1f1d1a;
+    }
+
+    .messageBar {
+      --message-bar-close-button-color: #f2eee8;
+      --message-bar-close-button-color-hover: #ffffff;
+      --message-bar-close-button-hover-bg-color: rgb(125 176 228 / 22%);
+      --message-bar-close-button-active-bg-color: rgb(125 176 228 / 30%);
+      --message-bar-close-button-focus-bg-color: rgb(125 176 228 / 26%);
+    }
+
+    #editorUndoBar {
+      --text-primary-color: #f2eee8;
+      --message-bar-icon-color: #7db0e4;
+      --message-bar-bg-color: #273341;
+      --message-bar-border-color: #3a4f64;
+      --message-bar-fg-color: #f2eee8;
+      --undo-button-bg-color: #2a2723;
+      --undo-button-bg-color-hover: #332f2a;
+      --undo-button-bg-color-active: #3a352f;
+      --undo-button-border: 1px solid #4c463e;
+      --undo-button-fg-color: #f2eee8;
+      --undo-button-fg-color-hover: #ffffff;
+      --undo-button-fg-color-active: #ffffff;
+    }
   }
 }
 
@@ -775,100 +777,102 @@ input[type="number"] {
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
-    --main-color: #e6edf3;
-    --toolbar-icon-bg-color: #e6edf3;
-    --toolbar-icon-hover-bg-color: #ffffff;
-    --body-bg-color: #0d1117;
-    --toolbar-bg-color: #161b22;
-    --toolbar-border-color: #30363d;
-    --toolbar-border-bottom:0;
-    --toolbar-box-shadow: 0 1px 0 rgb(0 0 0 / 40%);
-    --toolbarSidebar-box-shadow: inset -1px 0 0 rgb(230 237 243 / 12%), 0 1px 0 rgb(0 0 0 / 30%);
-    --toolbarSidebar-border-bottom: 1px solid #30363d;
-
-    --separator-color: #3d444d;
-    --field-color: #e6edf3;
-    --field-bg-color: #21262d;
-    --field-border-color: #3d444d;
-
-    --doorhanger-bg-color: #1b222c;
-    --doorhanger-border-color: rgb(230 237 243 / 20%);
-    --doorhanger-separator-color: #3d444d;
-    --dropdown-btn-bg-color: #21262d;
-    --dropdown-btn-border: 1px solid #3d444d;
-
-    --outline-around-color: #21262d;
-    --dialog-button-border: 1px solid #3d444d;
-    --dialog-button-bg-color: #21262d;
-
-    --progressBar-bg-color: #27374a;
-    --thickness-bg: #161b22;
-  }
-
-  #viewsManager {
-    --sidebar-bg-color: rgb(13 17 23 / 0.96);
-    --header-bg: rgb(22 27 34 / 0.96);
-    --text-color: #e6edf3;
-    --button-fg: #e6edf3;
-    --button-bg: rgb(230 237 243 / 0.12);
-    --button-focus-border-color: #e6edf3;
-    --status-actions-bg: rgb(230 237 243 / 0.12);
-    --header-shadow: 0 1px 4px rgb(0 0 0 / 35%);
-    --image-border-color: #3d444d;
-    --image-page-number-bg: #21262d;
-    --image-page-number-fg: #e6edf3;
-  }
-
-  .sidebar {
-    --sidebar-bg-color: #161b22;
-    --sidebar-border-color: rgb(230 237 243 / 22%);
-    --sidebar-box-shadow: 0 1px 3px rgb(0 0 0 / 35%), 0 6px 16px rgb(0 0 0 / 32%);
-  }
-
-  .dialog {
-    --dialog-bg-color: #161b22;
-    --dialog-border-color: #3d444d;
-    --text-primary-color: #e6edf3;
-    --text-secondary-color: #9da7b3;
-    --separator-color: #3d444d;
-
-    --textarea-border-color: #3d444d;
-    --textarea-bg-color: #0d1117;
-    --textarea-fg-color: #e6edf3;
-    --input-text-bg-color: #0d1117;
-    --input-text-fg-color: #e6edf3;
-
-    --button-secondary-bg-color: #21262d;
-    --button-secondary-hover-bg-color: #2a313c;
-    --button-secondary-active-bg-color: #333b47;
-    --button-secondary-border-color: #3d444d;
-
-    --radio-bg-color: #21262d;
-    --radio-checked-bg-color: #0d1117;
-    --radio-border-color: #53606d;
-  }
-
-  .colorPicker {
-    --swatch-border-color: #3d444d;
-  }
-
-  .toggle-button {
-    --color-canvas: light-dark(#ffffff, #161b22);
-    --border-color-interactive: light-dark(#c6ccd2, #e6edf3);
-  }
-
-  .toggle-button[aria-pressed=true] {
-    --toggle-dot-background-color-on-pressed: #161b22;
-  }
-
-  #editorUndoBar {
-    --text-primary-color: #e6edf3;
-    --undo-button-bg-color: #21262d;
-    --undo-button-bg-color-hover: #2a313c;
-    --undo-button-bg-color-active: #333b47;
-    --undo-button-border: 1px solid #3d444d;
-    --undo-button-fg-color: #e6edf3;
+  :where(:root:not([style*="color-scheme: light"])) {
+    &:root {
+      --main-color: #e6edf3;
+      --toolbar-icon-bg-color: #e6edf3;
+      --toolbar-icon-hover-bg-color: #ffffff;
+      --body-bg-color: #0d1117;
+      --toolbar-bg-color: #161b22;
+      --toolbar-border-color: #30363d;
+      --toolbar-border-bottom:0;
+      --toolbar-box-shadow: 0 1px 0 rgb(0 0 0 / 40%);
+      --toolbarSidebar-box-shadow: inset -1px 0 0 rgb(230 237 243 / 12%), 0 1px 0 rgb(0 0 0 / 30%);
+      --toolbarSidebar-border-bottom: 1px solid #30363d;
+
+      --separator-color: #3d444d;
+      --field-color: #e6edf3;
+      --field-bg-color: #21262d;
+      --field-border-color: #3d444d;
+
+      --doorhanger-bg-color: #1b222c;
+      --doorhanger-border-color: rgb(230 237 243 / 20%);
+      --doorhanger-separator-color: #3d444d;
+      --dropdown-btn-bg-color: #21262d;
+      --dropdown-btn-border: 1px solid #3d444d;
+
+      --outline-around-color: #21262d;
+      --dialog-button-border: 1px solid #3d444d;
+      --dialog-button-bg-color: #21262d;
+
+      --progressBar-bg-color: #27374a;
+      --thickness-bg: #161b22;
+    }
+
+    #viewsManager {
+      --sidebar-bg-color: rgb(13 17 23 / 0.96);
+      --header-bg: rgb(22 27 34 / 0.96);
+      --text-color: #e6edf3;
+      --button-fg: #e6edf3;
+      --button-bg: rgb(230 237 243 / 0.12);
+      --button-focus-border-color: #e6edf3;
+      --status-actions-bg: rgb(230 237 243 / 0.12);
+      --header-shadow: 0 1px 4px rgb(0 0 0 / 35%);
+      --image-border-color: #3d444d;
+      --image-page-number-bg: #21262d;
+      --image-page-number-fg: #e6edf3;
+    }
+
+    .sidebar {
+      --sidebar-bg-color: #161b22;
+      --sidebar-border-color: rgb(230 237 243 / 22%);
+      --sidebar-box-shadow: 0 1px 3px rgb(0 0 0 / 35%), 0 6px 16px rgb(0 0 0 / 32%);
+    }
+
+    .dialog {
+      --dialog-bg-color: #161b22;
+      --dialog-border-color: #3d444d;
+      --text-primary-color: #e6edf3;
+      --text-secondary-color: #9da7b3;
+      --separator-color: #3d444d;
+
+      --textarea-border-color: #3d444d;
+      --textarea-bg-color: #0d1117;
+      --textarea-fg-color: #e6edf3;
+      --input-text-bg-color: #0d1117;
+      --input-text-fg-color: #e6edf3;
+
+      --button-secondary-bg-color: #21262d;
+      --button-secondary-hover-bg-color: #2a313c;
+      --button-secondary-active-bg-color: #333b47;
+      --button-secondary-border-color: #3d444d;
+
+      --radio-bg-color: #21262d;
+      --radio-checked-bg-color: #0d1117;
+      --radio-border-color: #53606d;
+    }
+
+    .colorPicker {
+      --swatch-border-color: #3d444d;
+    }
+
+    .toggle-button {
+      --color-canvas: light-dark(#ffffff, #161b22);
+      --border-color-interactive: light-dark(#c6ccd2, #e6edf3);
+    }
+
+    .toggle-button[aria-pressed=true] {
+      --toggle-dot-background-color-on-pressed: #161b22;
+    }
+
+    #editorUndoBar {
+      --text-primary-color: #e6edf3;
+      --undo-button-bg-color: #21262d;
+      --undo-button-bg-color-hover: #2a313c;
+      --undo-button-bg-color-active: #333b47;
+      --undo-button-border: 1px solid #3d444d;
+      --undo-button-fg-color: #e6edf3;
+    }
   }
 }
 
diff --git a/tests/basic.test.ts b/tests/basic.test.ts
index c5d6917..52cb65b 100644
--- a/tests/basic.test.ts
+++ b/tests/basic.test.ts
@@ -53,6 +53,34 @@ describe('Basic tests', async () => {
     expect(getComputedStyle(getViewerElement()!).getPropertyValue('--body-bg-color')).toMatch('#0d1117')
   })
 
+  it('should keep LIGHT fixed while automatic mode follows the system theme', async () => {
+    await mountViewer('<pdfjs-viewer-element viewer-css-theme="LIGHT"></pdfjs-viewer-element>')
+    const viewer = document.body.querySelector('pdfjs-viewer-element')!
+    const doc = getIframe().contentDocument!
+    const themeSheet = Array.from(doc.styleSheets).find(sheet => sheet.href?.endsWith('/paper-and-ink.css'))!
+    const darkRules = Array.from(themeSheet.cssRules).filter(
+      (rule): rule is CSSMediaRule => rule instanceof getIframe().contentWindow.CSSMediaRule
+        && rule.conditionText === '(prefers-color-scheme: dark)'
+    )
+    expect(darkRules).toHaveLength(2)
+    const colors = () => [
+      getComputedStyle(doc.documentElement).getPropertyValue('--body-bg-color').trim(),
+      getComputedStyle(doc.querySelector('#viewsManager')!).getPropertyValue('--text-color').trim()
+    ]
+    for (const systemDark of [false, true, false, true]) {
+      // Toggle matching of the system dark rules without depending on the host's theme.
+      darkRules.forEach(rule => { rule.media.mediaText = systemDark ? 'all' : 'not all' })
+      viewer.setAttribute('viewer-css-theme', 'LIGHT')
+      expect(colors()).toEqual(['#f1f3f5', '#1f2328'])
+      viewer.setAttribute('viewer-css-theme', 'DARK')
+      expect(colors()).toEqual(['#0d1117', '#e6edf3'])
+      viewer.setAttribute('viewer-css-theme', 'AUTOMATIC')
+      expect(colors()).toEqual(systemDark ? ['#0d1117', '#e6edf3'] : ['#f1f3f5', '#1f2328'])
+      viewer.removeAttribute('viewer-css-theme')
+      expect(colors()).toEqual(systemDark ? ['#0d1117', '#e6edf3'] : ['#f1f3f5', '#1f2328'])
+    }
+  })
+
   it('should hide the download button', async () => {
     document.body.innerHTML = `
       <pdfjs-viewer-element