Feature - Dark Mode Generator tool#720
Open
markmead wants to merge 26 commits into
Open
Conversation
Extracts SHADE_MAP, COLOR_MAP, COLOR_FAMILIES into src/constants/dark-mode.js and creates src/lib/dark-mode/ with transform-class.js, transform-html.js, and config.js (with localStorage persistence, normalizer, import/export). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replaces the TypeScript consts file with a plain ESM JS module and updates all 8 importers to use the new path. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replaces inline SHADE_MAP/COLOR_MAP/transform logic in generate-dark-variants.js with imports from src/lib/dark-mode/. Behavior is unchanged. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds a Tools entry to the desktop header and mobile dropdown menu. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Introduces the /tools section with a Dark Mode Generator: a browser-based tool that transforms Tailwind HTML to include dark: variants. Features a configurable sidebar (shade map, utility toggles, rules), sandboxed light/dark/split/code preview, and localStorage persistence. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
hyperui | bc69509 | Commit Preview URL Branch Preview URL |
Jun 09 2026, 09:39 PM |
config.shadeMap was never read — both the shade gate and the dark shade fallback were referencing the imported SHADE_MAP constant directly. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…aking Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Apply defensive coding and formatting across dark-mode utilities and the generator UI. Key changes: - Add ESLint rules (curly, eqeqeq). - Add explicit braces and block returns to many functions (normalizeConfig, normalizeShadeMap, normalizeColorMap, normalizeUtilities, normalizeRule, loadConfig, saveConfig, transform-class, transform-html, and component methods) to improve readability and avoid ambiguous control flow. - Strengthen null/undefined checks and early returns (file import, clipboard copy, dialog close, iframe handling, element queries, etc.). - Minor DOM/markup formatting and class/attribute reflows in DarkModeGenerator.astro (line wrapping, small class name tweak for alignment, SVG path inline). - Small behavior/comments tweak: avoid clearing timers without braces and make clipboard catch a no-op. - Update git metadata newline at EOF. No core algorithm changes — these edits are primarily safety, style, and maintainability improvements.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adjust DarkModeGenerator layout and sizing (increase gap, add textarea text-sm, remove extra padding, reduce preview/code heights). Fix import file handler to properly short-circuit on missing/failed imports and tidy event listener formatting. Consolidate form input classes and update SVG icon constants (add xmlns/size attributes and lucide classes). Simplify preview-document to return a template literal HTML (embed Tailwind script tag) and remove inline background style. Minor formatting/whitespace cleanup in rule-renderer.
…ughout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ons to group Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ons by default Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Visual and class updates for the dark-mode panel and controls: - src/components/DarkModeSidePanel.astro: add border to the options panel wrapper and update the info button styles (hover/background/text color) for better contrast and consistency. - src/lib/dark-mode/element-constants.js: simplify FORM_INPUT_CLASS (removed resize-none) to align input styling. - src/lib/dark-mode/ui-renderer.js: tweak shade input classes (remove extra padding/focus classes, adjust alignment) and improve the empty rules message typography for readability. Also a small formatting fix in the aria-label setAttribute call. These changes are UI-focused to improve visual consistency and legibility across the dark-mode controls.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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.
Summary
/toolssection to HyperUI, evolving the site from a component library into a component and tools librarydark:variants added — fully browser-based, nothing leaves the clientsrc/lib/dark-mode/) used by both the GUI and the existing CLI scriptWhat's included
Shared core
src/constants/dark-mode.js—SHADE_MAP,COLOR_MAP,COLOR_FAMILIESsrc/lib/dark-mode/transform-class.js— per-class transform logic with element-aware rule matchingsrc/lib/dark-mode/transform-html.js—transformHtmlString(regex, CLI/Node) +transformHtmlDom(DOMParser, browser)src/lib/dark-mode/config.js—DEFAULT_CONFIG, localStorage persistence, normalizer, import/exportPages & component
src/pages/tools/index.astro— tools landing pagesrc/pages/tools/dark-mode-generator.astro— page wrappersrc/components/DarkModeGenerator.astro— full GUI with sidebar config, live preview, and code outputOther
src/constants/seo.js— replaces deletedsrc/consts.ts; all 8 importers updatedscripts/generate-dark-variants.js— refactored to import from shared core (behavior unchanged)src/components/SiteHeader.astro+DropdownMenu.astro— Tools nav link addedSafety model
textContent, neverinnerHTMLDOMParserbuilds a detached document — no scripts run<iframe sandbox="allow-scripts">withoutallow-same-origin— cannot reach parentnormalizeConfig()always returns a safe defaultTest plan
/tools— landing card present/tools/dark-mode-generator— tool loads, config persists across reloadbg-white→bg-white dark:bg-gray-900)buttonfor shade600—<button class="bg-blue-600">is untouched<script>alert(1)</script>and<img src=x onerror=alert(1)>— nothing executespnpm generate:dark-variantsoutput is identical to before the refactor🤖 Generated with Claude Code