Added a theme toggle to the footer

Add css variables to style components
Update _layout.scss
2025-04-25 16:42:38 +02:00 · 2025-04-25 16:42:14 +02:00 · 2025-04-25 16:41:45 +02:00 · 2025-04-25 16:41:10 +02:00 · 2025-04-21 17:41:45 +02:00
17 changed files with 11277 additions and 226 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -7,6 +7,7 @@
  "scripts": {
    "dev:css": "sass src/scss/main.scss:src/_includes/css/main.css --watch --style=compressed",
    "dev:11ty": "eleventy --serve",
+    "dev:decap": "decap-server",
    "dev": "npm-run-all --parallel dev:*",
    "prod:css": "sass src/scss/main.scss:src/_includes/css/main.css --style=compressed",
    "prod:11ty": "eleventy",
@ -22,7 +23,9 @@
    "sass": "^1.86.3"
  },
  "dependencies": {
-    "alpinejs": "^2.8.2"
+    "alpinejs": "^2.8.2",
+    "decap-cms-app": "^3.6.2",
+    "decap-server": "^3.2.0"
  },
  "repository": {
    "type": "git",
--- a/src/_includes/components/footer.njk
+++ b/src/_includes/components/footer.njk
@ -1,2 +1,14 @@
-<p>Made with <a href="https://myonlinecookbook.xyz/" target="_blank" rel="noopener">My Online Cookbook</a></p>
-<p>© {{ site.author }} {% year %}</p>
+<div>
+    <p>Made with <a href="https://myonlinecookbook.xyz/" target="_blank" rel="noopener">My Online Cookbook</a></p>
+    <p>© {{ site.author }} {% year %}</p>
+</div>
+
+<div class="user-toggle">
+    <div role="status" class="visually-hidden js-mode-status"></div>
+    <button class="toggle-button js-mode-toggle">
+        <span class="visually-hidden toggle-button__text js-mode-toggle-text"
+            >Enable dark mode</span
+        >
+        <span class="toggle-button__icon" aria-hidden="true"></span>
+    </button>
+</div>
--- a/src/_includes/icons/close.svg
+++ b/src/_includes/icons/close.svg
@ -1,3 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.0156 11.0175L21.5819 2.4509C22.1394 1.89367 22.1394 0.992719 21.5819 0.435496C21.0247 -0.121728 20.1238 -0.121728 19.5665 0.435496L10.9999 9.00212L2.43352 0.435496C1.87603 -0.121728 0.975338 -0.121728 0.418114 0.435496C-0.139371 0.992719 -0.139371 1.89367 0.418114 2.4509L8.98449 11.0175L0.418114 19.5841C-0.139371 20.1414 -0.139371 21.0423 0.418114 21.5995C0.695812 21.8775 1.06094 22.0171 1.42582 22.0171C1.79069 22.0171 2.15556 21.8775 2.43352 21.5995L10.9999 13.0329L19.5665 21.5995C19.8445 21.8775 20.2094 22.0171 20.5742 22.0171C20.9391 22.0171 21.304 21.8775 21.5819 21.5995C22.1394 21.0423 22.1394 20.1414 21.5819 19.5841L13.0156 11.0175Z" fill="#3A3A3A"/>
+<path d="M13.0156 11.0175L21.5819 2.4509C22.1394 1.89367 22.1394 0.992719 21.5819 0.435496C21.0247 -0.121728 20.1238 -0.121728 19.5665 0.435496L10.9999 9.00212L2.43352 0.435496C1.87603 -0.121728 0.975338 -0.121728 0.418114 0.435496C-0.139371 0.992719 -0.139371 1.89367 0.418114 2.4509L8.98449 11.0175L0.418114 19.5841C-0.139371 20.1414 -0.139371 21.0423 0.418114 21.5995C0.695812 21.8775 1.06094 22.0171 1.42582 22.0171C1.79069 22.0171 2.15556 21.8775 2.43352 21.5995L10.9999 13.0329L19.5665 21.5995C19.8445 21.8775 20.2094 22.0171 20.5742 22.0171C20.9391 22.0171 21.304 21.8775 21.5819 21.5995C22.1394 21.0423 22.1394 20.1414 21.5819 19.5841L13.0156 11.0175Z" fill="currentColor"/>
 </svg>
--- a/src/_includes/icons/logo.svg
+++ b/src/_includes/icons/logo.svg
@ -1 +1 @@
-<svg width="47" height="56" viewBox="0 0 47 56" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M43.301 0H6.371C4.333 0 2.68 1.643 2.68 3.67v48.335c0 2.027 1.652 3.67 3.69 3.67H43.3c2.043 0 3.699-1.647 3.699-3.679V3.678C47 1.647 45.344 0 43.301 0z" fill="var(--color-primary, #FED35B)"/><path d="M42.33 1.104H6.712c-1.966 0-3.559 1.578-3.559 3.524v46.42c0 1.945 1.593 3.523 3.559 3.523h35.616c1.97 0 3.567-1.582 3.567-3.532V4.636c0-1.95-1.597-3.533-3.567-3.533z" fill="#EDEDED"/><path d="M40.365 0H3.666A3.666 3.666 0 000 3.666v48.298a3.666 3.666 0 003.666 3.667h36.7a3.675 3.675 0 003.675-3.675V3.675A3.675 3.675 0 0040.366 0z" fill="var(--color-primary, #FED35B)"/><path d="M3.666 0A3.666 3.666 0 000 3.666v48.298a3.666 3.666 0 003.666 3.667h2.317V0H3.666z" fill="#000" fill-opacity=".05"/><path d="M33.439 21.411a.596.596 0 00-.596.596v6.468h-1.059v-6.468a.596.596 0 00-.595-.596h-.01a.596.596 0 00-.595.596v6.468h-1.06v-6.468a.596.596 0 00-.595-.596h-.01a.596.596 0 00-.595.596v6.468h-1.059v-6.468a.596.596 0 00-1.191 0v6.422c0 1.324.676 2.554 1.792 3.264l.854.544-.473 16.514c-.033.99.708 1.872 1.697 1.93a1.81 1.81 0 001.92-1.867l-.476-16.577.855-.544a3.868 3.868 0 001.791-3.264v-6.422a.596.596 0 00-.595-.596zM23.343 27.417c0-3.317-1.978-6.006-4.418-6.006-2.44 0-4.417 2.689-4.417 6.006 0 2.67 1.283 4.932 3.056 5.712l-.447 15.622c-.033.99.707 1.872 1.697 1.93a1.81 1.81 0 001.92-1.867l-.45-15.684c1.774-.78 3.059-3.041 3.059-5.713z" fill="#344D5B"/><path d="M18.925 31.707c1.964 0 3.556-2.164 3.556-4.834 0-2.669-1.592-4.833-3.556-4.833-1.963 0-3.555 2.164-3.555 4.833 0 2.67 1.592 4.834 3.555 4.834z" fill="#293B44"/><path d="M14.009 6.643h20.524v8.359H14.01v-8.36z" fill="#EDEDED"/></svg>
+<svg width="47" height="56" viewBox="0 0 47 56" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M43.301 0H6.371C4.333 0 2.68 1.643 2.68 3.67v48.335c0 2.027 1.652 3.67 3.69 3.67H43.3c2.043 0 3.699-1.647 3.699-3.679V3.678C47 1.647 45.344 0 43.301 0z" fill="var(--logo-primary-color, var(--color-primary, #FED35B))"/><path d="M42.33 1.104H6.712c-1.966 0-3.559 1.578-3.559 3.524v46.42c0 1.945 1.593 3.523 3.559 3.523h35.616c1.97 0 3.567-1.582 3.567-3.532V4.636c0-1.95-1.597-3.533-3.567-3.533z" fill="#EDEDED"/><path d="M40.365 0H3.666A3.666 3.666 0 000 3.666v48.298a3.666 3.666 0 003.666 3.667h36.7a3.675 3.675 0 003.675-3.675V3.675A3.675 3.675 0 0040.366 0z" fill="var(--logo-primary-color, var(--color-primary, #FED35B))"/><path d="M3.666 0A3.666 3.666 0 000 3.666v48.298a3.666 3.666 0 003.666 3.667h2.317V0H3.666z" fill="#000" fill-opacity=".05"/><path d="M33.439 21.411a.596.596 0 00-.596.596v6.468h-1.059v-6.468a.596.596 0 00-.595-.596h-.01a.596.596 0 00-.595.596v6.468h-1.06v-6.468a.596.596 0 00-.595-.596h-.01a.596.596 0 00-.595.596v6.468h-1.059v-6.468a.596.596 0 00-1.191 0v6.422c0 1.324.676 2.554 1.792 3.264l.854.544-.473 16.514c-.033.99.708 1.872 1.697 1.93a1.81 1.81 0 001.92-1.867l-.476-16.577.855-.544a3.868 3.868 0 001.791-3.264v-6.422a.596.596 0 00-.595-.596zM23.343 27.417c0-3.317-1.978-6.006-4.418-6.006-2.44 0-4.417 2.689-4.417 6.006 0 2.67 1.283 4.932 3.056 5.712l-.447 15.622c-.033.99.707 1.872 1.697 1.93a1.81 1.81 0 001.92-1.867l-.45-15.684c1.774-.78 3.059-3.041 3.059-5.713z" fill="#344D5B"/><path d="M18.925 31.707c1.964 0 3.556-2.164 3.556-4.834 0-2.669-1.592-4.833-3.556-4.833-1.963 0-3.555 2.164-3.555 4.833 0 2.67 1.592 4.834 3.555 4.834z" fill="#293B44"/><path d="M14.009 6.643h20.524v8.359H14.01v-8.36z" fill="#EDEDED"/></svg>
--- a/src/_includes/icons/search.svg
+++ b/src/_includes/icons/search.svg
@ -1 +1 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path d="M21.731 20.436l-6.256-6.256a8.666 8.666 0 001.941-5.47C17.416 3.907 13.51 0 8.708 0 3.907.001 0 3.908 0 8.709c0 4.802 3.907 8.709 8.708 8.709 2.072 0 3.974-.73 5.47-1.942l6.257 6.256a.914.914 0 001.296 0 .916.916 0 000-1.296zM8.708 15.584A6.882 6.882 0 011.833 8.71a6.882 6.882 0 016.875-6.875 6.882 6.882 0 016.875 6.875 6.882 6.882 0 01-6.875 6.875z" fill="#3A3A3A"/></g></svg>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path d="M21.731 20.436l-6.256-6.256a8.666 8.666 0 001.941-5.47C17.416 3.907 13.51 0 8.708 0 3.907.001 0 3.908 0 8.709c0 4.802 3.907 8.709 8.708 8.709 2.072 0 3.974-.73 5.47-1.942l6.257 6.256a.914.914 0 001.296 0 .916.916 0 000-1.296zM8.708 15.584A6.882 6.882 0 011.833 8.71a6.882 6.882 0 016.875-6.875 6.882 6.882 0 016.875 6.875 6.882 6.882 0 01-6.875 6.875z" fill="currentColor"/></g></svg>
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="no-js">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -20,12 +20,15 @@
      :root {
        --color-primary: {{ site.primaryColor }};
        --color-secondary: {{ site.secondaryColor }};
+        --primary-color: {{ site.primaryColor }};
+        --secondary-color: {{ site.secondaryColor }};
      }
      {% include "css/main.css" %}
    </style>

    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js" defer></script>
+    <script>document.documentElement.classList.remove('no-js');</script>
  </head>
  <body class="{{bodyClass}}">
    <header class="l-header">
@ -44,5 +47,79 @@
    <footer class="l-footer">
      {% include "components/footer.njk" %}
    </footer>
+
+    <script>
+      
+      const STORAGE_KEY = 'user-color-scheme';
+      const COLOR_MODE_KEY = '--color-mode';
+
+      const modeToggleButton = document.querySelector('.js-mode-toggle');
+      const modeToggleText = document.querySelector('.js-mode-toggle-text');
+      const modeStatusElement = document.querySelector('.js-mode-status');
+
+
+      const getCSSCustomProp = propKey => {
+        let response = getComputedStyle(document.documentElement).getPropertyValue(propKey);
+
+        if (response.length) {
+          response = response.replace(/\"/g, '').trim();
+        }
+
+        return response;
+      };
+
+      
+      const applySetting = passedSetting => {
+        let currentSetting = passedSetting || localStorage.getItem(STORAGE_KEY);
+
+        if (currentSetting) {
+          document.documentElement.setAttribute('data-user-color-scheme', currentSetting);
+          setButtonLabelAndStatus(currentSetting);
+        } else {
+          setButtonLabelAndStatus(getCSSCustomProp(COLOR_MODE_KEY));
+        }
+      };
+
+      
+const setButtonLabelAndStatus = currentSetting => {
+  modeToggleText.innerText = `Enable ${
+    currentSetting === 'dark' ? 'light' : 'dark'
+  } mode`;
+  modeStatusElement.innerText = `Color mode is now "${currentSetting}"`;
+};
+
+
+const toggleSetting = () => {
+  let currentSetting = localStorage.getItem(STORAGE_KEY);
+
+  switch (currentSetting) {
+    case null:
+      currentSetting = getCSSCustomProp(COLOR_MODE_KEY) === 'dark' ? 'light' : 'dark';
+      break;
+    case 'light':
+      currentSetting = 'dark';
+      break;
+    case 'dark':
+      currentSetting = 'light';
+      break;
+  }
+
+  localStorage.setItem(STORAGE_KEY, currentSetting);
+
+  return currentSetting;
+};
+
+modeToggleButton.addEventListener('click', evt => {
+  evt.preventDefault();
+
+  applySetting(toggleSetting());
+});
+
+applySetting();
+
+
+
+
+    </script>
  </body>
 </html>
--- a/src/admin/config.yml
+++ b/src/admin/config.yml
@ -1,6 +1,8 @@
 backend:
  name: git-gateway
  branch: main
+local_backend: true
+
 media_folder: "src/img/recipes"
 public_folder: "/img/recipes"

--- a/src/scss/_global.scss
+++ b/src/scss/_global.scss
@ -8,16 +8,220 @@
    --color-grey-500: #9CA3AF;
    --color-grey-800: #4B5563;
    --color-grey-900: #3A3A3A;
+    --color-grey-950: #1f1f1f;
    --color-white: #ffffff;

    --shadow-md: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
+
+    --icon-sun: url('data:image/svg+xml,\
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">\
+        <path d="M18 12c0-0.811-0.161-1.587-0.455-2.295-0.304-0.735-0.75-1.395-1.303-1.948-0.552-0.552-1.213-0.998-1.948-1.303-0.707-0.293-1.483-0.454-2.294-0.454s-1.587 0.161-2.295 0.455c-0.735 0.304-1.395 0.75-1.948 1.302s-0.998 1.213-1.302 1.948c-0.294 0.708-0.455 1.484-0.455 2.295s0.161 1.587 0.455 2.295c0.304 0.735 0.75 1.395 1.303 1.948 0.552 0.552 1.213 0.998 1.948 1.303 0.707 0.293 1.483 0.454 2.294 0.454s1.587-0.161 2.295-0.455c0.735-0.304 1.395-0.75 1.948-1.303s0.998-1.213 1.303-1.948c0.293-0.707 0.454-1.483 0.454-2.294zM16 12c0 0.544-0.108 1.060-0.303 1.529-0.202 0.489-0.5 0.929-0.869 1.299s-0.81 0.667-1.299 0.869c-0.469 0.195-0.985 0.303-1.529 0.303s-1.060-0.108-1.529-0.303c-0.489-0.202-0.929-0.5-1.299-0.869s-0.667-0.81-0.869-1.299c-0.195-0.469-0.303-0.985-0.303-1.529s0.108-1.060 0.303-1.529c0.202-0.489 0.5-0.929 0.869-1.299s0.81-0.667 1.299-0.869c0.469-0.195 0.985-0.303 1.529-0.303s1.060 0.108 1.529 0.303c0.489 0.202 0.929 0.5 1.299 0.869s0.667 0.81 0.869 1.299c0.195 0.469 0.303 0.985 0.303 1.529zM11 1v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 21v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM3.513 4.927l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM17.653 19.067l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM1 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM21 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM4.927 20.487l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM19.067 6.347l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>\
+    </svg>');
+    --icon-sun-filter: invert(0.61) sepia(0.8) saturate(5) hue-rotate(0deg) brightness(0.92);
+    --icon-moon: url('data:image/svg+xml,\
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">\
+        <path d="M21.996 12.882c0.022-0.233-0.038-0.476-0.188-0.681-0.325-0.446-0.951-0.544-1.397-0.219-0.95 0.693-2.059 1.086-3.188 1.162-0.696 0.047-1.399-0.027-2.077-0.226-0.656-0.192-1.29-0.501-1.874-0.932-0.655-0.484-1.181-1.074-1.575-1.729-0.409-0.68-0.676-1.432-0.792-2.206s-0.082-1.571 0.11-2.342c0.184-0.741 0.514-1.46 0.999-2.115 0.142-0.191 0.216-0.435 0.191-0.691-0.053-0.55-0.542-0.952-1.092-0.898-1.117 0.109-2.186 0.399-3.172 0.843-1.005 0.452-1.925 1.065-2.723 1.808-0.883 0.82-1.618 1.801-2.159 2.901-0.523 1.064-0.863 2.238-0.978 3.485-0.125 1.347 0.024 2.658 0.402 3.878 0.392 1.266 1.031 2.431 1.863 3.433s1.86 1.843 3.033 2.461c1.13 0.595 2.392 0.982 3.739 1.106s2.659-0.025 3.878-0.403c1.266-0.392 2.431-1.031 3.433-1.863s1.843-1.86 2.461-3.033c0.595-1.13 0.982-2.392 1.106-3.739zM19.567 14.674c-0.126 0.351-0.276 0.689-0.447 1.014-0.493 0.937-1.166 1.76-1.969 2.427s-1.735 1.178-2.747 1.491c-0.973 0.302-2.021 0.421-3.102 0.321s-2.089-0.41-2.99-0.884c-0.937-0.493-1.76-1.166-2.427-1.969s-1.178-1.735-1.491-2.747c-0.302-0.973-0.421-2.021-0.321-3.102 0.092-1 0.365-1.938 0.782-2.786 0.43-0.878 1.018-1.661 1.725-2.319 0.64-0.595 1.377-1.086 2.183-1.449 0.179-0.081 0.362-0.155 0.548-0.223-0.092 0.257-0.171 0.516-0.236 0.778-0.256 1.029-0.302 2.091-0.147 3.121s0.51 2.032 1.056 2.941c0.527 0.875 1.23 1.663 2.1 2.306 0.775 0.573 1.622 0.986 2.5 1.243 0.907 0.266 1.846 0.364 2.772 0.302 0.752-0.050 1.496-0.207 2.21-0.465z"></path>\
+    </svg>');
+    --icon-moon-filter: invert(0.75);
+
+
+
+
+
+
+    --color-mode: 'light';
+  --color-dark: #141414;
+  --color-dark-alpha: rgba(0, 0, 0, 0.1);
+  --color-light: #efefef;
+  --color-light-alpha: rgba(255, 255, 255, 0.9);
+  --icon-sun: url('data:image/svg+xml,\
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">\
+    <path d="M18 12c0-0.811-0.161-1.587-0.455-2.295-0.304-0.735-0.75-1.395-1.303-1.948-0.552-0.552-1.213-0.998-1.948-1.303-0.707-0.293-1.483-0.454-2.294-0.454s-1.587 0.161-2.295 0.455c-0.735 0.304-1.395 0.75-1.948 1.302s-0.998 1.213-1.302 1.948c-0.294 0.708-0.455 1.484-0.455 2.295s0.161 1.587 0.455 2.295c0.304 0.735 0.75 1.395 1.303 1.948 0.552 0.552 1.213 0.998 1.948 1.303 0.707 0.293 1.483 0.454 2.294 0.454s1.587-0.161 2.295-0.455c0.735-0.304 1.395-0.75 1.948-1.303s0.998-1.213 1.303-1.948c0.293-0.707 0.454-1.483 0.454-2.294zM16 12c0 0.544-0.108 1.060-0.303 1.529-0.202 0.489-0.5 0.929-0.869 1.299s-0.81 0.667-1.299 0.869c-0.469 0.195-0.985 0.303-1.529 0.303s-1.060-0.108-1.529-0.303c-0.489-0.202-0.929-0.5-1.299-0.869s-0.667-0.81-0.869-1.299c-0.195-0.469-0.303-0.985-0.303-1.529s0.108-1.060 0.303-1.529c0.202-0.489 0.5-0.929 0.869-1.299s0.81-0.667 1.299-0.869c0.469-0.195 0.985-0.303 1.529-0.303s1.060 0.108 1.529 0.303c0.489 0.202 0.929 0.5 1.299 0.869s0.667 0.81 0.869 1.299c0.195 0.469 0.303 0.985 0.303 1.529zM11 1v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 21v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM3.513 4.927l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM17.653 19.067l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM1 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM21 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM4.927 20.487l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM19.067 6.347l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>\
+  </svg>');
+  --icon-sun-filter: invert(0.61) sepia(0.8) saturate(5) hue-rotate(0deg) brightness(0.92);
+  --icon-moon: url('data:image/svg+xml,\
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">\
+    <path d="M21.996 12.882c0.022-0.233-0.038-0.476-0.188-0.681-0.325-0.446-0.951-0.544-1.397-0.219-0.95 0.693-2.059 1.086-3.188 1.162-0.696 0.047-1.399-0.027-2.077-0.226-0.656-0.192-1.29-0.501-1.874-0.932-0.655-0.484-1.181-1.074-1.575-1.729-0.409-0.68-0.676-1.432-0.792-2.206s-0.082-1.571 0.11-2.342c0.184-0.741 0.514-1.46 0.999-2.115 0.142-0.191 0.216-0.435 0.191-0.691-0.053-0.55-0.542-0.952-1.092-0.898-1.117 0.109-2.186 0.399-3.172 0.843-1.005 0.452-1.925 1.065-2.723 1.808-0.883 0.82-1.618 1.801-2.159 2.901-0.523 1.064-0.863 2.238-0.978 3.485-0.125 1.347 0.024 2.658 0.402 3.878 0.392 1.266 1.031 2.431 1.863 3.433s1.86 1.843 3.033 2.461c1.13 0.595 2.392 0.982 3.739 1.106s2.659-0.025 3.878-0.403c1.266-0.392 2.431-1.031 3.433-1.863s1.843-1.86 2.461-3.033c0.595-1.13 0.982-2.392 1.106-3.739zM19.567 14.674c-0.126 0.351-0.276 0.689-0.447 1.014-0.493 0.937-1.166 1.76-1.969 2.427s-1.735 1.178-2.747 1.491c-0.973 0.302-2.021 0.421-3.102 0.321s-2.089-0.41-2.99-0.884c-0.937-0.493-1.76-1.166-2.427-1.969s-1.178-1.735-1.491-2.747c-0.302-0.973-0.421-2.021-0.321-3.102 0.092-1 0.365-1.938 0.782-2.786 0.43-0.878 1.018-1.661 1.725-2.319 0.64-0.595 1.377-1.086 2.183-1.449 0.179-0.081 0.362-0.155 0.548-0.223-0.092 0.257-0.171 0.516-0.236 0.778-0.256 1.029-0.302 2.091-0.147 3.121s0.51 2.032 1.056 2.941c0.527 0.875 1.23 1.663 2.1 2.306 0.775 0.573 1.622 0.986 2.5 1.243 0.907 0.266 1.846 0.364 2.772 0.302 0.752-0.050 1.496-0.207 2.21-0.465z"></path>\
+  </svg>');
+  --icon-moon-filter: invert(0.75);
+  --background: #efefef;
+  --text-color: #141414;
+  --button-icon: var(--icon-moon);
+  --button-icon-filter: var(--icon-moon-filter);
+  --button-background: var(--color-dark);
+  --button-color: var(--color-light);
+  --border-color: var(--color-dark-alpha);
 }

+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-mode: 'dark';
+    }
+
+    :root:not([data-user-color-scheme]) {
+        --background: var(--color-dark);
+  --text-color: var(--color-light);
+  --button-icon: var(--icon-sun);
+  --button-icon-filter: var(--icon-sun-filter);
+  --button-background: var(--color-light-alpha);
+  --button-color: var(--color-dark);
+  --border-color: var(--color-light-alpha);
+
+
+        --color-primary: hsl(from var(--primary-color) h s calc(l - 50));
+        --color-secondary: hsl(from var(--secondary-color) h s calc(l + 10));
+
+        --logo-primary-color: hsl(from var(--primary-color) h s calc(l - 25));
+
+        --card-color: var(--color-white);
+        --card-bg: #181A1B;
+        --card-tag-bg: var(--color-white);
+        --card-tag-color: var(--color-grey-900);
+        --card-placeholder: var(--color-grey-400);
+
+        --nav-color: var(--color-white);
+        --nav-active-bg: #2C2F31;
+        // --nav-active-color: var(--color-grey-900);
+        // --nav-hover-color: var(--color-grey-900);
+        --nav-hover-bg: #2C2F31;
+
+        --tags-color: #c3beb6;
+        --tags-hover-color: #e8e6e3;
+        --tags-hover-bg: #3e4345;
+        --tags-active-color: #e8e6e3;
+        --tags-active-bg: #3e4345;
+
+        --recipe-placeholder: var(--color-grey-400);
+        --recipe-color: var(--color-white);
+        --recipe-serving-color: #e8e6e3;
+        --recipe-serving-bg: #2c2f31;
+        --recipe-serving-hover-bg: #3c444f;
+
+        --search-bg: var(--color-grey-950);
+        --search-border-color: var(--color-grey-500);
+        --search-input-border-color: var(--color-white);
+        --search-results-bg: var(--color-grey-950);
+        --search-results-border-color: var(--color-grey-500);
+
+        --home-gradient-1: #1B1D1E;
+        --home-gradient-bg: transparent;
+
+        --bgc-grey-100: #1B1D1E;
+        --site-bg: #181A1B;
+        --site-color: var(--color-white);
+        color-scheme: dark;
+    }
+}
+  
+[data-user-color-scheme='dark'] {
+    --background: var(--color-dark);
+  --text-color: var(--color-light);
+  --button-icon: var(--icon-sun);
+  --button-icon-filter: var(--icon-sun-filter);
+  --button-background: var(--color-light-alpha);
+  --button-color: var(--color-dark);
+  --border-color: var(--color-light-alpha);
+
+
+    --color-primary: hsl(from var(--primary-color) h s calc(l - 50));
+    --color-secondary: hsl(from var(--secondary-color) h s calc(l + 10));
+
+    --logo-primary-color: hsl(from var(--primary-color) h s calc(l - 25));
+
+    --card-color: var(--color-white);
+    --card-bg: #181A1B;
+    --card-tag-bg: var(--color-white);
+    --card-tag-color: var(--color-grey-900);
+    --card-placeholder: var(--color-grey-400);
+
+    --nav-color: var(--color-white);
+    --nav-active-bg: #2C2F31;
+    // --nav-active-color: var(--color-grey-900);
+    // --nav-hover-color: var(--color-grey-900);
+    --nav-hover-bg: #2C2F31;
+
+    --tags-color: #c3beb6;
+    --tags-hover-color: #e8e6e3;
+    --tags-hover-bg: #3e4345;
+    --tags-active-color: #e8e6e3;
+    --tags-active-bg: #3e4345;
+
+    --recipe-placeholder: var(--color-grey-400);
+    --recipe-color: var(--color-white);
+    --recipe-serving-color: #e8e6e3;
+    --recipe-serving-bg: #2c2f31;
+    --recipe-serving-hover-bg: #3c444f;
+
+    --search-bg: var(--color-grey-950);
+    --search-border-color: var(--color-grey-500);
+    --search-input-border-color: var(--color-white);
+    --search-results-bg: var(--color-grey-950);
+    --search-results-border-color: var(--color-grey-500);
+
+    --home-gradient-1: #1B1D1E;
+    --home-gradient-bg: transparent;
+
+    --bgc-grey-100: #1B1D1E;
+    --site-bg: #181A1B;
+    --site-color: var(--color-white);
+    color-scheme: dark;
+}
+
+
+
+
+.no-js .user-toggle {
+    display: none;
+  }
+  
+//   .user-toggle {
+//     margin: 2rem auto 0 auto;
+//     padding-top: 2.5rem;
+//     max-width: 20rem;
+//     border-top: 1px solid var(--border-color);
+//     text-align: center;
+//   }
+  
+  .toggle-button {
+    display: inline-flex;
+    background: var(--button-background);
+    color: var(--button-color);
+    border: none;
+    font: inherit;
+    // font-size: 1.5rem;
+    gap: .5em;
+    padding: .4rem .6rem;
+    align-items: center;
+    transition: background 500ms ease-in-out, color 200ms ease;
+  }
+  
+  .toggle-button__icon {
+    background: var(--button-icon);
+    width: 1.2em;
+    height: 1.2em;
+    filter: var(--button-icon-filter);
+    transform: translateY(1px); /* Optical adjustment */
+    transition: filter 500ms ease-in-out;
+  }
+  
+  .toggle-button:focus:focus-visible {
+    outline: 1px solid var(--button-background);
+    outline-offset: 0.5rem;
+  }
+  
+  
+
+
+
+
 body {
    display: flex;
    flex-direction: column;
+    background: var(--site-bg, vra(--color-white));
+    color: var(--site-color, vra(--color-grey-900));
+    transition: background 500ms ease-in-out, color 200ms ease;
 }

 main {
--- a/src/scss/_layout.scss
+++ b/src/scss/_layout.scss
@ -13,4 +13,5 @@

 .l-footer {
    margin-top: auto;
+    align-items: center;
 }
--- a/src/scss/_utility.scss
+++ b/src/scss/_utility.scss
@ -27,7 +27,7 @@


 .u-bgc-grey-100 {
-    background-color: var(--color-grey-100);
+    background-color: var(--bgc-grey-100, var(--color-grey-100));
 }

 .u-highlight {
@ -46,4 +46,16 @@

 .u-mb-large {
    margin-bottom: 30px;
+}
+
+.visually-hidden {
+    display: block;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px);
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(1px);
+    white-space: nowrap;
+    position: absolute;
 }
--- a/src/scss/components/_card.scss
+++ b/src/scss/components/_card.scss
@ -12,17 +12,17 @@
    display: flex;
    flex-direction: column;
    border-radius: 20px;
-    background-color: var(--color-white);
+    background-color: var(--card-bg, var(--color-white));
    box-shadow: var(--shadow-md);
    text-decoration: none;
-    color: var(--color-grey-900);
+    color: var(--card-color, var(--color-grey-900));
 }

 .c-card__image {
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
-    background-color: var(--color-grey-500); // fallback while image is loading
+    background-color: var(--card-placeholder, var(--color-grey-500)); // fallback while image is loading
    border-radius: 20px 20px 0 0;
 }

@ -33,6 +33,7 @@
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-primary);
+    min-height: calc(1.5em + (12px * 2));
 }

 .c-card__tag-abbr {
@ -46,8 +47,8 @@
    justify-content: center;
    align-items: center;
    font-weight: bold;
-    background-color: var(--color-grey-900);
-    color: var(--color-white);
+    background-color: var(--card-tag-bg, var(--color-grey-900));
+    color: var(--card-tag-color, var(--color-white));
    border-radius: 50%;
 }

@ -57,7 +58,7 @@

    svg {
        margin-right: 6px;
-        fill: var(--color-grey-900);
+        fill: var(--card-color, var(--color-grey-900));
    }
 }

@ -67,7 +68,7 @@
    align-items: center;
    padding: 12px 18px;
    text-decoration: none;
-    color: var(--color-grey-900);
+    color: var(--card-color, var(--color-grey-900));

    &::before {
        content: "";
@ -85,7 +86,7 @@
        &::before {
            outline: none;
            box-shadow: var(--shadow-lg);
-            color: var(--color-grey-900);
+            color: var(--card-color, var(--color-grey-900));
            text-decoration: none;
        }
    }
--- a/src/scss/components/_home.scss
+++ b/src/scss/components/_home.scss
@ -5,8 +5,8 @@
        z-index: -10;
        width: 100%;
        height: 400px;
-        background-image: linear-gradient(to bottom, var(--color-primary), var(--color-white));
-        background-color: hsla(0, 0%, 100%, .3);
+        background-image: linear-gradient(to bottom, var(--color-primary), var(--home-gradient-1, var(--color-white)));
+        background-color: var(--home-gradient-bg, hsla(0, 0%, 100%, .3));
        background-blend-mode: overlay;
    }
 }
--- a/src/scss/components/_nav.scss
+++ b/src/scss/components/_nav.scss
@ -27,7 +27,7 @@
 .c-nav__home {
    display: flex;
    align-items: center;
-    color: var(--color-grey-900);
+    color: var(--nav-color, var(--color-grey-900));
    text-decoration: none;

    &:hover, &:focus {
@ -51,19 +51,19 @@
 .c-nav__nav-item {
    padding: 4px 8px;
    display: flex;
-    color: var(--color-grey-900);
+    color: var(--nav-color, var(--color-grey-900));
    text-decoration: none;

    &:hover, &:focus {
        text-decoration: none;
-        background-color: var(--color-grey-900);
-        color: var(--color-white);
+        background-color: var(--nav-hover-bg, var(--color-grey-900));
+        color: var(--nav-hover-color, var(--color-white));
        border-radius: 6px;
    }
 }

 .c-nav__nav-item--active {
-    background-color: var(--color-grey-900);
-    color: var(--color-white);
+    background-color: var(--nav-active-bg, var(--color-grey-900));
+    color: var(--nav-active-color, var(--color-white));
    border-radius: 6px;
 }
--- a/src/scss/components/_recipe-tags.scss
+++ b/src/scss/components/_recipe-tags.scss
@ -8,7 +8,7 @@
 .c-tags__tag {
    display: inline-flex;
    padding: 2px 6px;
-    color: var(--color-grey-900);
+    color: var(--tags-color, var(--color-grey-900));
    text-decoration: none;
    border: 1px solid currentColor;
    border-radius: 8px;
@ -16,13 +16,13 @@

    &:hover, &:focus {
        text-decoration: none;
-        color: var(--color-white);
-        background-color: var(--color-grey-900);
+        color: var(--tags-hover-color, var(--color-white));
+        background-color: var(--tags-hover-bg, var(--color-grey-900));
    }
 }

 .c-tag__tag--selected {
-    color: var(--color-white);
-    background-color: var(--color-grey-900);
+    color: var(--tags-active-color, var(--color-white));
+    background-color: var(--tags-active-bg, var(--color-grey-900));
    border: 1px solid currentColor;
 }
--- a/src/scss/components/_recipe.scss
+++ b/src/scss/components/_recipe.scss
@ -5,7 +5,7 @@
    object-fit: cover;
    height: 50vh;
    min-height: 300px;
-    background-color: var(--color-grey-500); // fallback while image is loading
+    background-color: var(--recipe-placeholder, var(--color-grey-500)); // fallback while image is loading
 }

 .c-recipe__title {
@ -19,6 +19,7 @@
    }
    
    input[type="checkbox"] {
+        accent-color: var(--color-secondary);
        margin: 0;
        margin-inline-end: 6px;
    }
@ -29,7 +30,7 @@

    svg {
        margin-right: 6px;
-        fill: var(--color-grey-900);
+        fill: var(--recipe-color, var(--color-grey-900));
    }
 }

@ -74,13 +75,13 @@
    display: inline-flex;
    justify-content: center;
    align-items: center;
-    background-color: var(--color-grey-900);
+    background-color: var(--recipe-serving-bg, var(--color-grey-900));
    border: none;
    border-radius: 50%;
-    color: var(--color-white);
+    color: var(--recipe-serving-color, var(--color-white));

    &:hover, &:focus {
-        background-color: var(--color-grey-800);
+        background-color: var(--recipe-serving-hover-bg, var(--color-grey-800));
    }
 }

--- a/src/scss/components/_search.scss
+++ b/src/scss/components/_search.scss
@ -26,9 +26,9 @@
    top: 60px;
    right: 0;
    width: 100%;
-    background-color: var(--color-white);
+    background-color: var(--search-bg, var(--color-white));
    padding: 24px;
-    border: 1px solid var(--color-grey-300);
+    border: 1px solid var(--search-border-color, var(--color-grey-300));
    border-radius: 10px;
    box-shadow: var(--shadow-xl);
    font-size: 1rem;
@ -69,7 +69,7 @@
 .c-search__input {
    width: 100%;
    padding: 4px 12px;
-    border: 2px solid var(--color-grey-900);
+    border: 2px solid var(--search-input-border-color, var(--color-grey-900));
    border-radius: 30px;
 }

@ -77,7 +77,7 @@
    padding: 12px 18px 12px 46px;
    width: 100%;
    padding: 12px 18px 12px 46px;
-    border: 2px solid var(--color-grey-900);
+    border: 2px solid var(--search-input-border-color, var(--color-grey-900));
 }

 .c-search__close-button {
@ -126,8 +126,8 @@
    width: 100%;
    max-width: 500px;
    padding: 24px;
-    background-color: var(--color-white);
-    border: 1px solid var(--color-grey-300);
+    background-color: var(--search-results-bg, var(--color-white));
+    border: 1px solid var(--search-results-border-color, var(--color-grey-300));
    box-shadow: var(--shadow-xl);
    border-radius: 10px;
 }
Author	SHA1	Message	Date
TheThomaas	7f38a1e1dd	Added a theme toggle to the footer	2025-04-25 16:42:38 +02:00
TheThomaas	b1dd0cc07e	Add css variables to style components	2025-04-25 16:42:14 +02:00
TheThomaas	861af70dff	Update _layout.scss	2025-04-25 16:41:45 +02:00
TheThomaas	8350fd6422	Update icons to use dynamic colors	2025-04-25 16:41:10 +02:00
TheThomaas	f38a464c94	Add local Decap CMS	2025-04-21 17:41:45 +02:00