Rails 7 #118 Dark mode. Toggle inside your app or use OS default preferred color scheme

16/03/2023 (about 1 year ago)
css dark mode prefers color scheme os default preferred color schemes clever programmer dark light mode css dark light mode react dark light models react dark mode switch free code camp javascript Color Scheme change color with prefers color scheme rails open source media queries rails open source css dark mode theme

Some say that Dark Mode should be an MVP feature.
In this episode, we will allow users to toggle light and dark modes inside our app based on system preferences, or manually by clicking a button in our application.
For this example, we will not use any CSS framework to achieve this, just raw CSS and Rails cookie storage!

Episode source code: https://github.com/corsego/118-dark-mode/commit/917ad96b76da599799ee783529b9abc3ee69ba31
Based on this blog post: https://blog.corsego.com/ruby-on-rails-dark-mode

0:00 Dark Mode in other applications
1:44 Demo of the final application
2:45 use OS default light or dark mode
3:44 toggle light and dark mode within Rails app
8:07 CSS to conditionally toggle the color scheme
12:02 Works! Final Demo

Sign in to join the conversation

Recommended based on what you are watching now