feat: add dark mode with theme picker #3
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add Tailwind CSS dark mode configuration with class-based variant - Create Stimulus theme controller with light/dark/system options - Add theme picker UI component in layout with sun/moon/monitor icons - Add inline script to prevent flash of unstyled content - Update home page and counter partial with dark mode classes - Theme preference persists in localStorage - System preference option respects OS dark mode setting
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a comprehensive dark mode feature with a theme picker component.
Changes
Tailwind CSS Configuration
@custom-variant darkTheme Stimulus Controller (
theme_controller.js)UI Components
Updated Views
application.html.erb: Added theme picker and body dark classeshome/index.html.erb: Added dark mode variants for all elementshome/_counter.html.erb: Added dark mode variants for counter displayHow It Works
darkclass is toggled on<html>elementdark:variant stylesTesting
Important
Adds dark mode with a theme picker, using Tailwind CSS and a Stimulus controller to manage and persist user theme preferences.
application.cssusing@custom-variant dark.application.css.theme_controller.jsto manage light, dark, and system theme modes.localStorageand listens for OS preference changes.application.html.erb.application.html.erbwith buttons for light, dark, and system modes.home/index.html.erbandhome/_counter.html.erbto include dark mode variants for elements.localStorageand applied on page load.darkclass toggled on<html>element based on user preference or system setting.This description was created by
for b3b0aed. You can customize this summary. It will automatically update as commits are pushed.