Theme Customization Discussion

Discuss customization techniques and share your custom themes!

Start New Discussion

How to Customize Color Variables?

Posted by @johng • 2 days ago

I'm trying to modify the accent color in my Latte theme. I noticed there are variables in the CSS, but how do I override them properly?

Re:

Posted by @catppuccin_dev • 1 day ago

Great question! Catppuccin themes use CSS variables like --ctp-latte-base. You can customize them by editing the theme's root level. Here's a quick example:

.catppuccin-mocha {
  --ctp-mocha-base: #1e1e2e;
  --ctp-mocha-orange: #f2cdcd;
  --ctp-mocha-rosewater: #f5f5f5;
}

Better check the theme documentation for your specific port for detailed instructions.

Re:

Posted by @sarahcoder • 12 hours ago

I'd also recommend creating a custom.css file instead of modifying the core theme files. You can override the variables there and import it last:

@import "catppuccin-latte";
@import "my-custom-themes.css";

Sharing My Custom Macchiato Theme

Posted by @pixelninja • Today

I created a darker Macchiato variant with custom blue accents! It's great for OLED monitors. I'd love feedback:

:root {
  --ctp-macchiato-base: #1a1a1a;
  --ctp-macchiato-accent: #89b4fa;
  --ctp-macchiato-literal: #f2cdcd;
}

Start a Discussion