Access Theme Properties/Enhancements

[rac146]

I currently have a need to access the background image of the current theme of Skeleton. I searched all over but couldn't find a way to do it, so this ended up being my implementation:

function updateTheme() {
    const styleInfo = window.getComputedStyle(document.body);
    
    const bgImage = styleInfo['background-image'];
    const bgAttachment = styleInfo['background-attachment'];
    const bgPosition = styleInfo['background-position'];
    const bgRepeat = styleInfo['background-repeat'];
    const bgSize = styleInfo['background-size'];
    const bgColor = styleInfo['background-color'];
    
    document.documentElement.style.setProperty('--bg-image', bgImage);
    document.documentElement.style.setProperty('--bg-attachment', bgAttachment);
    document.documentElement.style.setProperty('--bg-position', bgPosition);
    document.documentElement.style.setProperty('--bg-repeat', bgRepeat);
    document.documentElement.style.setProperty('--bg-size', bgSize);
    document.documentElement.style.setProperty('--bg-color', bgColor);
}

I can then access the background image via my new css variables. Is there a way that these can be accessed directly or can it it eventually be added to the library?

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[endigo9740]

@rac146 since this falls under the umbralla of a support question, I've converted this from a GitHub Issue to a Discussion post under the Q&A Label.

Per your issue, you should have full control over where your theme file lives. Instead of dropping it in the root of the project, you could perhaps implement it in /src/lib so it's accessible within the scope of your SvelteKit project as well? Just import and grab whatever information you need out of it. This would likely be easiest if you're using Typescript and a .ts theme file.

Of course, make sure to update the pathing with the Tailwind config import statement as well.

[rac146]

That makes sense, but what about the built-in themes? Do I have to copy those to my own source as well?

I was expecting some utility to be available on the client side that would give me current theme properties + extended attributes..

[endigo9740]

You can typically import from your node_module assets, so it would be similar. But no, we don't provide any purpose built features for this, because themes are purpose-built to be ingested into Tailwind and our plugin.

We haven't built mechanisms around importing and using those values because historically it wasn't really possible, because themes are essentially a set of CSS (CSS custom properties specifically). It's not typical to import stylesheets into your JS environment and expect those to work. The fact you can do so in v2 is more of a side effect of the new Tailwind plugin and theme format, if that makes it more clear. It's not intended, and it's not an area we've devoted much attention to.

That said, I'll raise this with other members of our team, including @AdrianGonz97 who wrote our new plugin. We'll discuss if this is something we would be interested in exploring further.

[rac146]

Great, thanks! I could see this going along with something along the line of setting/modifying themes at runtime (getters/setters for all css variables, including enhancements). That's probably way easier said than done but would be pretty cool!

[rac146]

After working with this for the past few days, I think if you were able to expose the extended properties, similar to getThemeProperties it would solve some of the issues of setting preset themes dynamically.

Something simple like:

export function getThemePropertiesWithExtendedProperties(themeName: PresetThemeName) {
	return themes[themeName];
}

Or just change getThemeProperties to include the whole object..