Documentation colors contrast

[EmilCataranciuc]

Is your feature request related to a problem? Please describe.

Reading white text on black background is extremely difficult and hard on the eye.

Describe the solution you’d like

Could you please change the colors or provide a colors switch? I think the documentation was presented black on white in the past.

[gchtr]

I think the documentation was presented black on white in the past.

Yep, it was. Personally, I preferred the light color scheme, too, because I thought it was easier to read.

Could you please change the colors or provide a colors switch?

We could provide a color switcher with a solution for Eleventy like this one: Color Theme Switcher.

I think that’s an issue for @jarednova and his team to take over.

[Levdbas]

This is more of a docs repo issue then the Timber lib. @gchtr, shall we move it over there to clean it up over here?

Don't mind the accidental pin.. 👯

[gchtr]

If someone wants to contribute here, they are welcome to do so.

Please note that initially, the documentation was provided in a light version. It was switched to a dark version in https://github.com/timber/docs/pull/23. The relevant light styles could be extracted from there.

[heybran]

Progress so far on bring back light mode and a theme switcher to toggle between light/dark mode. Will continue in some other time.

https://github.com/timber/docs/assets/75633537/1730e559-2b38-43f8-91cd-bf39d17c937c

[Levdbas]

Legend!

[jarednova]

Lookin' good @heybran – keep it up!

[heybran]

Thanks @Levdbas @jarednova

I've finished updating the light mode styles and submitted a draft PR: https://github.com/timber/docs/pull/83

This PR didn't include the build files as I would like to ask for a review first on the styles I added. If it's possible, it would be better for a reviewer to checkout my branch and run the site locally and check the light mode styles, probably click through all pages to give them a quick check.

Personally I have walked through all pages and they look good to me, since there's quite a lot of pages, so I didn't include any screenshots.

I can attach more screenshots here if that's needed.

Once the styles are checked and all good, next step is for me to run npm run build and include the build files into this PR?

Thanks.

[Levdbas]

Hi @heybran ,

Thank you for all the effort. I will be glad to fully review your PR when I am back from vacation but one thing you might want to do is creating the color switches with css variables. That might be easier to maintain in the future as well. But as said, I will dig deeper into your PR once back!

[heybran]

Hi @Levdbas,

Thanks for the updates and hope you enjoy your holiday.

For css variables, you mean converting these SCSS variables to native CSS variables?

$black: #000; // Converting to --black: #000?
$white: #fff;
$green: #169c65;
$green-light: #54ffb9;
$orange: #FFB302;
$red: #EB3E41;
$blue: #2175FF;
$pink: #FFB3C9;
$yellow: #FADD1B;
$purple: #8E4CF8;

I just checked my previous PR, somehow with Eleventy, theme switcher works first time when page load, but once you move into another page by clicking any links on the page, the theme switcher stop working. As far as I understand, using DOMContentLoaded should be working every time when page loads, but not in this case, might be something todo with how Eleventy works?

Anyway, I've sent an update to improve the logic, now clicking theme switcher will always fire the switchTheme() function.

[Levdbas]

This has now been implemented thanks to @heybran. Amazing work!