Add Themes #3

codingotaku commented 2023年08月15日 14:13:33 +02:00

The web-page currently does not have dark themes, which is a problem for people reading the site in dark environments.

Consider at least using system theme with @media/prefers-color-scheme.

A theme switcher would need to save the current selected theme, this should either use JavaScript or cookies.
Use of JavaScript is avoided as much as possible on this project, we could set a session cookie or something if someone needs to set the theme manually.

Ideally, the cookie should not be set/sent when using the default theme (set using prefers-color-scheme)

The web-page currently does not have dark themes, which is a problem for people reading the site in dark environments. Consider at least using system theme with [@media/prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). A theme switcher would need to save the current selected theme, this should either use JavaScript or cookies. Use of JavaScript is avoided as much as possible on this project, we could set a session cookie or something if someone needs to set the theme manually. Ideally, the cookie should not be set/sent when using the default theme (set using `prefers-color-scheme`)

codingotaku commented 2023年08月15日 17:43:06 +02:00

Dark theme is now supported, but uses system preference for the theme. i.e, there is no theme switch option yet.

Dark mode

Dark Mode

Light mode

Light Mode

Dark theme is now supported, but uses system preference for the theme. i.e, there is no theme switch option yet. ## Dark mode  ## Light mode 

codingotaku commented 2023年08月15日 18:06:44 +02:00

After giving it some more thought, I decided not to go with using cookies to store the theme preference, using JavaScript to do it is out of options as I'm stubborn.

If someone requests, and is okay with using cookies, I might reconsider this and re-open this issue.

After giving it some more thought, I decided not to go with using cookies to store the theme preference, using JavaScript to do it is out of options as I'm stubborn. If someone requests, and is okay with using cookies, I might reconsider this and re-open this issue.

codingotaku commented 2023年08月25日 21:13:13 +02:00

I'm eating my words here, the themes are now saved using cookies (if changed) and the cookies will be removed when the system theme is selected.

I have also added some text below the theme switcher to indicate that we now use cookies.
Screenshot of codingotaku.com/settings page.

Yes, we also have a pink theme now!

I'm eating my words here, the themes are now saved using cookies (if changed) and the [cookies will be removed](https://codeberg.org/codingotaku/website/src/commit/06bc2cabd2ce4b98395013cf91145acdf246c7bb/src/routes/main_pages.rs#L151) when the system theme is selected. I have also added some text below the theme switcher to indicate that we now use cookies.  Yes, we also have a pink theme now!