more theme fixes and font colours

Author: gcclinux

public/themes/dark-high-contrast.css

@@ -68,6 +68,7 @@
   --bg-modal: #000000;
   --bg-modal-overlay: rgba(0, 0, 0, 0.9);
   --color-text-primary: #ffffff;
+  --color-text-modal: #ffffff;
   --color-text-muted: #cccccc;
   --color-text-muted-dark: #aaaaaa;
   --bg-card: rgba(255, 255, 255, 0.1);

public/themes/default.css

@@ -68,6 +68,7 @@
   --bg-modal: #1e1e1e;
   --bg-modal-overlay: rgba(0, 0, 0, 0.5);
   --color-text-primary: white;
+  --color-text-modal: #ffffff; /* keep modal text light for dark modal background */
   --color-text-muted: #bdbdbd;
   --color-text-muted-dark: #9a9a9a;
   --bg-card: rgba(255, 255, 255, 0.02);
@@ -137,5 +138,7 @@
     --bg-root: #ffffff;
     --btn-standard-hover: #f9f9f9;
     --link-hover: #747bff;
+      /* Do NOT darken modal text in light mode; modal bg remains dark */
+      --color-text-modal: #ffffff;
   }
 }

public/themes/jade-green.css

@@ -68,6 +68,7 @@
   --bg-modal: #1a2e1a;
   --bg-modal-overlay: rgba(10, 21, 10, 0.7);
   --color-text-primary: #e8f8e8;
+  --color-text-modal: #e8f8e8;
   --color-text-muted: #a8c8a8;
   --color-text-muted-dark: #7a9a7a;
   --bg-card: rgba(74, 158, 74, 0.08);
@@ -137,5 +138,6 @@
     --bg-root: #f0f8f0;
     --btn-standard-hover: #e8f8e8;
     --link-hover: #6abe6a;
+      --color-text-modal: #e8f8e8; /* modal bg remains dark */
   }
 }

public/themes/ocean-blue.css

@@ -68,6 +68,7 @@
   --bg-modal: #0f1822;
   --bg-modal-overlay: rgba(10, 16, 21, 0.7);
   --color-text-primary: #e8f4f8;
+  --color-text-modal: #e8f4f8;
   --color-text-muted: #a8c5d1;
   --color-text-muted-dark: #7a9aaa;
   --bg-card: rgba(74, 144, 226, 0.08);
@@ -137,5 +138,6 @@
     --bg-root: #f0f8ff;
     --btn-standard-hover: #e8f4f8;
     --link-hover: #6ab0ff;
+      --color-text-modal: #e8f4f8; /* modal bg remains dark */
   }
 }

public/themes/sunset-orange.css

@@ -68,6 +68,7 @@
   --bg-modal: #2a1810;
   --bg-modal-overlay: rgba(26, 15, 8, 0.7);
   --color-text-primary: #ffe8d8;
+  --color-text-modal: #ffe8d8;
   --color-text-muted: #c9a890;
   --color-text-muted-dark: #a98870;
   --bg-card: rgba(255, 140, 66, 0.08);
@@ -137,5 +138,6 @@
     --bg-root: #fff8f0;
     --btn-standard-hover: #ffe8d8;
     --link-hover: #ffac62;
+      --color-text-modal: #ffe8d8; /* modal bg remains dark */
   }
 }

src/components/aboutModal.css

@@ -11,7 +11,7 @@
 
 .modal-content.about-modal {
   background-color: var(--bg-modal);
-  color: var(--color-text-primary);
+  color: var(--color-text-modal);
   padding: 20px;
   border-radius: 8px;
   width: 1500px;
@@ -24,6 +24,19 @@
   align-items: center;
 }
 
+/* Ensure all text inside the About modal stays readable */
+.about-modal, 
+.about-modal p,
+.about-modal li,
+.about-modal h1,
+.about-modal h2,
+.about-modal h3,
+.about-modal h4,
+.about-modal h5,
+.about-modal h6 {
+  color: var(--color-text-modal);
+}
+
 .about-hero-logo img {
   width: 64px;
   height: 64px;
@@ -46,12 +59,13 @@
 
 .badge {
   display: inline-block;
-  background: var(--color-primary-light);
-  color: var(--color-text-primary);
+  background: var(--bg-card);
+  color: var(--color-text-modal);
   padding: 4px 8px;
   margin-right: 6px;
   border-radius: 4px;
-  font-size: 12px
+  border: 1px solid var(--border-card);
+  font-size: 12px;
 }
 
 .about-grid {
@@ -98,7 +112,7 @@
 
 .btn.primary {
   background: var(--btn-primary-modal);
-  color: var(--color-text-primary);
+  color: var(--btn-primary-modal-text);
   padding: 8px 12px;
   border-radius: 6px;
   border: none;

src/components/featuresModal.css

@@ -4,7 +4,7 @@
 .features-subtitle { color:var(--color-text-muted); margin-top:4px }
 .features-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:16px }
 .feature-card { background: var(--bg-card); padding:12px; border:2px solid var(--border-card-light); border-radius:8px }
-.features-modal { padding:20px; width:1500px; max-width:95vw }
+.features-modal { padding:20px; width:1500px; max-width:95vw; background-color: var(--bg-modal); color: var(--color-text-modal); border-radius: 8px }
 
 .modal-overlay {
 	position: fixed;
@@ -15,3 +15,22 @@
 	align-items: center;
 	z-index: 1000001; /* above dropdown portals */
 }
+
+/* Ensure all text inside the Features modal stays readable */
+.features-modal,
+.features-modal p,
+.features-modal li,
+.features-modal h1,
+.features-modal h2,
+.features-modal h3,
+.features-modal h4,
+.features-modal h5,
+.features-modal h6 {
+	color: var(--color-text-modal);
+}
+
+/* Buttons inside modal */
+.features-modal .btn.primary {
+  background: var(--btn-primary-modal);
+  color: var(--btn-primary-modal-text);
+}

src/components/passwordModal.css

@@ -50,12 +50,12 @@
 
   .cancel-button {
     background-color: var(--btn-cancel);
-    color: var(--color-text-primary);
+    color: var(--btn-primary-modal-text);
     margin-right: 10px;
   }
 
   .submit-button {
     background-color: var(--btn-submit);
-    color: var(--color-text-primary);
+    color: var(--btn-primary-modal-text);
   }
 

src/index.css

@@ -11,6 +11,9 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  /* Fallbacks: ensure modal text is readable if a theme doesn't define it */
+  --color-text-modal: var(--color-text-primary, #ffffff);
 }
 
 a {

src/themeLoader.ts

@@ -20,7 +20,11 @@ export const loadTheme = (themeName: string, isCustom: boolean = false) => {
     // Load built-in theme
     const link = document.createElement('link');
     link.rel = 'stylesheet';
-    link.href = `/themes/${themeName}.css`;
+    // Build URL using Vite base so it works both locally and on GitHub Pages (/EasyEdit/webapp/).
+    // Avoid URL() constructor because BASE_URL may be relative (e.g. '/'), which is invalid as a base.
+    const base = (import.meta.env.BASE_URL || '/');
+    const normalizedBase = base.endsWith('/') ? base : `${base}/`;
+    link.href = `${normalizedBase}themes/${themeName}.css`;
     link.setAttribute('data-theme', themeName);
     document.head.appendChild(link);
   }