# Useful CSS Stuff

**URL:** <https://forum.inductiveautomation.com/t/useful-css-stuff/95414>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 2, 2024, 1:58am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414 "2024-09-02T01:58:19Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 16, 2024, 12:58pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/7 "2024-09-16T12:58:20Z")

</div>

Your post kickstarted a rework of how I theme things, so thanks for that.

I'll suggest one thing though: using `color-mix` to generate palettes based on a key color value.

For example, your danger palette could be written like this, basing the key value on the built-in `--error`:

```cs
--palette-danger: var(--error);

--palette-error-0: color-mix(in srgb, var(--palette-error) 0%, white);
--palette-error-50: color-mix(in srgb, var(--palette-error) 10%, white);
--palette-error-100:	color-mix(in srgb, var(--palette-error) 20%, white);
--palette-error-150:	color-mix(in srgb, var(--palette-error) 30%, white);
--palette-error-200:	color-mix(in srgb, var(--palette-error) 40%, white);
--palette-error-250:	color-mix(in srgb, var(--palette-error) 50%, white);
--palette-error-300:	color-mix(in srgb, var(--palette-error) 60%, white);
--palette-error-350:	color-mix(in srgb, var(--palette-error) 70%, white);
--palette-error-400:	color-mix(in srgb, var(--palette-error) 80%, white);
--palette-error-450:	color-mix(in srgb, var(--palette-error) 90%, white);
--palette-error-500:	color-mix(in srgb, var(--palette-error) 100%, white);
--palette-error-550:	color-mix(in srgb, var(--palette-error) 90%, black);
--palette-error-600:	color-mix(in srgb, var(--palette-error) 80%, black);
--palette-error-650:	color-mix(in srgb, var(--palette-error) 70%, black);
--palette-error-700:	color-mix(in srgb, var(--palette-error) 60%, black);
--palette-error-750:	color-mix(in srgb, var(--palette-error) 50%, black);
--palette-error-800:	color-mix(in srgb, var(--palette-error) 40%, black);
--palette-error-850:	color-mix(in srgb, var(--palette-error) 30%, black);
--palette-error-900:	color-mix(in srgb, var(--palette-error) 20%, black);
--palette-error-950:	color-mix(in srgb, var(--palette-error) 10%, black);
--palette-error-1000:	color-mix(in srgb, var(--palette-error) 0%, black);

```

There are a few more nuances but don't mind those. Here's a comparison, the top one is using this palette, the bottom one is the danger palette you posted.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/9/19545f2a760fd14c0ab5f58ce46c2de0dfcf4940.png)

There might be a better color space to use with `color-mix`, or maybe it can be parameterized better, but I still have to dive into this.  
Now, This may not be game changing for you, as you already have a full css setup and I believe, some processing to generate your css, but for someone who wants to start creating palettes, this can change the whole game, especially if you base your key colors on built-in colors, then the whole thing sticks to the theme without having to actually touch theme files.

edit:  
error, warning, primary, success and neutral, based respectively on `--error`, `--warning`, `--info`, `--success` and `--neutral-50`

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/7/c7ec02fa7b8cd1ac4d6af23e2efb56d3096a9939.png)

---

_[View the full topic](https://forum.inductiveautomation.com/t/useful-css-stuff/95414)._