Dark Mode Toggle Implementation - #1737
Open
funketyme wants to merge 6 commits into
Open
Conversation
Copy link
Copy Markdown
Sorry, something went wrong.
- Run Code and Default buttons now display correctly in dark mode. - Navigation menu mouseovers now display correctly in dark mode.
- applyTheme() was incorrectly setting local storage values when OS preference was identified on load. - this was preventing OS preference from being correctly identified in the future since local storage was already written. - if OS preference is detected, no local storage is used. - local storage is now only used when the user clicks the toggle. To Test: - Clear browser local storage - Load site - You should see your OS preference (light or dark mode) - In your OS, switch modes (light to dark, or dark to light). - The site in your browser should instantly change modes as well. - Now, click the toggle on the web page (mode will change). - Now, change OS theme (dark/light). Web page mode will not change since toggle was set.
Copy link
Copy Markdown
Author
|
Here's a screenshot of the dark mode implementation. 
|
Sorry, something went wrong.
Added right click to toggle that displays option to use OS theme preference. This removes the localStorage used to save the user selected dark/light mode theme preference. -style.css: Added CSS for right click context menu. - theme-switcher.js: Added context menu build/show/hide functionality and associated event listeners (context menu is hidden by clicking off of it or pressing ESC).
- Fixed table nth-row alternating background color in dark mode. - Fixed table border background color in dark mode.
- Consolidated #foundeo rules from 3 separate blocks into 1 unified declaration with all properties (margin, position, transition, filter) - Merged duplicate .breadcrumb rules into a single definition with all properties combined and consistent !important flags
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
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.
PR Summary
Adds a full light/dark theme toggle to CFDocs with persistence, OS preference support, and scoped dark-mode styling. Most notable change is switching CSS colors to custom properties.
What Changed
theme-switcher.js
style.css
layout.cfm
Implementation notes
No longer applicable. User can now right click on dark mode toggle to revert to OS preference (and remove localStorage flag)