# Data selector for themes

**URL:** <https://meta.discourse.org/t/data-selector-for-themes/152019>\
**Category:** Development\
**Created:** [May 19, 2020, 11:51pm UTC](https://meta.discourse.org/t/data-selector-for-themes/152019 "2020-05-19T23:51:50Z")\
**Posts on this page:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![TheDarkWizard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thedarkwizard/32/177913_2.png) [@TheDarkWizard](https://meta.discourse.org/u/TheDarkWizard)\
**Post date:** [May 20, 2020, 9:15am UTC](https://meta.discourse.org/t/data-selector-for-themes/152019/8 "2020-05-20T09:15:49Z")

</div>

> [@Johani](#):
>
> If you add this to the header tab of your theme component
> 
> ```plaintext
> <script type="text/discourse-plugin" version="0.8">
> const themeSelector = require('discourse/lib/theme-selector');
> const currentThemeId = themeSelector.currentThemeId();
> document.body.dataset.themeId = currentThemeId;
> </script> 
> 
> ```
> 
> It will add a `data-theme-id` attribute to the `<body>` tag which you can use like so
> 
> ```plaintext
> [data-theme-id="1"] {
> // light theme CSS
> }
> 
> [data-theme-id="2"] {
> // dark theme CSS
> }
> 
> ```

> [@david](#):
>
> You can also use `@is-dark-color-scheme`
> 
> That way, your component is not dependent on theme-ids, which will change if you installed the theme on another site.

You are both the best, thank you so much 🙂

---

_[View the full topic](https://meta.discourse.org/t/data-selector-for-themes/152019)._