dark/light theme

[tima101]

Dark themes for Github and Youtube are great for eyes.

Example of dark theme for Github: https://github.com/StylishThemes/GitHub-Dark

Consider adding dark theme with UX similar to DDG's:

[shanky101]

I wanted to know if there is a way to disable the dark theme. The theme used is not jet black but a variant of off shade of black/dark grey which tbh messes with my eyes. Is there anyway to just switch modes. Between light and dark mode?

[klyburke]

@shanky101 Thanks for your feedback. We do not have an option at builderbook.org to switch to a different theme.

Do you have suggestions for specific colors to use? We are happy to consider them.

To test some other color schemes locally, look into pages/document.js and edit options within the style block.

[shanky101]

Link here
The above link gives very useful tips for having an inclusive color palette.
Simple ones like White on Black/Black on White would be the bare minimum color options.
@klyburke Since Builderbook is showcased as a site which belongs to blog/book category, having a toggle for basic color options would make it more appealing for a wider audience. It may not be essential, but a good to have feature.
The current implementation uses an off variant of black which in my opinion may not be the best choice for long form reading on computer screen. FWIW, I use dark theme in my code editors, xcode and even macOS theme and I love it but its good to have options.
PS : The link below exactly details the better ways of text representation on screens.
Link here

[tima101]

@shanky101 Thanks for sharing the link. We are open to contribution to add a light theme in addition to a dark theme.

@klyburke Let's keep it open for now?

[klyburke]

@tima101 Sounds good.

@shanky101 If you'd like to contribute with a pull request, you are welcome. But no pressure.

[ksbrooksjr]

As a quick and dirty solution I ended up just modifying the styles directly in the console. Here's what worked for me: https://gist.github.com/ksbrooksjr/0ad492d540d4fb9c968cb8cd52c520b3

[tima101]

@ksbrooksjr Nice!

I will use your styles to create a light theme. Thanks!

---

Notes to myself:@ksbrooksjr Nice!

I will use your styles to create a light theme. Thanks!

---

Notes to myself:

Save boolean lightTheme to browser's localStorage.

Do something like this at ReadChapter page:

  public componentDidMount() {
    if ((typeof localStorage !== 'undefined' && localStorage.getItem(this.theme)) || null) {
      this.setState({ themeType: 'light' });
    }
  }

And:

  private changeThemeType = (themeType: string) => {
    this.setState({ themeType });

    if (typeof localStorage !== 'undefined' && this.theme) {
      localStorage.setItem(this.theme, themeType);
    }
  };

[tima101]

@shanky101 @ksbrooksjr @klyburke @delgermurun Added prototype feature, see circle icon next to Table of Content on the left: https://builderbook.org/books/builder-book/introduction

---

Currently data is saved to localStorage.
To prevent flash of styles for SSR, we should save darkTheme to DB.
To me it looks tolerable to have a quick flash for SSR, most of consequent transitions (between chapters) are CSR transitions.

---

Note to self: research saving darkTheme to cookie/session

[ksbrooksjr]

@tima101 Looks great!