From 10c82c97a283f411926d957bda4c96b3a0781e03 Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Fri, 10 Jan 2025 19:26:33 +0100
Subject: [PATCH] update more colors

---
 src/_data/meta.js                         | 5 +++--
 src/assets/css/global/base/variables.css  | 3 ---
 src/assets/css/global/blocks/prose.css    | 2 +-
 src/assets/scripts/bundle/theme-toggle.js | 4 ++--
 src/common/site-manifest.njk              | 2 +-
 5 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/_data/meta.js b/src/_data/meta.js
index 7f55686..a39377b 100644
--- a/src/_data/meta.js
+++ b/src/_data/meta.js
@@ -19,8 +19,9 @@ export const creator = {
   social: 'https://front-end.social/@lene'
 };
 export const pathToSvgLogo = 'src/assets/svg/misc/logo.svg'; // used for favicon generation
-export const themeColor = '#DD4462'; //  Manifest: defines the default theme color for the application
-export const themeBgColor = '#FBFBFB'; // Manifest: defines a placeholder background color for the application page to display before its stylesheet is loaded
+export const themeColor = '#dd4462'; // used in manifest, for example primary color value
+export const themeLight = '#f8f8f8'; // used for meta tag theme-color, if light colors are prefered. best use value set for light bg
+export const themeDark = '#FBFBFB'; // used for meta tag theme-color, if dark colors are prefered. best use value set for dark bg
 export const opengraph_default = '/assets/images/template/opengraph-default.jpg'; // fallback/default meta image
 export const opengraph_default_alt =
   "Visible content: An Eleventy starter with CUBE CSS, Cube CSS, Every Layout, Design Tokens and Tailwind for uitility classes. A workflow for building modern and resilient websites, introduced by Andy Bell's project buildexcellentwebsit.es"; // alt text for default meta image"
diff --git a/src/assets/css/global/base/variables.css b/src/assets/css/global/base/variables.css
index e4ad35d..919ae40 100644
--- a/src/assets/css/global/base/variables.css
+++ b/src/assets/css/global/base/variables.css
@@ -33,7 +33,6 @@
 :root[data-theme='light'] {
   --color-text: var(--color-gray-800);
   --color-bg: var(--color-gray-100);
-  --color-base: var(--color-gray-800);
 
   --color-primary: var(--color-pink);
   --color-secondary: var(--color-blue);
@@ -49,7 +48,6 @@
   :root {
     --color-text: var(--color-gray-100);
     --color-bg: var(--color-gray-800);
-    --color-base: var(--color-gray-100);
 
     --color-primary: var(--color-pink-subdued);
     --color-secondary: var(--color-blue-subdued);
@@ -63,7 +61,6 @@
 :root[data-theme='dark'] {
   --color-text: var(--color-gray-100);
   --color-bg: var(--color-gray-800);
-  --color-base: var(--color-gray-100);
 
   --color-primary: var(--color-pink-subdued);
   --color-secondary: var(--color-blue-subdued);
diff --git a/src/assets/css/global/blocks/prose.css b/src/assets/css/global/blocks/prose.css
index 1659c4b..f296c91 100644
--- a/src/assets/css/global/blocks/prose.css
+++ b/src/assets/css/global/blocks/prose.css
@@ -31,7 +31,7 @@
 
 .prose mark {
   background-color: var(--color-tertiary);
-  color: var(--color-base-dark);
+  color: var(--color-dark);
 }
 
 /* block space only for "regular lists" */
diff --git a/src/assets/scripts/bundle/theme-toggle.js b/src/assets/scripts/bundle/theme-toggle.js
index 2590882..9b8a23a 100644
--- a/src/assets/scripts/bundle/theme-toggle.js
+++ b/src/assets/scripts/bundle/theme-toggle.js
@@ -2,8 +2,8 @@ const storageKey = 'theme-preference';
 const lightLabel = '{{ meta.themeSwitch.light }}';
 const darkLabel = '{{ meta.themeSwitch.dark }}';
 const themeColors = {
-  dark: '{{ designTokens.colors.items[0].value }}', // Base Dark
-  light: '{{ designTokens.colors.items[1].value }}' // Base Light
+  dark: '{{ meta.themeLight }}',
+  light: '{{ meta.themeDark }}'
 };
 
 const theme = {
diff --git a/src/common/site-manifest.njk b/src/common/site-manifest.njk
index a27f2cd..5393af7 100644
--- a/src/common/site-manifest.njk
+++ b/src/common/site-manifest.njk
@@ -26,6 +26,6 @@ excludeFromSitemap: true
     }
   ],
   "theme_color": "{{ meta.themeColor }}",
-  "background_color": "{{ meta.themeBgColor }}",
+  "background_color": "{{ meta.themeLight }}",
   "display": "standalone"
 }
\ No newline at end of file