Add dark mode toggle #3794
Add dark mode toggle #3794
Conversation
- Implement CSS custom properties for light/dark themes - Add toggle button with sun/moon icons in header - Include JavaScript for theme switching and localStorage persistence - Support system preference detection (prefers-color-scheme) - Add dark syntax highlighting theme for code blocks - Ensure accessibility with ARIA labels and proper contrast - Provide smooth transitions between themes Fixes markedjs#3793
- Remove hardcoded colors from GitHub corner SVG - Enable theme-aware styling through CSS variables
|
@tishajain25 is attempting to deploy a commit to the MarkedJS Team on Vercel. A member of the Team first needs to authorize it. |
Summary of ChangesHello @tishajain25, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request adds a comprehensive dark mode toggle to the Marked.js documentation website, including a three-mode system (Light, Dark, Auto), Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This is a great addition to the documentation site! The implementation of the dark mode toggle is comprehensive, covering user preference persistence, system preference detection, and styling for code blocks. I have a few suggestions to improve maintainability and fix a minor visual bug. Overall, excellent work.
- Fix CSS variable duplication with shared dark theme definitions - Add proper fill attribute to moon icon SVG - Extract SVG icon constants for better maintainability - Remove unused getCurrentTheme function - Add CSS class for header content instead of inline styles - Remove redundant transition from GitHub corner - Improve syntax highlighting CSS structure - Maintain functionality while improving code quality Addresses feedback from Gemini Code Assist review
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Add padding-inline-end: 70px to header to prevent overlap with GitHub corner banner - Add system theme indicator to toggle button text (e.g., 'Dark (System)', 'Light (System)') - Improve user experience by clearly showing when auto/system theme is active Addresses feedback from UziTech in PR review
|
Should dark say "Dark" instead of "Light"? I know it is trying to say what happens when it is clicked but it currently goes from "Dark" to "Light" to "Light (System)". Or maybe the "Light" should just say "System"? |
|
I think showing just 'System' when in auto mode would be clearer. The current sequence 'Dark' → 'Light' → 'Light (System)' is confusing since both 'Light' and 'Light (System)' look similar. Proposed button states:
Would this work better? I can implement it if you agree. |
|
Your button states go from manual light to manual dark which goes to manual light. The auto state is not able to get to from manual. How about:
|
|
Thanks for catching that! You're absolutely right - my proposed cycle missed the auto state. Your suggested cycle makes much more sense:
This creates a complete cycle: Auto → Dark → Light → Auto, and the button text clearly indicates the next action. I'll implement this approach. |
- Auto mode: 'Dark' (click to go to manual dark) - Manual dark mode: 'Light' (click to go to manual light) - Manual light mode: 'System' (click to go back to auto) This creates a complete cycle: Auto → Dark → Light → Auto and makes the button text clearly indicate the next action. Addresses UziTech's feedback on button state flow.
|
@UziTech I've implemented your suggested button cycle:
The complete cycle now works as expected. You can test it in the preview! |
Updated switch statement to correctly cycle through: - auto → dark - dark → light - light → auto Addresses UziTech's feedback on switch statement order.
- Remove unused 'currentTheme' variable from updateToggleButton - Remove unused 'getSystemTheme' function - Theme checking now directly uses the 'theme' parameter Fixes linting errors that caused OtherTests to fail.
|
It looks like auto always shows a sun even when the system is set to dark mode 
|
|
Can you also add the button and styles to the demo page? https://marked-website-git-fork-tishajain25-add-dark-mo-3e0162-markedjs.vercel.app/demo/ |
- Fix: Auto mode now shows correct icon based on system preference - Shows moon icon when system is in dark mode - Shows sun icon when system is in light mode - Add dark mode toggle button to demo page header - Add required CSS links to demo page (style.css, hljs-github-dark.css) - Add theme functionality script to demo page Addresses UziTech's feedback on icon display and demo page integration.
|
Fixed both issues:
You can test the demo page in the Vercel preview! |
|
On the demo page it looks like the links and header have moved. Also the banner in the top right didn't change in dark mode. 
|
|
Can you also tone down the textboxes and preview on the demo in dark mode? |
- Fix header layout: remove wrapper that displaced links - Add comprehensive dark mode styles for demo page - Tone down textboxes and preview backgrounds - Add proper dark theme colors for all elements - Style body, panes, labels, buttons for dark mode - Add toggle button positioning styles - Ensure GitHub corner banner changes with theme Addresses UziTech's feedback on demo page styling.
|
Fixed the demo page styling issues:
Demo page should now look and function correctly in both light and dark modes! |
|
looks like the banner on demo still doesn't change. Also the preview is just always dark mode now. |
…theme inheritance
|
Hi @UziTech! 👋 I've addressed both issues you mentioned:
Both issues should now be fixed. The GitHub corner banner changes color appropriately, and the preview pane inherits the parent page's theme setting. Let me know if there's anything else that needs to be addressed! |
|
The preview seems to always be dark. Can you show me a screenshot of the demo page in light and dark mode after your next change? |
Hi @UziTech! 👋 I pushed another update that replaces the old postMessage approach with a helper that applies the theme (and color-scheme) directly to the preview iframe. The iframe now re-syncs on load, and the demo page calls into that helper so the preview always matches the active theme. I also pulled out the sandboxed script that wasn’t firing and double-checked everything against a fresh npm run build:docs, so the demo uses the built lib files. Attaching two screenshots to show the result—one in dark mode (toggle reads “Light”) and one in light mode (“System”). In both captures the GitHub ribbon, editor panes, and preview panel stay in sync with the selected theme. |
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces a well-structured dark mode feature with a three-state toggle (Light, Dark, Auto). The use of CSS custom properties for theming is excellent, and the feature is thoughtfully integrated across the documentation and demo pages, including persistence via localStorage and system preference detection. My review includes a few suggestions to improve code maintainability by reducing duplication in the CSS, fixing a minor bug in an SVG icon, and optimizing the JavaScript logic. Overall, this is a solid implementation of a valuable user experience enhancement.
2 participants
Marked version: 16.4.0
Markdown flavor: n/a
Description
Implements a comprehensive dark mode toggle for the Marked.js documentation website as requested in issue #3793.
✨ Features Added
prefers-color-scheme🔧 Technical Implementation
hljs-github-dark.css)npm run build:docs📁 Files Changed
docs/_document.html- Added toggle button and dark theme CSS linkdocs/css/style.css- Implemented CSS variables and dark theme supportdocs/css/hljs-github-dark.css- Created dark syntax highlighting theme (new file)docs/js/index.js- Added theme switching logic and persistencedocs/css/shared.css- Updated GitHub corner for dark mode compatibility🎯 User Experience Benefits
Contributor
Testing completed:
npm run build:docs🎃 Hacktoberfest 2025 Contribution