Changing default styles

  • jaxwedel-1263457295900348496

    Jax Wedel

    9 months ago

    I am working on how styling can be done efficiently in Toddle, and I am trying to find out how to do a stylesheet for all elements. I want to avoid having to change every component every time, because that will cause issues and mistakes. But it seems Toddle doesnt support stylesheets, and the advice seems to be to create every element as components, and then style all of those components every time, and then insert them into the app instead of using the basic toddle elements. Which seems a bit strange since you are basically building a stylesheet one by one as components.

    Is this correct? Is there no other way to do a stylesheet?

    And regarding light/dark mode, I watched the video called "Lights on" https://www.youtube.com/watch?v=_HKZGI6UW_g
    @Andreas Møller mentions there that there is an easier way to do this in larger apps, is that video out? Because I would rather do two separate stylesheets than to build in this logic in every component.

    PS: I see a solution by creating a global variable like "light" and "dark". But not sure where you do that in Toddle (on root page/homepage?).
  • andreasmoller-1263460952754360423

    Andreas Møller

    9 months ago

    Hey, the plan is to support multiple themes.

    So you will have the same cars but different values for each theme.

    This is not available yet though
  • jaxwedel-1263461656109908078

    Jax Wedel

    9 months ago

    So how do you solve light/dark mode in a larger app now? you mentioened it in the video
  • andreasmoller-1263461947094073404

    Andreas Møller

    9 months ago

    You can override style variables at any level, so you can set the bars on the root element of each page.
  • andreasmoller-1263462262610329661

    Andreas Møller

    9 months ago

    You can also do it with a style tag if you prefer
    👍1
  • aburio-1263496228872912926

    Aburio

    9 months ago

    @Jax Wedel If you want inpiration you can clone this package => https://toddle.dev/projects/nocode_ui/branches/main/components/Home?rightpanel=style

    live demo of the dark/light mode here => https://nocode_ui.toddle.site/
    🔥1
  • jaxwedel-1263513269725827155

    Jax Wedel

    9 months ago

    Thanks bro. Will check it out
  • neville9288-1317195249398841415

    Neville

    4 months ago

    @ what is a style tag?
  • lucasg-1317197046868086835

    Lucas G

    4 months ago

    For what its worth, you can actually use stylesheets in toddle
  • Not 'natively' though. For example, you can host a stylesheet elsewhere and load it in your headers
  • Then just add your classes to elements
  • It's not the toddle way but you can do it if you really want to
  • Or as Andreas said, type up your stylesheet in a <style> element and apply your classes elements.
  • Tod-1317197670732795936

    Tod

    4 months ago

    Great energy @Lucas G! Your continuous contribution to the toddle Community just made you advance to Community Level 35!