Feature request: dark/light mode toggle

[khalidrafi6]

Currently, we can use terminal.css to make it light or dark as we want. But adding a toggle to switch between dark and light theme would be best. Many websites now have it.

[panr]

Hey @khalidrafi6, I know that many websites have that, but any ideas how to implement it correctly? How would you tackle this having ability to create a custom color scheme?

By having two separate color schemas (one per mode)?

[khalidrafi6]

Hey @khalidrafi6, I know that many websites have that, but any ideas how to implement it correctly? How would you tackle this having ability to create a custom color scheme?

By having two separate color schemas (one per mode)?

Sorry, I have no idea. But maybe, you can get some idea from Hugo Papermod theme. It has built-in dark mode toggle, Btw, is it completely impossible for users to add a dark mode toggle? Even with custom css and js?

[panr]

Toggle is super easy to do, 5min of work. But the main question is, between what would you like to switch? The theme allows you to generate your own color schema. The theme itself can't control it.

[khalidrafi6]

Toggle is super easy to do, 5min of work. But the main question is, between what would you like to switch? The theme allows you to generate your own color schema. The theme itself can't control it.

I meant a toggle to turn on dark mode or light mode. It'd be nice to have it built-in with the theme, like Hugo PaperMod. And, would you please tell me how to add the toggle?

[siddhpant]

One way to implement this is: The user can add two theme CSS corresponding to dark and light mode (or any scheme wanted), which can be selected using a flag in localstorage on runtime.

By default this behavior should be disabled, since it will lead to size increase.

[JkBoyo]

I feel like siddhpant is right in making it not be the default. It could be as simple as just having the user make a selection on creation that they want a dark mode light mode option then duplicating the css to the two options with multiple class names and from there having a parameter in the conf.**ml that lets you set dark/light mode toggle true or false. Does that seem like a logical approach @panr? I don't know a ton of css or JS to help with this. 🙃

Could you maybe also just invert the text and background colors as an option? I feel like that's what a lot of things end up doing.

[BlueFox4]

I don't know if that helps on this issue, but what about using something like this in the terminal.css file:

:root {
  --background: <some-light-bg-color>;
  --foreground:  <some-light-fg-color>;
  --accent: <some-light-accent-color>;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: <some-dark-bg-color>;
    --foreground:  <some-dark-fg-color>;
    --accent: <some-dark-accent-color>;
  }
}

On my blog (which is currently in construction, but if you want, see here), this already does the trick and even switches automatically. If everything is standard-compliant, of course 😆!

I don't know if there is a way to achieve this button thing without breaking the current theme system (Terminal.CSS) and "bloating" the whole theme with (even) more javascript (currently the theme is pretty lightweight and only uses very few javascript, which I believe is very good). But this is just my humble opinion on this (and I'm new to this theme!), but I hope the above can help somehow.