It's looking colourful around here!

07 Mar, 2026

Ever since I discovered the wonderful color theme that is catppuccin, I've been looking for a way to integrate all the colors in a way that showcases them all. At the moment it only features the colors from the Latte and Mocha flavours (my 2 personal favourites and the palettes that make up the light and dark themes of this blog).

You can see what happens simply by refreshing this page :D

Now, while mixing and matching the colors (they do all look good together) would look good, a lot of my design philosophy is to keep things simple and streamlined. The current implementation strives to showcase all the colors equally and currently applies to anything that isn't normal text (I think this is how it is in spec, though Catppuccin has always been about making it fit in your own way)

If anyone wishes to use this in their own theming, simply add this snippet to your footer directives (you will need a premium account sorry 😔)

<script>
const Colors = [
  "red", "maroon", "peach", "yellow", "green", "teal", 
  "sky", "sapphire", "blue", "lavender", "rosewater", 
  "flamingo", "pink", "mauve"
]
function randomiseColor() {
  const chosenColor = Colors[Math.floor(Math.random() * Colors.length)];

  document.documentElement.style.setProperty(
    "--accent-color",
    `var(--cp-color-${chosenColor})`,
  );

  console.log(`Color set to: ${chosenColor}`);
}

randomiseColor();
</script>

And the following to the :root: section of your theme

  color-scheme: light dark;
  --cp-color-red: light-dark(#d20f39,#f38ba8);
  --cp-color-maroon: light-dark(#e64553, #eba0ac);
  --cp-color-peach: light-dark(#fe640b, #fab387);
  --cp-color-yellow: light-dark(#df8e1d, #f9e2af);
  --cp-color-green: light-dark(#40a02b, #a6e3a1);
  --cp-color-teal: light-dark(#179299, #94e2d5);
  --cp-color-sky: light-dark(#04a5e5, #89dceb);
  --cp-color-sapphire: light-dark(#209fb5, #74c7ec);
  --cp-color-blue: light-dark(#1e66f5, #89b4fa);
  --cp-color-lavender: light-dark(#7287fd, #b4befe);
  --cp-color-rosewater: light-dark(#dc8a78, #f5e0dc);
  --cp-color-flamingo: light-dark(#dd7878, #f2cdcd);
  --cp-color-pink: light-dark(#ea76cb, #f5c2e7);
  --cp-color-mauve: light-dark(#8839ef, #cba6f7);

  --accent-color: var(--cp-color-red)

Setting the color of anything should be as simple as changing the value of anything you want to change color to var(--accent-color). It also comes with light and dark mode support out of the box. My personal setup includes header colors and link colors with extra theming done to all the colors in a code block.

If you have any issues or need more help setting it up on your own site, please feel free to drop me a message on my Guestbook or you can contact me at hello@tylerguy.blog