Add CurrentThemeId into Body Css Classes

Support

AI-generated summary

Add CurrentThemeId into Body Css Classes

The discussion revolves around adding the active theme ID as a CSS class to the <html> or <body> tag. nildarar needs this to apply different styles for various themes.

nildarar provides an example of what the desired output would look like, using the theme name “dark-theme” as a class. However, awesomerobot clarifies that theme names are not used as IDs, but rather numbers. They offer a solution using the themeSelector.currentThemeId() method to add the theme ID as a class to the <body> tag.

nildarar expresses gratitude for the solution and inquires about documentation for Discourse plugins and related library methods. They share a link to the Developer’s Guide to Discourse Themes, but notes that it appears to be incomplete.

1

Hi,
Can anybody help me to add active theme id as <html> or <body> CSS class?
I need to write some styles and need different attributes for some themes.

For example when using “dark-theme”:

<html class="desktop-view not-mobile-device text-size-normal dark-theme">
2

We don’t use the name as an ID, just a number. You can find a theme’s ID by looking at the URL when you’re customizing a theme in the admin panel… for example https://forum.example.come/admin/customize/themes/140

If you can get by with the ID and not the name, this would be a quick way to do it (added to your theme/component’s head file):

<script type="text/discourse-plugin" version="0.8">
  var themeSelector = require('discourse/lib/theme-selector');
  document.querySelector("body").classList.add("theme-id-" + themeSelector.currentThemeId())
</script>

You could also find the theme name by ID, but it would take a little more work.

3

Thanks, Kris, @awesomerobot
Is there any document for discourse plugin and related libs methods?

I found this but it seems not to include all libs and methods: