Data selector for themes

Dev
1

Hi,

I’d like to propose a data selector for themes to make it easier to make edits to full themes from a Component.

I’m not sure how unique my situation is but I’m running an example where I have two instances of graceful installed, so I can use a dark and light pallet. I’m using a theme component to make edits to these remote themes to do universal changes such as change the like button. This all works great for universal edits changed by the styles but the problem starts to arise when I want to make an edit to say the dark version that should not appear in the light theme. I don’t see a way to use CSS to make changes by theme id. To do what I currently want, I’d have to make individual theme components for each theme for the minor stuff I desire.

Perhaps something like [data-theme-id].

If this is possible already, then feel free to ignore me, I just think it would go along way to help sites that want to make edits to multiple themes without piling up the components list.

2

I’m not sure I understand, but you can add some css directly into thoses light and dark themes

IMO components are really great for universale changes like margin, display, padding, width, but for colors, unless you use variables, it’s better to edit the themes directly.

Seems like an overcomplication of a solution that’s already available :thinking:

3

But editing remote themes causes your edits to be lost the next time it updates, no?

This isn’t just about colors, it’s about doing specific changes to specific themes from one component without needing to make more components and applying them to only some themes.

4

You’re right. For a remote theme, you could use three components:

universal theme fix for shared changes
and dark theme fix / light theme fix for those specific changes (like colours). You can link a component to one theme only

Light graceful will have universal and light fix
Dark graceful will have universal and dark fix

In last resort, you can add !important to a line of those light/dark fixes if a change won’t work

1 Like
5

I suppose you are right. I had already thought of one universal component and then one component per theme, so three in this example l, but it seemed like overkill to have three repos with what could have maybe been easily fixed with a data selector since just about everything else in discourse has one.

As a note the theme id is in the meta name as a content id and the keyword is discourse_themes_id and in the link to change themes as [data-id=“#”] at least if I inspect the hamburger theme selector link created by that component installed here on Meta or in one of my test sites it is anyway. So it’s not like the information isn’t presentable by discourse.

6

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
}
3 Likes
7

In this very specific case, you might be able to use our SCSS helpers. Here’s an example from core, but the same should work in a theme:

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.

3 Likes
8

You are both the best, thank you so much :slight_smile:

3 Likes