Slightly better legibility/contrast for light mode; dusky theme dark mode (higher...

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index c53781f3ce7f1752f1706ea767fa4d90a0fe42d8..8ff7dfb2c6123d782a5ffbb63d2d2193dbaa2cb3 100644 (file)
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -76,19 +76,6 @@
 
 /* Root variables (Dark mode) */
 :root {
-    /* Original browny-dark mode
-    --post-bg: #2c1e1a;
-    --body-bg: #3d2a24;
-    --quote-bg: #5a3d33;
-    --link-color: #e8c396;
-    --accent-a: #f2a76c;
-    --accent-b: #8ca5b0;
-    --accent-c: #b68e7d;
-    --body-text: #e8d1c0;
-    --dark-text: #faf0e6;
-    --light-text: #c9ae9c;
-    --code-text: #f2a76c; , below new and not really improved Palmy-dark mode: */
-
     --post-bg: #1a1f2c; /* Deep blue-grey for content areas */
     --body-bg: #242936; /* Slightly lighter blue-grey for main background */
     --quote-bg: #2d3340; /* Medium blue-grey for quoted content */
@@ -100,6 +87,23 @@
     --dark-text: #ffffff; /* Pure white for headers */
     --light-text: #8899bb; /* Muted blue for secondary text */
     --code-text: #77ccff; /* Bright blue for code/special text */
+
+    --post-bg: #2b2b2b; /* Deep blue-grey for content areas */
+    --body-bg: #262626; /* Slightly lighter blue-grey for main background */
+    --quote-bg: #4a4a4a; /* Medium blue-grey for quoted content */
+    --link-color: #a58cb5; /* Bright blue for links */
+    --accent-a: #8f7d9b; /* Primary blue */
+    --accent-b: #b3a6be; /* Secondary blue */
+    --accent-c: #9b8aa6; /* Tertiary blue */
+    --body-text: #c5d1e6; /* Soft blue-white for main text */
+    --dark-text: #ffffff; /* Pure white for headers */
+    --light-text: #eeeeee; /* Muted blue for secondary text */
+    --code-text: #9b8aa6; /* Bright blue for code/special text */
+
+    --filter-button-text: #eeeeee;
+    --filter-button: #3d3d3d;
+    --filter-button-active: #847091;
+    --filter-button-hover: #63546d;
 }
 
 /* Light mode */
@@ -108,7 +112,7 @@
         --post-bg: #fdf6f0;
         --body-bg: #f5e6db;
         --quote-bg: #e8d1c0;
-        --link-color: #b3461c;
+        --link-color: #c28656;
         --accent-a: #f2a76c;
         --accent-b: #6a8693;
         --accent-c: #9e6b57;
@@ -116,6 +120,11 @@
         --dark-text: #2c1e1a;
         --light-text: #7d5b4e;
         --code-text: #b3461c;
+
+        --filter-button-text: #2c1e1a;
+        --filter-button: #e8d1c0;
+        --filter-button-active: #f2a76c;
+        --filter-button-hover: #f2a76c;
     }
 }
 
@@ -348,6 +357,12 @@ footer p {
     padding: 3px 15px;
 }
 
+.meta,
+.dash {
+    color: var(--accent-b);
+    font-size: 0.8em;
+}
+
 .bookmark-buttons {
     margin-bottom: -5px;
     padding-bottom: 3px;
@@ -400,6 +415,7 @@ footer p {
 .lowlight a {
     color: var(--quote-bg);
     text-decoration: none;
+    font-size: 0.8em;
 }
 
 ul li {
@@ -456,20 +472,20 @@ ul .pinned::before {
     padding: 10px 20px;
     margin: 0 5px;
     margin-bottom: 15px;
-    background-color: var(--accent-a);
-    color: var(--dark-text);
+    background-color: var(--filter-button);
+    color: var(--filter-button-text);
     text-decoration: none;
     border-radius: 5px;
 }
 
 .filter-buttons .button.active {
-    background-color: var(--body-text);
-    color: var(--accent-a);
+    background-color: var(--filter-button-active);
+    color: var(--filter-button-text);
 }
 
 .filter-buttons .button:hover {
-    background-color: var(--body-text);
-    color: var(--accent-a);
+    background-color: var(--filter-button-hover);
+    color: var(--filter-button-text);
 }
 
 .excerpt {