update more colors

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"

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);

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" */

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 = {

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"
 }