Changing the Code Block Theme

[neelakantan-ca]

How would I go about changing the theme for the code blocks ?

I tried generating a custom css file with hugo but it doesn't seem to change anything

hugo gen chromastyles --style=onedark > ./assets/css/custom.css

[jpanther]

What you are doing should work as the chroma styles are just included in the theme's main.css and the custom.css should override it. What behaviour are you seeing?

[g0rbe]

As i see, the style is ignored in dark mode.
Tested with Firefox and Chromium with hugo server --disableFastRender --forceSyncStatic --ignoreCache

[wolfspyre]

what happens if you wrap the entire output in dark... ie:

echo -e '/* wahoo what mind?  I dont think I need that anyways... */ \n.dark { \n ' >> myInsaneMind.css
hugo gen chromastyles --style=onedark  >>myInsaneMind.css
echo -e ' \n};\n' >> myInsaneMind.css

an then using that as your custom.css?
(I didn't wanna encourage you to blindly overwrite something that exists currently on the off change you've got other stuff in custom.css... but you could just as easily use ./assets/css/custom.css for the filename....

(( this is , assuming you didn't change the class name that's associated with dark mode in tailwind, but you'd prolly know that if you did ;) ))

[g0rbe]

Thanks! This solved the issue.
What i forgot to mention that i have a custom color scheme (no customization made beside this).
Skipped the code block theme settings, because this was not an important thing for me (just a good extra).

[wolfspyre]

woohoo! glad to hear it!

out of curiosity, what's yer custom color scheme look like?
what'd you use to create it?

mine:

/* WolfspyreLabs scheme */
:root {
/*  --color-neutral:   255, 255, 255; */

       --color-neutered:  68,  64,  60;
    --color-neutered-50: 250, 250, 249;
   --color-neutered-100: 245, 245, 244;
   --color-neutered-200: 231, 229, 228;
   --color-neutered-300: 214, 211, 209;
   --color-neutered-400: 168, 162, 158;
   --color-neutered-500: 120, 113, 108;
   --color-neutered-600:  87,  83,  78;
   --color-neutered-700:  68,  64,  60;
   --color-neutered-800:  41,  37,  36;
   --color-neutered-900:  28,  25,  23;
   --color-neutered-950:  14,  13,  12;

    --color-neutral: 107, 114, 128;
    --color-neutral-50: 249, 250, 251;
   --color-neutral-100: 243, 244, 246;
   --color-neutral-200: 229, 231, 235;
   --color-neutral-300: 209, 213, 219;
   --color-neutral-400: 156, 163, 175;
   --color-neutral-500: 107, 114, 128;
   --color-neutral-600:  75,  85,  99;
   --color-neutral-700:  55,  65,  81;
   --color-neutral-800:  31,  41,  55;
   --color-neutral-900:  17,  24,  39;
   --color-neutral-950:  3,    7,  18;

       --color-primary:  40,  81, 146;
    --color-primary-50: 241, 245, 251;
   --color-primary-100: 227, 235, 247;
   --color-primary-200: 199, 215, 240;
   --color-primary-300: 171, 194, 232;
   --color-primary-400: 143, 174, 224;
   --color-primary-500: 101, 144, 213;
   --color-primary-600:  48,  97, 175;
   --color-primary-700:  40,  81, 146;
   --color-primary-800:  32,  64, 117;
   --color-primary-900:  24,  48,  88;
   --color-primary-950:  12,  24,  44;


     --color-secondary:  95,  85, 130;
  --color-secondary-50: 237, 229, 254;
 --color-secondary-100: 209, 199, 244;
 --color-secondary-200: 189, 179, 224;
 --color-secondary-300: 169, 159, 204;
 --color-secondary-400: 157, 147, 192;
 --color-secondary-500: 145, 135, 180;
 --color-secondary-600: 120, 110, 155;
 --color-secondary-700:  95,  85, 130;
 --color-secondary-800:  75,  65, 105;
 --color-secondary-900:  50,  40,  80;
 --color-secondary-950:  20,  10,  50;
}

can see it demo deployed here (still a WIP)

[g0rbe]

I'm testing/"playing" with multiple style.
I found this site: https://www.tailwindshades.com/

[wolfspyre]

that’s super cool!! thanks for sharing!