Data selector for themes

TheDarkWizard · May 20, 2020, 9:15am

Johani:

If you add this to the header tab of your theme component

<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

[data-theme-id="1"] {
  // light theme CSS
}

[data-theme-id="2"] {
  // dark theme CSS
}

You are both the best, thank you so much

Topic		Replies	Views
Theme idea: Toggle selector for light or dark theme in header row Feature	4	1522	June 1, 2020
Is it possible to create child themes? Feature	11	2498	September 28, 2018
Global theme settings Feature	4	1539	March 13, 2018
Theme components issue Product Support	7	561	April 29, 2024
Automatically transferring themes Product Support	3	444	February 19, 2021

Data selector for themes

Related topics