Changing colour schemes with light/dark mode toggle?

[LukasScarfe]

Hey everyone, I am absolutely not a web developer, but am using blowfish for my personal site. I am not sure if I have just missed something in the documentation, but is it possible to use two completely different colour schemes when toggling between light and dark mode? I have a logo with 2 different colour options, both equally valid, and I would really like to be able to do this.

[ZhenShuo2021]

Try this

/* Blowfish scheme */
:root {
  --color-neutral: 255, 255, 255;
  /* Gray */
  --color-neutral-50: 248, 250, 252;
  --color-neutral-100: 241, 245, 249;
  --color-neutral-200: 226, 232, 240;
  --color-neutral-300: 203, 213, 225;
  --color-neutral-400: 148, 163, 184;
  --color-neutral-500: 100, 116, 139;
  --color-neutral-600: 71, 85, 105;
  --color-neutral-700: 51, 65, 85;
  --color-neutral-800: 30, 41, 59;
  --color-neutral-900: 15, 23, 42;
  /* Blue */
  --color-primary-50: 239, 246, 255;
  --color-primary-100: 219, 234, 254;
  --color-primary-200: 191, 219, 254;
  --color-primary-300: 147, 197, 253;
  --color-primary-400: 96, 165, 250;
  --color-primary-500: 59, 130, 246;
  --color-primary-600: 37, 99, 235;
  --color-primary-700: 29, 78, 216;
  --color-primary-800: 30, 64, 175;
  --color-primary-900: 30, 58, 138;
  /* Cyan */
  --color-secondary-50: 236, 254, 255;
  --color-secondary-100: 207, 250, 254;
  --color-secondary-200: 165, 243, 252;
  --color-secondary-300: 103, 232, 249;
  --color-secondary-400: 34, 211, 238;
  --color-secondary-500: 6, 182, 212;
  --color-secondary-600: 8, 145, 178;
  --color-secondary-700: 14, 116, 144;
  --color-secondary-800: 21, 94, 117;
  --color-secondary-900: 22, 78, 99;
}
/* Github scheme */
.dark {
  --color-neutral: 255, 255, 255;
  --color-neutral-50: 248, 250, 252;
  --color-neutral-100: 241, 245, 249;
  --color-neutral-200: 226, 232, 240;
  --color-neutral-300: 203, 213, 225;
  --color-neutral-400: 148, 163, 184;
  --color-neutral-500: 100, 116, 139;
  --color-neutral-600: 71, 85, 105;
  --color-neutral-700: 51, 57, 65;
  --color-neutral-800: 20, 25, 31;
  --color-neutral-900: 15, 23, 42;

  --color-primary-50: 226, 242, 255;
  --color-primary-100: 186, 221, 255;
  --color-primary-200: 141, 201, 255;
  --color-primary-300: 91, 179, 255;
  --color-primary-400: 50, 162, 255;
  --color-primary-500: 0, 146, 255;
  --color-primary-600: 23, 131, 255;
  --color-primary-700: 31, 113, 235;
  --color-primary-800: 35, 95, 216;
  --color-primary-900: 38, 61, 185;

  --color-secondary-50: 255, 236, 241;
  --color-secondary-100: 255, 208, 218;
  --color-secondary-200: 253, 157, 166;
  --color-secondary-300: 249, 117, 130;
  --color-secondary-400: 255, 79, 98;
  --color-secondary-500: 255, 57, 73;
  --color-secondary-600: 255, 48, 72;
  --color-secondary-700: 237, 36, 65;
  --color-secondary-800: 224, 27, 58;
  --color-secondary-900: 209, 4, 45;
}

[LukasScarfe]

I appreciate the help! This works exactly as I expected. Maybe I should go through the Hugo documentation a bit closer so that I can better understand the options available

Followup

Is there then a way for me to swap out figures in my markdown based on the colour scheme similar to how to the logo can do this with logo and secondarylogo?

[ZhenShuo2021]

You can create a custom shortcode to switch images:

swap-img.html

{{ $lightPath := .Get "light" }}
{{ $darkPath := .Get "dark" }}
{{ $alt := .Get "alt" }}

{{ $light := or (.Page.Resources.GetMatch $lightPath) (resources.Get $lightPath) }}
{{ $dark := or (.Page.Resources.GetMatch $darkPath) (resources.Get $darkPath) }}

<div>
  {{ with $light }}
    <img src="{{ .RelPermalink }}" class="block dark:hidden" alt="{{ $alt }}">
  {{ end }}
  {{ with $dark }}
    <img src="{{ .RelPermalink }}" class="hidden dark:block" alt="{{ $alt }}">
  {{ end }}
</div>

And in your markdown:

{{< swap-img light="light-image.png" dark="dark-image.png" alt="Description" >}}