Is there even a way to use data-theme with stylus?

[AndresMpa]

I spent 6 hours looking for the correct way to make this with stylus, but I didn't got any good idea:

:root {
  --main: #0f0f0f;
  --letter: snow;
}

[data-theme="light"] {
  --main: snow;
  --letter: black;
}

All I want is to set 2 themes, but there's no examples of this on internet, neither stylus documentation, I have also check discussion here, but there's not information neither

[vendethiel]

wrong stylus repo

[AndresMpa]

Where else could I ask? The description here says "Expressive, robust, feature-rich CSS language built for nodejs" Isn't that Stylus?

[iChenLei]

@AndresMpa If you can't solve the problem, you can use @css as workaround.

[AndresMpa]

@iChenLei Thank you for your suggestion, I saw that option while I was reading, but I found it a bit "out of context", I mean; what I want is to have some variables to make a theme switcher. I've done that with as I showed before, but I couldn't have see a way to make the same using native stylus.

I want to use stylus variables instead of var(--someColor) but, stylus lose that "context", in other words I couldn't find a way to make something like:

someVar = darkOrWhiteColor

.someClass
   color: someVar

I might be doing something wrong but I could find any good example. That's why I'm asking if it is possible

[slightlyfaulty]

It sounds like you might be thinking about this the wrong way. Stylus variables are for compile-time values. CSS custom properties are for runtime values. They have different purposes are aren't interchangeable.

If you just want to replace var(--someColor) with someVar in your code, you can literally just do this:

:root
  --someColor snow

someVar = var(--someColor)

.someClass
   color someVar

[vendethiel]

More to their usages: Stylus variables are lexically scoped, whereas CSS variables are dynamically scoped. There are use cases for both, here it makes more sense to use CSS variables like pointed out there.

[AndresMpa]

Thanks a lot @slightlyfaultyt I achieved what I was looking for

It seems that I was do it the wrong way. Thanks guys

[vendethiel]

Good luck for your project. Sorry for my initial answer, I misunderstood