# Useful CSS Stuff **URL:** \ **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:** 20\ **Page:** 4
**Author:** ![dillon](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dillon/32/81537_2.png) [@dillon](https://forum.inductiveautomation.com/u/dillon)\ **Post date:** [December 3, 2025, 3:59pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/61 "2025-12-03T15:59:07Z")
> [@nminchin](#): > > Do you find this? No, I try to keep most things consistent like you do, seeing your shared iterations. This was more geared towards widgets in the Dashboard component. If they have it take up half of the screen, there is a lot of space available to make the text bigger. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [December 6, 2025, 11:52am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/62 "2025-12-06T11:52:17Z")
# Alternative Alarm Status Table Styling - Use Pills for Priority and State columns Disclaimer: I haven’t tested any of this all that thoroughly yet! I had a request from a customer to change the alarm status table styles. This was a bit of fun (and headache). ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/0/603dbc7656b437d42c3946d8a6336003206acb02.png) This requires CSS and a bit of JS injection (required for the splitting of the **State** values). It has a number of parts: 1. Alarm Status Table component which contains specific rowStyles 2. Markdown Javascript injector component which converts the State column text into separate components and adds them into a flex 3. CSS to add to the Advanced Stylesheet If you just want to import a single View, here’s the project export in 8.3.2. You’ll still need to copy in the styling into the adv. stylesheet though. [AlarmStatusTable-AlternateStyling.zip](https://forum.inductiveautomation.com/uploads/short-url/bxmxvvFb25YMjEu797rw3iS37uk.zip) (44.2 KB) They also wanted the datetime formatted differently as well, in case you want this too. If so, replace the Markdown above with this version: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6dbd7780e739da6fb8086919f6ff6960538898a6.png) > **Markdown JS Injector (State & Datetime mods) - Copy JSON and Paste into the View containing the AST** > > ```json > [ > { > "type": "ia.display.markdown", > "version": 0, > "props": { > "style": { > "position": "absolute" > }, > "markdown": { > "escapeHtml": false > } > }, > "meta": { > "name": "JSInject_ConvertStateColToPillBoxes_0" > }, > "position": { > "shrink": 0, > "basis": 0 > }, > "custom": { > "inlineJavascript": "(() => {\n const styleAlarmStates = () => {\n document.querySelectorAll(\".ia_table__cell[data-column-id=state]:not(.ia_table__head __header__ cell) .content > div\").forEach(el => {\n if (el.querySelector(\".custom_alarmStatusTable__stateCol_pill\"))\n return;\n const text = el.textContent.trim();\n if (!text)\n return;\n const parts = text.split(\",\").map(s => s.trim());\n const classMap = {\n \"Active\": \"custom_alarmStatusTable__stateCol_active\",\n \"Cleared\": \"custom_alarmStatusTable __stateCol_cleared\",\n \"Acknowledged\": \"custom_alarmStatusTable__ stateCol_ack\",\n \"Unacknowledged\": \"custom_alarmStatusTable__stateCol_unack\"\n };\n const pills = parts.map(part => {\n const stateClass = classMap[part] || \"\";\n return \"\" + part + \"\";\n }).join(\"\");\n el.innerHTML = \"
\" + pills + \"
\";\n });\n };\n\n const formatDateTimeCells = () => {\n document.querySelectorAll('.alarmStatusTable .ia_table__cell:not(.ia_table __head__ header__cell) .content > div').forEach(div => {\n const title = div.getAttribute('title');\n const datetimeRegex = /^\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2}\\.\\d{3}[+-]\\d{4}$/;\n \n if (title && datetimeRegex.test(title) && !div.querySelector('div[style*=\"flex\"]')) {\n const text = div.textContent.trim();\n const parts = text.split(' ');\n \n if (parts.length >= 5) {\n const date = parts.slice(0, 3).join(' ').trim();\n const time = parts.slice(3).join(' ').trim();\n \n div.innerHTML = `\n
\n
${date}
\n
${time}
\n
\n `;\n }\n }\n });\n };\n\n const setupObserver = () => {\n let rafId;\n const observer = new MutationObserver(() => {\n if (rafId)\n return;\n rafId = requestAnimationFrame(() => {\n styleAlarmStates();\n formatDateTimeCells();\n rafId = null;\n });\n });\n const tableContainer = document.querySelector(\".ReactVirtualized__Grid__innerScrollContainer\");\n if (tableContainer) {\n styleAlarmStates();\n formatDateTimeCells();\n observer.observe(tableContainer, {\n childList: true,\n attributes: true,\n subtree: true,\n attributeFilter: [\"title\", \"style\"]\n });\n }\n };\n\n const visibilityObserver = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n if (mutation.type === \"attributes\" &&\n mutation.attributeName === \"style\" &&\n mutation.target.getAttribute(\"data-component\") === \"ia.display.alarmstatustable\" &&\n mutation.target.style.display !== \"none\") {\n console.log(\"alarmStatusTable visibility observer fired\");\n if (document.querySelector(\".ReactVirtualized__Grid__innerScrollContainer\")) {\n setupObserver();\n } else {\n const revealWaitObserver = new MutationObserver(() => {\n if (document.querySelector(\".ReactVirtualized__Grid__innerScrollContainer\")) {\n revealWaitObserver.disconnect();\n setupObserver();\n }\n });\n revealWaitObserver.observe(document.body, {\n childList: true,\n subtree: true\n });\n }\n }\n }\n });\n\n visibilityObserver.observe(document.body, {\n subtree: true,\n attributes: true,\n attributeFilter: [\"style\"]\n });\n\n setupObserver();\n if (!document.querySelector(\".ReactVirtualized__Grid__innerScrollContainer\")) {\n const waitObserver = new MutationObserver(() => {\n if (document.querySelector(\".ReactVirtualized__Grid__innerScrollContainer\")) {\n waitObserver.disconnect();\n setupObserver();\n }\n });\n waitObserver.observe(document.body, {\n childList: true,\n subtree: true\n });\n }\n})();" > }, > "propConfig": { > "props.source": { > "binding": { > "config": { > "struct": { > "script": "{this.custom.inlineJavascript}" > }, > "waitOnAll": true > }, > "transforms": [ > { > "code": "#\tcode = \"'\n#\t\n#\tcode = code.replace(\"\\n\", \"\").replace(\"\\t\", \"\").replace(\"\\n\", \"\").replace(\"\\r\", \"\").replace(\"\\r\", \"\").replace(\" \", \" \").replace(\" \", \" \").replace(\" \", \" \").replace(\" \", \" \")\n#\t\n#\treturn code\n\tscript = value.script\n\tscript = script.replace('\"', '"')\n\tscript = script.replace('\\n', '').replace('\\t', '').replace('\\r', '')\n\t\n\t# Collapse multiple spaces - repeat until stable\n\twhile ' ' in script:\n\t script = script.replace(' ', ' ')\n\t\n\tcode = ''.format(script)\n\treturn code", > "type": "script" > } > ], > "type": "expr-struct" > } > } > } > } > ] > > ``` Edit: Updated the Markdown JSON (State & Datetime mods version only) with a fix to address the AST not re-formatting when it’s hidden and shown again by toggling the `display` prop ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [December 11, 2025, 2:31am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/63 "2025-12-11T02:31:18Z")
## HSL (“human readable”) Colour Cheat Sheet I've added this to a few posts now before realising it really belongs here… I made an HSL cheat sheet in Perspective to help remember the Hue values in the human-readable HSL colour format (as opposed to the relatively human-unintelligable RGB). And if you need help convincing why you should abandon RGB for HSL: > [@\[BUG-3882\] Perspective colour properties not showing HSL colour in preview](https://forum.inductiveautomation.com/t/bug-3882-perspective-colour-properties-not-showing-hsl-colour-in-preview/49878/4): > > Say you have rgb 85, 186, 146 or #55ba92 Firstly, without looking it up, what colour is that? How bright is it? (you can get a rough idea) What kind of saturation is it? (again, rough idea) Now, I want to lower the saturation and keep the same hue. exploding_head What about changing the brightness while keeping hue? exploding_head HSL. Knowing that Saturation and Lightness are in %, and Hue is from 0 to 360deg and that each main colour is every 30 degrees (0 red, 30 orange, 60 yellow, e… ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/3/b32566a422bd59407457dba4b5b3f3964d85442b.png) View Exports: [HSL Cheat Sheet.zip](https://forum.inductiveautomation.com/uploads/short-url/t5zmywFce0rkswWMZScggxTYxpg.zip) (27.8 KB) ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [March 3, 2026, 8:51pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/64 "2026-03-03T20:51:52Z")
Imagine a scenario where you have a rotation animation in a css style. If you try to apply that to a sub-element of an SVG it will rotate out of frame because SVGs anchor at 0,0 instead of center. Apply this style along with your spinner animation to rotate a sub-element of an SVG around its center `.psc-center-origin{` ` transform-origin: center;` ` transform-box: fill-box;` `}` ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [March 3, 2026, 10:45pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/65 "2026-03-03T22:45:43Z")
> [@dkhayes117](#): > > - `cqw`: 1% of a query container's width > - `cqh`: 1% of a query container's height > - `cqi`: 1% of a query container's inline size > - `cqb`: 1% of a query container's block size > - `cqmin`: The smaller value of either `cqi` or `cqb` > - `cqmax`: The larger value of either `cqi` or `cqb` I looked into this again briefly. A comment, you need to set a parent “container” to be a container for this to work. If you don’t, the page container is used and the units don’t behave any different to vh and vw. E.g. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/1/7164f7560354e1da7106921c62dc3702a8558d02.png) However, as I suspected, using these units and always setting the container to be the embedded view or the parent container (flex/coord/etc) will result in a vast array of differing font sizes, since it’s based on the size of the container (embedded view / flex container / etc) and these will more than likely be different for different elements. See the example above, where the top and bottom embedded views are both instances of the same view, but one is made wider resulting in the font size being larger. I thought I had font sizes mostly sorted with `rem` units and media queries to set the root font-size based on screen size, however a colleague came to me yesterday with an issue where he’s embedded main overview views onto a wider overview page where the embedded main overviews are made smaller to fit on the 1 page, and obviously the font size is now still relative to screen size rather than the size of the embedded view container, and hence the fonts are too big to fit… Using container query units would fix this, however at the expense of standardised font sizes which makes it look unprofessional… the font size saga continues. > **Waffle…** > > Edit: The above is true for `cqw` and `cqh`, but `cqmax` and `cqmin` (and by extension the i and b units) don’t seem to have this behaviour… 🫪 i.e. below blue bordered containers are the same embedded views at different sizes. the cqmax labels, despite being contained within different max-size containers, are both the same size. Whereas the cqw labels are different sizes. I need to read up more on how the cqi and cqb units work.. > > ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/4/747d460a2bb415f16d3b262e0e5a79c59bf0da5d.png) > > Edit2: > > OK, so `container-type: inline-size` only looks at the width, for a horizontal language like English, and `cqmax` looks at both width (i - inline) and height (b - block), and because `inline-size` only provides the width, this container is ignored and it searches further up the tree until it finds a `container-type: size` which provides both width and height, or the viewport itself. So if I set the embedded views instead to `container-type: size`, they become effectively the same size as `cqw` in this instance.. > > ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/4/b4385aa71a64d8b8b79fe4bb35080d368bb93464.png) ---
**Author:** ![Chris\_Bingham](https://avatars.discourse-cdn.com/v4/letter/c/e5b9ba/32.png) [@Chris\_Bingham](https://forum.inductiveautomation.com/u/Chris_Bingham)\ **Post date:** [March 3, 2026, 11:28pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/66 "2026-03-03T23:28:05Z")
> [@nminchin](#): > > the font size saga continues I’m glad I’m not alone… 🫩 ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [March 4, 2026, 8:07am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/67 "2026-03-04T08:07:39Z")
I’m not worried, I haven’t been using Perspective for very long, only like 7 years. Font sizing is a pretty advanced topic 🙂 ---
**Author:** ![hlam](https://avatars.discourse-cdn.com/v4/letter/h/ea666f/32.png) [@hlam](https://forum.inductiveautomation.com/u/hlam)\ **Post date:** [March 21, 2026, 1:00am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/68 "2026-03-21T01:00:05Z")
I did notice that the state pill boxes are inconsistent when using this as a docked view. Sometimes they transform and sometimes they dont. That’s the only bug that I have observed. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [March 24, 2026, 5:56am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/69 "2026-03-24T05:56:07Z")
I updated the Markdown JSON for the state and datetime version to address something similar. Not sure if it also addresses your issue. ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [May 18, 2026, 3:13pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/70 "2026-05-18T15:13:02Z")
Imagine a scenario where a customer has Aveva and are resisting moving to Perspective because they want to retain the fancy graphics you find in Aveva. Here's a style that mimics Aveva displays. ```css .psc-aveva-border{ background-image: linear-gradient(to bottom, rgb(155,155,155), rgb(20,30,20) 15px, rgb(85,85,80)); border-radius: 10px; border-style: solid; border-width: 3px; box-shadow: 1px 3px 4px 1px rgba(255, 255, 255, 0.7); } ``` Here's what it looks in Perspective on a quick and dirty screen I made. ![Ignition Aveva Tank](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/b/2b99a816306964117e4e56da54ad567ceacc5142.png) The level indicator is just a flex container with a label in it. The Aveva style applied to the flex container (set justify to flex-end) and a basic gradient style applied to the level indicator (a label). The level display label gets its basis % controlled by a binding. The tank is just a basic tank SVG I drew but you could use any kind of tank drawing. I'm assuming I'm not the only one being challenged to apply the same level of graphics as customers have in their Aveva installs. Not everyone is pushing for ISA 101. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [May 18, 2026, 9:45pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/71 "2026-05-18T21:45:37Z")
Your usage of rgb instead of hsl makes me sad 😔 I just went through a new project that we started and replaced all rgb/hex I could find. So much nicer being able to see the hues used rather than mixes of light in different quantities 😵 Otherwise though, it looks super simple to implement. Get em across the line, then gradually over time bring those gradient colours closer together until they're identical 😂 ---
**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\ **Post date:** [May 19, 2026, 11:51am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/72 "2026-05-19T11:51:36Z")
Looks like the real thing! ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [May 19, 2026, 12:29pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/73 "2026-05-19T12:29:36Z")
That's a valid point. My daughter was showing me some HSL shading that looked better than what I've been doing but I haven't taken the plunge yet. She does some color theory stuff that I don't understand but it looks really good. If my stuff is a 5, hers is at least an 8. I'll just say that I'm aware and know that it's an area where I can improve 🙂 It's unlikely I'll get into that soon though. I'd probably need my kid to patiently show me that stuff a few times for me to understand it in a useable way. That would require me to pull her away from her other interests. I hope to get there some day. Maybe I just need to bribe her with guitars lol ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [May 19, 2026, 1:13pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/74 "2026-05-19T13:13:34Z")
All you really need to get your head around is Hue and what it represents. Every 30degrees (value) is a new transition to a primary/tertiary colour. Every 60 degrees is a primary, and every 30 inbetween is a seconary. See the Hue values below, showing - top - all of the primaries and tertiaries - middle - primaries only (every 6o deg) and - bottom - tertiary only (every other 30deg) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/9/e923e254bb4d80c9ff1e467b5b3a8c407fed0a6a.png) The beauty of it though is that most website colour palettes are based on a distinct set of _ **hues,** _ where these are then modified in saturation and lightness to get differnent shades of the same hues. Defining these in RBG is... well see the example below and you'll see. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/6/d6c90cd022d9303359b330957b65398d94c169d1.png) In the HSL column, the Hue changes slightly, but right away you can see that the hue is pretty much the same for the slate colours. In RGB, you have to mentally mix R G B values in HEX together to try to work it out, for as many colours as you have -- you may as well just call them "colour1", "colour2", ... "colourN" 🤭. If you wanted to add a new variation, good luck working it out yourself! And if you want a colour that is slightly less saturated, or lighter, or darker, you _must_ use a colour picker to do it (and you'll be most likely be using the hsl sliders when you do!) else you'll end up with a different hue and lightness ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [May 19, 2026, 1:54pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/75 "2026-05-19T13:54:56Z")
Oh I see. That makes a lot of sense for keeping your color themes consistent across the site. ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [June 10, 2026, 6:13pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/76 "2026-06-10T18:13:19Z")
I'm using cq units on a different thing and getting inconsistent results depending on what kind of container my element is in. I'm mentioning it because it might explain some of the weirdness you're seeing with text sizing. If I put a label inside a flex container and apply my style to the label it works fine. If it put that flex container inside another flex container it will use the dimensions of the outside flex container. If outside parent container is a coordinate container (so a coordinate container holding a flex container holding a label) it works. I might be doing something wrong because I am still learning how to use cq units but the results seem strange to me. The screenshot shows flex/flex/label on the left and Corod/Flex/Label on the right. Style is applied to the inner-most label. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/0/0053f686086d9ff7804be88a8c3807b3d064f673.png) The CSS code... ```python .psc-bar-chart-horiz-exp{ background-image: linear-gradient(to bottom, #328DB9, #276B8F); color: #FFFFFF; font-family: roboto; font-style: 900; font-size: 1.2rem; text-transform: capitalize; z-index: 3; text-indent: 8px; container-name: bar; container-type: inline-size; } .psc-bar-chart-horiz-exp::before{ content: ""; background-image: linear-gradient(to bottom, #003553, #06567E); position: absolute; left: 100cqw; height: 100.5%; width: 15px; top: -8px; transform: translate(-50%, 0%); transform: skewY(-45deg); z-index: 1; } .psc-bar-chart-horiz-exp::after{ content: ""; position: absolute; top: -15px; left: 8px; height: 15px; width: 100cqw; background-image: linear-gradient(to right, #0B4F79, #1D7DAC); transform: skew(-45deg); z-index: 2; } ``` ```python ``` Sorry, I used hex colors on this one too LOL. I made that a couple years ago. I was just trying to make it use cs units now. ---
**Author:** ![Marek\_Uhlir](https://avatars.discourse-cdn.com/v4/letter/m/3d9bf3/32.png) [@Marek\_Uhlir](https://forum.inductiveautomation.com/u/Marek_Uhlir)\ **Post date:** [June 15, 2026, 12:10pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/77 "2026-06-15T12:10:28Z")
I initially thought I had found an issue with `cqmin` in the Perspective Mobile App on Android because responsive font sizing behaved differently than in a browser. After some additional testing, it looks like `cqmin` may not actually be the problem. Instead, the Android app seems to enforce a minimum font size, preventing text from scaling below a certain threshold. Has anyone else run into this? Is there a documented minimum font size in the Perspective Mobile App, or a way to disable/adjust it? I'm curious whether this behavior comes from Perspective itself, the Android WebView, or some accessibility setting within the app. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 17, 2026, 11:42am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/78 "2026-06-17T11:42:46Z")
> [@Steve\_Laubach](#): > > Sorry, I used hex colors on this one too LOL I got Claude to write me a CSS theme manager to bolt directly into the Designer, and guess what function I asked it to add for me... 😉 (ps. I know the UI could do with a bit of work... but at least it's functional for now) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/c/2c02dcb40798531c1a32cefb10ab291553e498fd.png) ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [June 17, 2026, 2:10pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/79 "2026-06-17T14:10:48Z")
That's amazing! IA should build that in ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 18, 2026, 6:32am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/80 "2026-06-18T06:32:46Z")
> [@amarks](#): > > IA should build that in Only if they force feed HSL to the user like I did 😆 [Previous page](https://forum.inductiveautomation.com/t/useful-css-stuff/95414.md?page=3) [Next page](https://forum.inductiveautomation.com/t/useful-css-stuff/95414.md?page=5)