Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable dark theme #358

Open
wants to merge 19 commits into
base: bundlephobia
Choose a base branch
from
Open

Conversation

prabuw
Copy link

@prabuw prabuw commented Jun 10, 2020

High-level description of the approach to enable dark theme:

  • Add a react component to capture the theme state.
  • Add react-context that to allow the passing of the theme state between the button that toggles the theme and the component that holds the theme state.
  • Add _app.js (nextjs docs) to control page initialisation so that the front-end state (e.g. theme choice) persists across pages.
  • Toggle a CSS class (dark-theme) on the body element that triggers the dark theme.
  • Add SASS variables for dark theme colours
  • Add styles to components that use the dark-theme CSS class to override the normal styles.

Things considered but not implemented

  • Store the user's theming choice to local storage so it is remembered across visits to the site when using the same client and device.

Closes #297.

Screenshots

image

image

image

image

image

@prabuw prabuw mentioned this pull request Jun 10, 2020
@prabuw
Copy link
Author

prabuw commented Jun 13, 2020

@pastelsky Hello, there was a GitHub issue for implementing a dark theme but I can't seem to find/access it anymore. I wanted to attach this PR to it. It is issue #297 I believe with a label of good first issue.

Strangely, GitHub shows there are 3 open issues for this label but I can't see them when I click through.

Do you have any idea what has happened? 🤔 😅

@VivekNeel
Copy link

Awesome, can't wait to get this merged.

@pastelsky pastelsky force-pushed the bundlephobia branch 4 times, most recently from 7572841 to 1d11eaf Compare June 6, 2021 11:43
@piofinn
Copy link

piofinn commented Sep 22, 2021

Is there any reason why CSS variables aren't used? Seems like it would reduce both the amount and complexity of the code by a lot, and I highly doubt any users of this page use an unsupported browser 😅

Support for global (OS-level) theme and/or remembering the user setting on the page would also be really nice. I'll be happy to assist with any of these if needed! 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dark theme for website
4 participants