Themes.css est pleinement fonctionnel

diff --git a/www/theme.css b/www/theme.css
index 83a8b86b7711ab291399581188c528f42a4f1f49..9419ea546243845bc83c437cf4eb6625af97b6d5 100644 (file)
--- a/www/theme.css
+++ b/www/theme.css
@@ -1,79 +1,66 @@
-/*
- * theme.css
- * Deux thèmes : light (défaut) et dark
- * Conçu pour être inclus depuis starthtml()
- */
+/* theme.css */
 
-/* =========================
-   Thème par défaut : LIGHT
-   ========================= */
+/* =====================
+   Light Theme (default)
+   ===================== */
 :root {
-    /* Couleurs générales */
-    --bg-main: #ffffff;
-    --fg-main: #000000;
+  --bg-color: white;
+  --text-color: black;
 
-    /* En-têtes / tableaux */
-    --bg-header: #f2f4f8;
-    --fg-header: #002244;
+  --highlight-bg: lightyellow;
+  --highlight-text: black;
 
-    /* États */
-    --bg-active: #53CABA;   /* sélection colonne */
-    --bg-hover:  #ddeeff;
-
-    /* Bordures */
-    --border-main: #cccccc;
+  --filter-col-bg: lavender;
+  --filter-col-hover-bg: lightsteelblue;
+  --filter-col-active-bg: cornflowerblue;
+  --filter-col-text: darkblue;
 }
 
-/* =========================
-   Thème DARK
-   ========================= */
-[data-theme="dark"] {
-    --bg-main: #121212;
-    --fg-main: #e0e0e0;
-
-    --bg-header: #1e1e2e;
-    --fg-header: #9ecbff;
+/* =====================
+   Dark Theme
+   ===================== */
+.dark {
+  --bg-color: black;
+  --text-color: gainsboro;
 
-    --bg-active: #2a7f78;
-    --bg-hover:  #2a2a40;
+  --highlight-bg: darkslategray;
+  --highlight-text: lightgoldenrodyellow;
 
-    --border-main: #333333;
+  --filter-col-bg: dimgray;
+  --filter-col-hover-bg: slategray;
+  --filter-col-active-bg: steelblue;
+  --filter-col-text: lightblue;
 }
 
-/* =========================
-   Styles génériques
-   ========================= */
+/* =====================
+   Generic elements
+   ===================== */
 body {
-    margin: 0;
-    padding: 0;
-    background: var(--bg-main);
-    color: var(--fg-main);
-    font-family: sans-serif;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  font-family: sans-serif;
 }
 
-/* =========================
-   Table / colonnes filtrables
-   ========================= */
-
-th.filter-col {
-    background: var(--bg-header);
-    color: var(--fg-header);
-    border: 1px solid var(--border-main);
-    padding: 6px 10px;
-    cursor: pointer;
-    user-select: none;
+/* Column header behavior */
+.filter-col {
+  cursor: pointer;
+  color: var(--filter-col-text);
+  background-color: var(--filter-col-bg);
 }
 
-th.filter-col:hover {
-    background: var(--bg-hover);
+/* Mouse hover on column header */
+.filter-col:hover {
+  background-color: var(--filter-col-hover-bg);
 }
 
-th.filter-col.active {
-    background: var(--bg-active);
+/* Active (selected) column header */
+.filter-col.active {
+  background-color: var(--filter-col-active-bg);
 }
 
-/* Le texte interne hérite automatiquement */
-th.filter-col span {
-    pointer-events: none; /* clic toujours sur le TH */
+/* Highlighted table cells or rows */
+.highlight {
+  background-color: var(--highlight-bg);
+  color: var(--highlight-text);
 }
 

diff --git a/www/theme2.css b/www/theme2.css
new file mode 100644 (file)
index 0000000..60b9b3f
--- /dev/null
+++ b/www/theme2.css
@@ -0,0 +1,52 @@
+/* theme.css */
+
+/* =====================
+   Light Theme (default)
+   ===================== */
+:root {
+  --bg-color: #ffffff;          /* background color */
+  --text-color: #000000;        /* text color */
+  --highlight-bg: #ff9;         /* highlight background */
+  --highlight-text: #000;       /* highlight text color */
+  --filter-col-bg: #f7f7ff;     /* filter column background */
+  --filter-col-active-bg: #cce; /* active filter column background */
+  --filter-col-text: #003;      /* filter column text color */
+}
+
+/* =====================
+   Dark Theme
+   ===================== */
+.dark {
+  --bg-color: #1e1e1e;
+  --text-color: #e0e0e0;
+  --highlight-bg: #553333;
+  --highlight-text: #fff0b0;
+  --filter-col-bg: #333344;
+  --filter-col-active-bg: #5566aa;
+  --filter-col-text: #aaccff;
+}
+
+/* =====================
+   Generic elements using variables
+   ===================== */
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  font-family: sans-serif;
+}
+
+.filter-col {
+  cursor: pointer;
+  color: var(--filter-col-text);
+  background: var(--filter-col-bg);
+}
+
+.filter-col.active {
+  background: var(--filter-col-active-bg);
+}
+
+.highlight {
+  background: var(--highlight-bg);
+  color: var(--highlight-text);
+}
+