Merge pull request #66 from new-sankaku/claude/fix-dark-mode-scroll-bg-WcPf3

new-sankaku · web-flow · commit f54ba2311d75 · 2026-01-13T21:06:49.000+09:00
Fix white background showing on scroll in dark mode
diff --git a/css/common.css b/css/common.css
@@ -1,5 +1,9 @@
 @import url('root.css');
 
+html,body {
+ background-color: var(--color-base);
+}
+
 body {
  display: flex;
  flex-direction: column;
diff --git a/css/root.css b/css/root.css
@@ -130,7 +130,9 @@
 }
 
 :root {
-  
+  --color-base: #212121;
+  --background-color-A: #212121;
+
   --nav-height:                           calc(100vh - 96vh);
   --main-height:                          calc(100vh - 4vh);
   --left_area-height:                     calc(100vh - 5vh);
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark-mode">
 
 <head>
     <title>Manga Editor Desu! Pro Edition: The Premier Standalone Manga Editing Platform</title>
diff --git a/js/ui/util/mode-change.js b/js/ui/util/mode-change.js
@@ -140,8 +140,12 @@ function toggleMode() {
 const isDarkMode=document.body.classList.toggle('dark-mode');
 const logo=$('navbar-logo');
 
+document.documentElement.classList.remove('light-mode');
+document.documentElement.classList.add('dark-mode');
 document.body.classList.remove('light-mode');
 document.body.classList.add('dark-mode');
+document.documentElement.classList.remove('light-mode');
+document.documentElement.classList.add('dark-mode');
 localStorage.setItem('mode','dark-mode');
 logo.src='02_images_svg/Logo/black_mode_logo.webp';
 
@@ -157,7 +161,9 @@ $('mode-toggle').addEventListener('change',toggleMode);
 function initializeMode() {
 // const mode = localStorage.getItem('mode') || 'dark-mode';
 const mode='dark-mode';
+document.documentElement.classList.add(mode);
 document.body.classList.add(mode);
+document.documentElement.classList.add(mode);
 const logo=$('navbar-logo');
 if (mode==='dark-mode') {
 $('mode-toggle').checked=true;
