Need Help with Implementing a Theme Provider for SSR #1370
-
|
Hi, I'm creating a static website with Waku and tailwindcss. What is a good practice to implement a dark/light theme mechanism for a SSR website? I'm using the template_1 as a starter for my website. Some code snippets would be really appreciated. |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 6 replies
-
|
For static sites, we can't have both dark/light theme for the same path. So, options are 1) change the paths for dark and theme, 2) give up SSR, and 3) give up static sites. Which sounds reasonable for you? |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your reply! Interesting, now that I think about it - it makes sense what if I put default class in the html tag like |
Beta Was this translation helpful? Give feedback.
-
|
Yes, changing the class property in useEffect should work. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @dai-shi, keep it up with the awesome work!! |
Beta Was this translation helpful? Give feedback.
-
|
If you want SSR safe theming, I wrote up a quick example here: https://waku-ssr-theming-example.mhamlin.workers.dev/ It inserts a script that gets hoisted by React, which detects the preferred color scheme and sets a className on the |
Beta Was this translation helpful? Give feedback.
-
|
For static sites: one approach is to remove the user toggle for light/dark and strictly use the media query for styling https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme This is what I do for https://tylur.dev & https://tylur.blog - on demand configurability wasn't important to me and static hosting is great! |
Beta Was this translation helpful? Give feedback.
-
|
Oh, there's another option! |
Beta Was this translation helpful? Give feedback.
-
|
yeah, I considered this option with tailwind. They have the data attribute thing, which you can set up @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));<html data-theme="dark">
<body>
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
which later I can change with the help of a query selector |
Beta Was this translation helpful? Give feedback.
-
|
but I might consider your solution as well, I don't want to have any side effects for a landing page |
Beta Was this translation helpful? Give feedback.
Yes, changing the class property in useEffect should work.