This template snippet allows you to override all colour variables in Willemstad.
**To use the following template snippet:**
1. **Setup:** Save this as a CSS snippet in your vault's `.obsidian/snippets/` folder, enable it in Settings → Appearance → CSS Snippets, then activate "Enable User-Set Colours via Template for Light Mode" and/or "Enable User-Set Colours via Template for Dark Mode" in Style Settings → Global Colours.
2. **Customise:** Replace the commented placeholders (like `/* #your-red-color */`) with your actual colour values using any valid CSS format - hex codes like `#ff0000`, HSL like `hsl(200, 50%, 30%)`, or even other CSS variables like `var(--my-custom-colour)` - and see your changes applied immediately throughout the interface.
```scss
/*
* ===================================================================
* WILLEMSTAD > THEME COLOUR CUSTOMISATIONS
* ===================================================================
*
* HOW TO USE:
* 0. Obsidian sets accent colours (--color-accent), rainbow colours (--color-red, etc.)
* and background colours (--color-base) to colour the whole application.
*
* 1. This file allows you to inject your own custom colors into the application.
*
* 2. It works by setting the highest-priority color variables (`--color-tmp-l-*`
* for light mode and `--color-tmp-d-*` for dark mode). This is similar for the rest.
*
* 3. For these styles to take effect, the application must be running with the
* correct template classes enabled via Style Settings:
* - Light mode: "Enable User-Set Colours via Template for Light Mode"
* - Dark mode: "Enable User-Set Colours via Template for Dark Mode"
*
*
* INSTRUCTIONS:
* - Find the color you want to change in the list below.
* - Replace the commented placeholder (/ * #your-color * /) with your actual color.
* - You can use any valid CSS color format: hex (#RRGGBB), rgb(), hsl(), lch(), oklch() etc.
*
* TIP:
* Use your browser's developer tools to inspect an element and see which
* `--color-*` variable it's using.
*
* ===================================================================
*/
.theme-light.ssopt-custom-colour-template-light {
/*
-------------------------------------------------
| LIGHT THEME OVERRIDES |
-------------------------------------------------
*/
/* --- Rainbow Colours (Light Mode) --- */
--color-tmp-l-red: /* #your-red-color */; /* feeds into --color-red */
--color-tmp-l-orange: /* #your-orange-color */; /* feeds into --color-orange */
--color-tmp-l-yellow: /* #your-yellow-color */; /* feeds into --color-yellow */
--color-tmp-l-green: /* #your-green-color */; /* feeds into --color-green */
--color-tmp-l-cyan: /* #your-cyan-color */; /* feeds into --color-cyan */
--color-tmp-l-blue: /* #your-blue-color */; /* feeds into --color-blue */
--color-tmp-l-purple: /* #your-purple-color */; /* feeds into --color-purple */
--color-tmp-l-pink: /* #your-pink-color */; /* feeds into --color-pink */
/* --- Accent Colours (Light Mode) --- */
/* Primary accent - main interactive colour */
--color-tmp-l-accent: /* #your-primary-accent */; /* feeds into --color-accent */
/* Secondary accent - supporting interactive colour */
--color-tmp-l-accent-1: /* #your-secondary-accent */; /* feeds into --color-accent-1 */
/* Tertiary accent - subtle interactive colour */
--color-tmp-l-accent-2: /* #your-tertiary-accent */; /* feeds into --color-accent-2 */
/* Hover states */
--color-tmp-l-accent-hover: /* #your-accent-hover */; /* feeds into --color-accent-hover */
--color-tmp-l-accent-1-hover: /* #your-accent-1-hover */; /* feeds into --color-accent-1-hover */
--color-tmp-l-accent-2-hover: /* #your-accent-2-hover */; /* feeds into --color-accent-2-hover */
/* --- Base Colour Scale (Light Mode) --- */
--color-base-00: /* #your-color */; /* background-primary */
--color-base-05: /* #your-color */;
--color-base-10: /* #your-color */; /* background-primary-alt */
--color-base-15: /* #your-color */;
--color-base-20: /* #your-color */; /* background-secondary, interactive-normal */
--color-base-25: /* #your-color */; /* background-secondary-alt */
--color-base-30: /* #your-color */; /* interactive-hover */
--color-base-35: /* #your-color */; /* background-modifier-border */
--color-base-40: /* #your-color */; /* interactive-focus, background-modifier-border-hover */
--color-base-45: /* #your-color */; /* text-faint, background-modifier-border-focus */
--color-base-50: /* #your-color */;
--color-base-55: /* #your-color */;
--color-base-60: /* #your-color */; /* text-muted */
--color-base-65: /* #your-color */;
--color-base-70: /* #your-color */;
--color-base-75: /* #your-color */;
--color-base-80: /* #your-color */;
--color-base-85: /* #your-color */;
--color-base-90: /* #your-color */;
--color-base-95: /* #your-color */;
--color-base-100: /* #your-color */; /* text-normal */
}
.theme-dark.ssopt-custom-colour-template-dark {
/*
-------------------------------------------------
| DARK THEME OVERRIDES |
-------------------------------------------------
*/
/* --- Rainbow Colours (Dark Mode) --- */
--color-tmp-d-red: /* #your-red-color */; /* feeds into --color-red */
--color-tmp-d-orange: /* #your-orange-color */; /* feeds into --color-orange */
--color-tmp-d-yellow: /* #your-yellow-color */; /* feeds into --color-yellow */
--color-tmp-d-green: /* #your-green-color */; /* feeds into --color-green */
--color-tmp-d-cyan: /* #your-cyan-color */; /* feeds into --color-cyan */
--color-tmp-d-blue: /* #your-blue-color */; /* feeds into --color-blue */
--color-tmp-d-purple: /* #your-purple-color */; /* feeds into --color-purple */
--color-tmp-d-pink: /* #your-pink-color */; /* feeds into --color-pink */
/* --- Accent Colours (Dark Mode) --- */
/* Primary accent - main interactive colour */
--color-tmp-d-accent: /* #your-primary-accent */; /* feeds into --color-accent */
/* Secondary accent - supporting interactive colour */
--color-tmp-d-accent-1: /* #your-secondary-accent */; /* feeds into --color-accent-1 */
/* Tertiary accent - subtle interactive colour */
--color-tmp-d-accent-2: /* #your-tertiary-accent */; /* feeds into --color-accent-2 */
/* Hover states */
--color-tmp-d-accent-hover: /* #your-accent-hover */; /* feeds into --color-accent-hover */
--color-tmp-d-accent-1-hover: /* #your-accent-1-hover */; /* feeds into --color-accent-1-hover */
--color-tmp-d-accent-2-hover: /* #your-accent-2-hover */; /* feeds into --color-accent-2-hover */
/* --- Base Colour Scale (Dark Mode) --- */
--color-base-00: /* #your-color */; /* background-primary */
--color-base-05: /* #your-color */;
--color-base-10: /* #your-color */; /* background-primary-alt */
--color-base-15: /* #your-color */;
--color-base-20: /* #your-color */; /* background-secondary, interactive-normal */
--color-base-25: /* #your-color */; /* background-secondary-alt */
--color-base-30: /* #your-color */; /* interactive-hover */
--color-base-35: /* #your-color */; /* background-modifier-border */
--color-base-40: /* #your-color */; /* interactive-focus, background-modifier-border-hover */
--color-base-45: /* #your-color */; /* text-faint, background-modifier-border-focus */
--color-base-50: /* #your-color */;
--color-base-55: /* #your-color */;
--color-base-60: /* #your-color */; /* text-muted */
--color-base-65: /* #your-color */;
--color-base-70: /* #your-color */;
--color-base-75: /* #your-color */;
--color-base-80: /* #your-color */;
--color-base-85: /* #your-color */;
--color-base-90: /* #your-color */;
--color-base-95: /* #your-color */;
--color-base-100: /* #your-color */; /* text-normal */
}
/*
* ===================================================================
* USAGE EXAMPLES
* ===================================================================
*/
/*
Example 1: Custom Brand Colours
.theme-light.ssopt-custom-colour-template-light {
--color-tmp-l-accent: #0066cc; // Company blue
--color-tmp-l-accent-1: #ff6600; // Company orange
--color-tmp-l-accent-2: #00cc66; // Company green
}
Example 2: Solarized-inspired Base Colours
.theme-light.ssopt-custom-colour-template-light {
--color-base-00: #fdf6e3; // Base3
--color-base-10: #eee8d5; // Base2
--color-base-20: #93a1a1; // Base1
--color-base-50: #657b83; // Base0
--color-base-80: #586e75; // Base01
--color-base-90: #073642; // Base02
--color-base-100: #002b36; // Base03
}
Example 3: High Contrast Dark Mode
.theme-dark.ssopt-custom-colour-template-dark {
--color-base-00: #000000; // Pure black
--color-base-20: #1a1a1a; // Dark grey
--color-base-50: #404040; // Mid grey
--color-base-80: #cccccc; // Light grey
--color-base-100: #ffffff; // Pure white
}
*/
```