feat: Add CSS classes to elements for custom themes #206

New Issue

GiteaMirror · 2025-11-11T14:11:16-06:00

GiteaMirror commented

2025-11-11 14:11:16 -06:00

Originally created by @SethBurkart123 on GitHub (Jan 18, 2024).

The current implementation of themes requires complex css selectors that will break as soon as the base styles are modified making them extremely hard to maintain. eg. the current rose-pine theme uses selectors such as:

.rose-pine
	.text-white.bg-gray-100.dark\:text-gray-800.dark\:bg-gray-600.disabled.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
	background-color: #6e6a86;
	transition: background-color 0.2s ease-out linear;
}

In order to change simple properties. If styling got changed in the base, these selectors would instantly be invalidated and break the theme.

Describe the solution you'd like

I propose that to all important elements that should be possible to select with css there should either be accessibility attributes, id's or classes added so that it's a whole lot easier to create and maintain alternative themes.

I'm open to create a fix for this myself with a pull request if people are interested.

Originally created by @SethBurkart123 on GitHub (Jan 18, 2024). ### **Is your feature request related to a problem? Please describe.** The current implementation of themes requires complex css selectors that will break as soon as the base styles are modified making them extremely hard to maintain. eg. the current rose-pine theme uses selectors such as: ```css .rose-pine .text-white.bg-gray-100.dark\:text-gray-800.dark\:bg-gray-600.disabled.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center { background-color: #6e6a86; transition: background-color 0.2s ease-out linear; } ``` In order to change simple properties. If styling got changed in the base, these selectors would instantly be invalidated and break the theme. ### **Describe the solution you'd like** I propose that to all important elements that should be possible to select with css there should either be accessibility attributes, id's or classes added so that it's a whole lot easier to create and maintain alternative themes. --- I'm open to create a fix for this myself with a pull request if people are interested.

GiteaMirror added the enhancement non-core labels 2025-11-11 14:11:16 -06:00

GiteaMirror closed this issue

2025-11-11 14:11:17 -06:00

GiteaMirror commented

2025-11-11 14:11:17 -06:00

@r-darwish commented on GitHub (May 22, 2024):

I just tried my luck in fixing the rose theme but it's very hard due to the reason that you stated. It also makes it practially impossible to create new themes. Are you suggesting to add some more simple classes that can be selected by all themes? I have very few experience with frontend engineering so I'm not sure what's the correct way to fix this problem.

@r-darwish commented on GitHub (May 22, 2024): I just tried my luck in fixing the rose theme but it's very hard due to the reason that you stated. It also makes it practially impossible to create new themes. Are you suggesting to add some more simple classes that can be selected by all themes? I have very few experience with frontend engineering so I'm not sure what's the correct way to fix this problem.

GiteaMirror commented

2025-11-11 14:11:17 -06:00

@justinh-rahb commented on GitHub (May 22, 2024):

I just tried my luck in fixing the rose theme but it's very hard due to the reason that you stated. It also makes it practially impossible to create new themes. Are you suggesting to add some more simple classes that can be selected by all themes? I have very few experience with frontend engineering so I'm not sure what's the correct way to fix this problem.

I'm not much for frontend either, but I believe that's at least in the right direction. You could maybe research if there's some well-known methods or well-supported libraries in Svelte to help with this.

@justinh-rahb commented on GitHub (May 22, 2024): > I just tried my luck in fixing the rose theme but it's very hard due to the reason that you stated. It also makes it practially impossible to create new themes. Are you suggesting to add some more simple classes that can be selected by all themes? I have very few experience with frontend engineering so I'm not sure what's the correct way to fix this problem. I'm not much for frontend either, but I believe that's at least in the right direction. You could maybe research if there's some well-known methods or well-supported libraries in Svelte to help with this.

GiteaMirror commented

2025-11-11 14:11:17 -06:00

@SethBurkart123 commented on GitHub (May 23, 2024):

Yeah, I mean all you need to do is attach classes or id's etc. so that elements can be selected. TailwindCSS is great, but by nature isn't good for writing overrides after the site's been built. So you just need to manually add CSS selectable identification on all the different elements, eg. you might give the sidebar the class sidebar the thing is it doesn't have to be complicated, and these classes by default don't even need to do anything... There isn't much you can do other than that.

@SethBurkart123 commented on GitHub (May 23, 2024): Yeah, I mean all you need to do is attach classes or id's etc. so that elements can be selected. TailwindCSS is great, but by nature isn't good for writing overrides after the site's been built. So you just need to manually add CSS selectable identification on all the different elements, eg. you might give the sidebar the class `sidebar` the thing is it doesn't have to be complicated, and these classes by default don't even need to do anything... There isn't much you can do other than that.