# JS Injection Hack Usefuls (JavaScript)

**URL:** <https://forum.inductiveautomation.com/t/js-injection-hack-usefuls-javascript/114714>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 27, 2026, 6:43am UTC](https://forum.inductiveautomation.com/t/js-injection-hack-usefuls-javascript/114714 "2026-03-27T06:43:40Z")\
**Posts on this page:** 1\
**Showing post:** 50

<div class="post-metadata">

**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 22, 2026, 6:31am UTC](https://forum.inductiveautomation.com/t/js-injection-hack-usefuls-javascript/114714/50 "2026-05-22T06:31:00Z")

</div>

> [@bmusson](#):
>
> Do you have an example command?

```javascript
() => { document.documentElement.classList.toggle('dark'); }

```

Comparison shown below comparing switching theme via session prop (purple icon) and switching via the above.

Note: the purple switch is broken because I deleted the old dark theme, but it still demonstrates what was happening when it was there with the brief unstyled page.

Essentially, you need to define your default light-themed CSS variables and then override them within a `.dark`-scoped selector so the values change when dark mode is active with the js toggle

```python

/* Default (light theme) */
:root {
  --colour-pg-bg: hsl(214 30% 91%);
}

/* Dark theme override (triggered by class on <html>) */
html.dark {
  --colour-pg-bg: hsl(216 14% 27%);
}

```

What I had to do also however was to include the IA "dark" theme under a different name within my theme (import it), however I edited the selectors within the css files by adding `.dark ` to the front of each, e.g.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/b/2b71b6fbec02fdf0e7a2fed7d4624c3db7641e76.png)

---

_[View the full topic](https://forum.inductiveautomation.com/t/js-injection-hack-usefuls-javascript/114714)._