Follow

I'm recreating my with and I may add some small for the theme switch. My thinking is JS itself is fine; but it depends what you choose to use it for. The issue of course is visitors not being able to use this switch while blocking JS with add-ons such as and (like myself)... May need to take the safer route with pure . Suggestions welcome.

@syntax I'd suggest using `prefers-color-scheme` in CSS to switch between dark and light mode. Use JS for a manual override.
I personally don't mind a bit of JS to enhance functionality, as long as you're not loading multiple MBs of it and doing lots of client side rendering

@aymm Good idea. I would only introduce JS into my site if it was better for the theme switch. I have no other reason to use it (my site is a simple static site for my writing etc.).

@syntax Any tips for a static site? I've been toying with the idea too, but Jenkyl seems waay overkill over what I need so my next thought was to write my own system.

@aymm Personally I'd recommend writing it from scratch. If you know HTML and CSS then it's easy enough. If not, it's also fairly easy to learn. And developing your own site is the perfect way to learn and practise. That's how I did it.

@syntax I was thinking along the lines of writing in Markdown and have it compiled to HTML on commit, probably with git hooks

@aymm I suppose whatever works best for you, especially only if it's going to be static content. It comes down to your preference.

@syntax
Great discussion here.

Break all #html semantics and put your entire webpage inside a #checkboxHack. Combine with what @aymm said to invert the default and the button operation. :)

Partly joking just because we'd like to see this attempted (there's possibly a #semanticHTML way to do it).

@syntax
On second thought you may not need to break #semanticHTML if your webpage container is after the #checkboxHack?

So in #SASS it might be (very roughly):
.themeSwitcher[:checked] + #webpageContainer {
// test for what
// @aymm
// mentioned and have styles
// accordingly?
}

Do a small test first, perhaps?

@dsfgs @aymm Thanks for the tip. I'll have to experiment when I next have time to spend on my website.

Sign in to participate in the conversation
Mastodon πŸ” privacytools.io

Fast, secure and up-to-date instance. PrivacyTools provides knowledge and tools to protect your privacy against global mass surveillance.

Website: privacytools.io
Matrix Chat: chat.privacytools.io
Support us on OpenCollective, many contributions are tax deductible!