Comments (4)
You might have a js/json file, import it in both tailwind.config.js and your theme switch component.
Note that you need esm support (tailwind >= 3.3.0) to do it with js files, otherwise you should go for json.
colors.js
export const colors = {
a: {
primary: 'red'
},
b: {
primary: 'blue'
},
c: {
primary: 'yellow'
},
}
tailwind.config.js
import { colors } from '...'
export default {
// ...your config
plugins: [
createThemes( colors )
],
};
theme switcher
import { colors } from '...'
console.log( colors )
from tw-colors.
I should have probably left a little more info. I probably would actually need the css variables in my use case. It's a SvelteKit project and to switch the themes I use svg icons imported via unplugin icons. Those come with a wrapper that, atleast to my knowledge, only accepts the actual color for their color attribute.
I couldn't override it manually or with Tailwind, atleast not easily. But it's not a huge deal. I'll probably just have the Theme colors statically defined somewhere.
from tw-colors.
Hi Simon,
For a given color only one CSS variable is generated, which changes color depending on the closest theme.
Therefore the only way to access the CSS variable value for a given theme is to use nested themes.
In your case you probably don't need to access the variable at all, you might use the color directly.
<html class="theme-a">
...
<div>
<button>My theme switcher</button>
<ul>
<li class="theme-a bg-primary">
theme-a primary preview
</li>
<li class="theme-b bg-primary">
theme-b primary preview
</li>
<li class="theme-c bg-primary">
theme-c primary preview
</li>
</ul>
<div>
...
</html>
Hope that helps!
from tw-colors.
Yeah, I've came up with something like this and it seems to do the job. Thanks a lot for the super fast and helpful assistance. If you ever need any form of help feel free to hit me up.
from tw-colors.
Related Issues (20)
- How to get the array of themes defined on createThemes() function. HOT 1
- how can use two different class one for dark and on for light in one element HOT 1
- Add default setting for neutral/duplicate color HOT 4
- Hoisting CSS variables to root? HOT 3
- make it work with class "light" instead of "theme-light" HOT 3
- tw-colors not working on nuxt's error.vue page , why ? HOT 3
- Variants without explicit theme declarations HOT 6
- color giving uninteded conversion HOT 3
- NativeWind support HOT 17
- In theme <theme> color "background". Unable to parse color from string: hsl(0 0% 0% / 10%) HOT 2
- TWC color variables not set when using important mode in tailwind HOT 3
- How to create Theme & Variants HOT 2
- 3.1.2 breaks my colors HOT 4
- Tailwind colors plugin defined colors don't work in portal HOT 10
- option to preserve hex values? HOT 2
- Reference custom color names in `createTheme` HOT 3
- color calculations result in different values than configured in theme HOT 1
- how to assign color to scss variable? HOT 3
- Allow referencing other CSS variables HOT 2
- Prefix option prevents CSS color variables generation in Tailwind CSS configuration HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tw-colors.