From 88537769f6b14fbbf989604b6c35b42257ae1c24 Mon Sep 17 00:00:00 2001
From: Carlos Bonadeo <carlosbonadeo@gmail.com>
Date: Sun, 22 Feb 2026 05:45:19 +0000
Subject: [PATCH] style: Phase 1 - Simple light dark themes (#1006)

## Summary

* **What is the goal of this PR?** (e.g., Implements the new feature for
file uploading.)

Implement automatic dark theme on server files.

Instead of a big change proposed in
https://github.com/crosspoint-reader/crosspoint-reader/pull/837, this PR
introduces a simple implementation of light/dark themes.

* **What changes are included?**

- Choose `#6e9a82` as accent color (taken from
![logo](https://avatars.githubusercontent.com/u/254441081?s=48&v=4))
- Implement a very basic media query for dark themes (`@media
(prefers-color-scheme: dark)`)
- Update style using CSS variables

## Additional Context

* Add any other information that might be helpful for the reviewer
(e.g., performance implications, potential risks,
  specific areas to focus on).

We can think of it as a incremental enhancement, this is the first phase
of a series of PRs (hopefully).

Next steps/Phases:
1. Light/Dark themes (this PR)
2. Load external CSS file to avoid duplication
3. HTML enhancement (for example, use dialog element instead of divs)
4. Use SVG instead of emojis
5. Use Vite + Typescript to improve DX and have better minification

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**< YES | PARTIALLY | NO
>**_

---------

Co-authored-by: carlosbonadeo <carlosbonadeo@skyscanner.net>
---
 src/network/html/FilesPage.html    | 103 ++++++++++++++++-------------
 src/network/html/HomePage.html     |  58 +++++++++++-----
 src/network/html/SettingsPage.html |  66 ++++++++++++------
 3 files changed, 146 insertions(+), 81 deletions(-)

diff --git a/src/network/html/FilesPage.html b/src/network/html/FilesPage.html
index ff114969..628e20c7 100644
--- a/src/network/html/FilesPage.html
+++ b/src/network/html/FilesPage.html
@@ -5,25 +5,47 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>CrossPoint Reader - Files</title>
   <style>
+    :root {
+      --font-color: #333;
+      --bg: #f5f5f5;
+      --title-color: #2c3e50;
+      --card-bg: #FFF;
+      --label-color: #7f8c8d;
+      --border-color: #eee;
+      --accent-color: rgb(110, 154, 130);
+      --accent-color-10: rgba(110, 154, 130, 0.1);
+      --accent-hover-color: #5a8c73;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --font-color: #f5f5f5;
+        --bg: #333;
+        --title-color: #ecf0f1;
+        --card-bg: #444;
+        --label-color: #bdc3c7;
+        --border-color: #555;
+        color-scheme: dark;
+      }
+    }
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       Oxygen, Ubuntu, sans-serif;
       max-width: 800px;
       margin: 0 auto;
       padding: 20px;
-      background-color: #f5f5f5;
-      color: #333;
+      background-color: var(--bg);
+      color: var(--font-color);
     }
     h1 {
-      color: #2c3e50;
+      color: var(--title-color);
       margin-bottom: 5px;
     }
     h2 {
-      color: #34495e;
+      color: var(--title-color);
       margin-top: 0;
     }
     .card {
-      background: white;
+      background: var(--card-bg);
       border-radius: 8px;
       padding: 20px;
       margin: 15px 0;
@@ -37,7 +59,7 @@
       gap: 15px;
       margin-bottom: 20px;
       padding-bottom: 15px;
-      border-bottom: 2px solid #3498db;
+      border-bottom: 2px solid var(--accent-color);
     }
     .page-header-left {
       display: flex;
@@ -46,11 +68,11 @@
       flex-wrap: wrap;
     }
     .breadcrumb-inline {
-      color: #7f8c8d;
+      color: var(--label-color);
       font-size: 1.1em;
     }
     .breadcrumb-inline a {
-      color: #3498db;
+      color: var(--accent-color);
       text-decoration: none;
     }
     .breadcrumb-inline a:hover {
@@ -58,26 +80,30 @@
     }
     .breadcrumb-inline .sep {
       margin: 0 6px;
-      color: #bdc3c7;
+      color: var(--border-color);
     }
     .breadcrumb-inline .current {
-      color: #2c3e50;
+      color: var(--title-color);
       font-weight: 500;
     }
     .nav-links {
       margin: 20px 0;
+      display: flex;
+      gap: 10px;
     }
     .nav-links a {
-      display: inline-block;
       padding: 10px 20px;
-      background-color: #3498db;
-      color: white;
+      color: var(--font-color);
       text-decoration: none;
       border-radius: 4px;
-      margin-right: 10px;
     }
-    .nav-links a:hover {
-      background-color: #2980b9;
+    .nav-links a.active {
+      background-color: var(--accent-color);
+      color: white;
+    }
+    .nav-links a:not(.active):hover {
+      background-color: var(--accent-hover-color);
+      color: white;
     }
     /* Action buttons */
     .action-buttons {
@@ -125,7 +151,7 @@
       display: flex;
     }
     .modal {
-      background: white;
+      background: var(--card-bg);
       border-radius: 8px;
       padding: 25px;
       max-width: 450px;
@@ -134,7 +160,7 @@
     }
     .modal h3 {
       margin: 0 0 15px 0;
-      color: #2c3e50;
+      color: var(--title-color);
     }
     .modal-close {
       float: right;
@@ -142,11 +168,11 @@
       border: none;
       font-size: 1.5em;
       cursor: pointer;
-      color: #7f8c8d;
+      color: var(--label-color);
       line-height: 1;
     }
     .modal-close:hover {
-      color: #2c3e50;
+      color: var(--title-color);
     }
     .file-table {
       width: 100%;
@@ -156,27 +182,14 @@
     .file-table td {
       padding: 12px;
       text-align: left;
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid var(--border-color);
     }
     .file-table th {
-      background-color: #f8f9fa;
       font-weight: 600;
-      color: #7f8c8d;
+      color: var(--label-color);
     }
     .file-table tr:hover {
-      background-color: #f8f9fa;
-    }
-    .epub-file {
-      background-color: #e8f6e9 !important;
-    }
-    .epub-file:hover {
-      background-color: #d4edda !important;
-    }
-    .folder-row {
-      background-color: #fff9e6 !important;
-    }
-    .folder-row:hover {
-      background-color: #fff3cd !important;
+      background-color: var(--accent-color-10);
     }
     .epub-badge {
       display: inline-block;
@@ -200,12 +213,12 @@
       margin-right: 8px;
     }
     .folder-link {
-      color: #2c3e50;
+      color: var(--accent-color);
       text-decoration: none;
       cursor: pointer;
     }
     .folder-link:hover {
-      color: #3498db;
+      color: var(--accent-hover-color);
       text-decoration: underline;
     }
     .upload-form {
@@ -233,7 +246,7 @@
       cursor: not-allowed;
     }
     .file-info {
-      color: #7f8c8d;
+      color: var(--label-color);
       font-size: 0.85em;
       margin: 8px 0;
     }
@@ -267,11 +280,11 @@
     .contents-title {
       font-size: 1.1em;
       font-weight: 600;
-      color: #34495e;
+      color: var(--title-color);
       margin: 0;
     }
     .summary-inline {
-      color: #7f8c8d;
+      color: var(--label-color);
       font-size: 0.9em;
     }
     #progress-container {
@@ -295,7 +308,7 @@
       text-align: center;
       margin-top: 5px;
       font-size: 0.9em;
-      color: #7f8c8d;
+      color: var(--label-color);
     }
     .folder-form {
       margin-top: 10px;
@@ -455,7 +468,7 @@
     }
     .delete-item-name {
       font-weight: 600;
-      color: #2c3e50;
+      color: var(--title-color);
       word-break: break-all;
     }
     .delete-btn-confirm {
@@ -483,7 +496,7 @@
       margin-top: 10px;
     }
     .delete-btn-cancel:hover {
-      background-color: #7f8c8d;
+      background-color: var(--label-color);
     }
     .rename-btn-confirm {
       background-color: #3498db;
@@ -627,7 +640,7 @@
 <body>
 <div class="nav-links">
   <a href="/">Home</a>
-  <a href="/files">File Manager</a>
+  <a href="/files" class="active">File Manager</a>
   <a href="/settings">Settings</a>
 </div>
 
diff --git a/src/network/html/HomePage.html b/src/network/html/HomePage.html
index c8927357..e073e6d8 100644
--- a/src/network/html/HomePage.html
+++ b/src/network/html/HomePage.html
@@ -5,26 +5,47 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CrossPoint Reader</title>
     <style>
+      :root {
+        --font-color: #333;
+        --bg: #f5f5f5;
+        --title-color: #2c3e50;
+        --card-bg: #FFF;
+        --label-color: #7f8c8d;
+        --border-color: #eee;
+        --accent-color: rgb(110, 154, 130);
+        --accent-hover-color: #5a8c73;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --font-color: #f5f5f5;
+          --bg: #333;
+          --title-color: #ecf0f1;
+          --card-bg: #444;
+          --label-color: #bdc3c7;
+          --border-color: #555;
+          color-scheme: dark;
+        }
+      }
       body {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           Oxygen, Ubuntu, sans-serif;
         max-width: 800px;
         margin: 0 auto;
         padding: 20px;
-        background-color: #f5f5f5;
-        color: #333;
+        background-color: var(--bg);
+        color: var(--font-color);
       }
       h1 {
-        color: #2c3e50;
-        border-bottom: 2px solid #3498db;
+        color: var(--title-color);
+        border-bottom: 2px solid var(--accent-color);
         padding-bottom: 10px;
       }
       h2 {
-        color: #34495e;
+        color: var(--title-color);
         margin-top: 0;
       }
       .card {
-        background: white;
+        background: var(--card-bg);
         border-radius: 8px;
         padding: 20px;
         margin: 15px 0;
@@ -33,18 +54,19 @@
       .info-row {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         padding: 8px 0;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--border-color);
       }
       .info-row:last-child {
         border-bottom: none;
       }
       .label {
         font-weight: 600;
-        color: #7f8c8d;
+        color: var(--label-color);
       }
       .value {
-        color: #2c3e50;
+        color: var(--title-color);
       }
       .status {
         display: inline-block;
@@ -56,18 +78,22 @@
       }
       .nav-links {
         margin: 20px 0;
+        display: flex;
+        gap: 10px;
       }
       .nav-links a {
-        display: inline-block;
         padding: 10px 20px;
-        background-color: #3498db;
-        color: white;
+        color: var(--font-color);
         text-decoration: none;
         border-radius: 4px;
-        margin-right: 10px;
       }
-      .nav-links a:hover {
-        background-color: #2980b9;
+      .nav-links a.active {
+        background-color: var(--accent-color);
+        color: white;
+      }
+      .nav-links a:not(.active):hover {
+        background-color: var(--accent-hover-color);
+        color: white;
       }
     </style>
   </head>
@@ -75,7 +101,7 @@
     <h1>📚 CrossPoint Reader</h1>
 
     <div class="nav-links">
-      <a href="/">Home</a>
+      <a href="/" class="active">Home</a>
       <a href="/files">File Manager</a>
       <a href="/settings">Settings</a>
     </div>
diff --git a/src/network/html/SettingsPage.html b/src/network/html/SettingsPage.html
index 1d25403d..00ca4ea3 100644
--- a/src/network/html/SettingsPage.html
+++ b/src/network/html/SettingsPage.html
@@ -5,26 +5,49 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>CrossPoint Reader - Settings</title>
   <style>
+    :root {
+      --font-color: #333;
+      --bg: #f5f5f5;
+      --title-color: #2c3e50;
+      --card-bg: #FFF;
+      --label-color: #7f8c8d;
+      --border-color: #eee;
+      --accent-color: rgb(110, 154, 130);
+      --accent-hover-color: #5a8c73;
+      --toggle-bg: #ccc;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --font-color: #f5f5f5;
+        --bg: #333;
+        --title-color: #ecf0f1;
+        --card-bg: #444;
+        --label-color: #bdc3c7;
+        --border-color: #555;
+        --toggle-bg: #666;
+        color-scheme: dark;
+      }
+    }
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
         Oxygen, Ubuntu, sans-serif;
       max-width: 800px;
       margin: 0 auto;
       padding: 20px;
-      background-color: #f5f5f5;
-      color: #333;
+      background-color: var(--bg);
+      color: var(--font-color);
     }
     h1 {
-      color: #2c3e50;
-      border-bottom: 2px solid #3498db;
+      color: var(--title-color);
+      border-bottom: 2px solid var(--accent-color);
       padding-bottom: 10px;
     }
     h2 {
-      color: #34495e;
+      color: var(--title-color);
       margin-top: 0;
     }
     .card {
-      background: white;
+      background: var(--card-bg);
       border-radius: 8px;
       padding: 20px;
       margin: 15px 0;
@@ -32,32 +55,36 @@
     }
     .nav-links {
       margin: 20px 0;
+      display: flex;
+      gap: 10px;
     }
     .nav-links a {
-      display: inline-block;
       padding: 10px 20px;
-      background-color: #3498db;
-      color: white;
+      color: var(--font-color);
       text-decoration: none;
       border-radius: 4px;
-      margin-right: 10px;
     }
-    .nav-links a:hover {
-      background-color: #2980b9;
+    .nav-links a.active {
+      background-color: var(--accent-color);
+      color: white;
+    }
+    .nav-links a:not(.active):hover {
+      background-color: var(--accent-hover-color);
+      color: white;
     }
     .setting-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 10px 0;
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid var(--border-color);
     }
     .setting-row:last-child {
       border-bottom: none;
     }
     .setting-name {
       font-weight: 500;
-      color: #2c3e50;
+      color: var(--label-color);
       flex: 1;
       min-width: 0;
       padding-right: 12px;
@@ -73,7 +100,7 @@
       border: 1px solid #ddd;
       border-radius: 4px;
       font-size: 0.95em;
-      background: white;
+      background: var(--card-bg);
     }
     .setting-control select {
       min-width: 160px;
@@ -101,7 +128,7 @@
       position: absolute;
       cursor: pointer;
       top: 0; left: 0; right: 0; bottom: 0;
-      background-color: #ccc;
+      background-color: var(--toggle-bg);
       border-radius: 26px;
       transition: 0.3s;
     }
@@ -117,7 +144,7 @@
       transition: 0.3s;
     }
     .toggle-switch input:checked + .toggle-slider {
-      background-color: #27ae60;
+      background-color: var(--accent-color);
     }
     .toggle-switch input:checked + .toggle-slider:before {
       transform: translateX(22px);
@@ -194,7 +221,6 @@
       }
       .nav-links a {
         padding: 8px 12px;
-        margin-right: 6px;
         font-size: 0.9em;
       }
       .setting-row {
@@ -205,7 +231,7 @@
       .setting-control input[type="text"],
       .setting-control input[type="password"] {
         min-width: 0;
-        width: 100%;
+        width: unset;
       }
     }
   </style>
@@ -216,7 +242,7 @@
   <div class="nav-links">
     <a href="/">Home</a>
     <a href="/files">File Manager</a>
-    <a href="/settings">Settings</a>
+    <a href="/settings" class="active">Settings</a>
   </div>
 
   <div id="message" class="message"></div>