Skip to content

Conversation

@MightyJoeW
Copy link

What: This change adds a dark mode option in the settings dropdown

Why: This dark mode feature will allow users to toggle the UI between the light and dark themes.

How: Add showDarkMode to Settings.js and toggle styles based on settings.darkMode

Pre-Change (no dark mode) Dark Mode off Dark mode (WIP)
2020-09-19_Testing_Playground_before 2020-09-19_Testing_Playground_darkmode_off 2020-09-20_Testing_Playground_dark_mode_dc

Checklist:

  • Tests
  • Ready to be merged

Todo:

  • Finalize dark mode color scheme
  • Extend background height on mobile view (bug)
  • In Playground.js, try to setup toggle in className (only working with style tag at the moment)

More info

  • usePlayground.js - the SET_SETTINGS type sets darkMode to true with toggle button
  • Settings.js - showDarkMode adds the toggle icon
  • app.pcss - adds styles for .editor-dark class
  • Layout.js and Playground.js - add styles based on showDarkMode

@smeijer smeijer marked this pull request as draft December 7, 2020 15:24
@smeijer
Copy link
Member

smeijer commented Mar 31, 2021

Closing due to inactivity. Please feel free to reopen when you plan to continue working on this.

@smeijer smeijer closed this Mar 31, 2021
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.

2 participants