docs: add dark mode support + theme toggle#235
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThis update extensively refactors the documentation site's components and styles to enhance dark mode support and introduce a theme toggle. It removes redundant or legacy components, updates CSS classes for dark mode compatibility, adds a new ThemeToggle component, synchronizes theme state across iframes, and upgrades PrismJS to enable line numbers in code blocks. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Header
participant ThemeToggle
participant ThemeService
participant Document
User->>ThemeToggle: Click toggle button
ThemeToggle->>ThemeService: ToggleThemeAsync()
ThemeService-->>ThemeToggle: Theme changed event
ThemeToggle-->>Header: Notify theme changed
Header-->>Document: Update root class (light/dark)
Document-->>User: UI updates with new theme
sequenceDiagram
participant User
participant CodeSnippet
participant UI
User->>CodeSnippet: View code snippet (Expandable=true)
CodeSnippet->>UI: Render snippet (collapsed, max-height)
User->>CodeSnippet: Click "Expand" button
CodeSnippet->>UI: Expand snippet (remove max-height)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Possibly related PRs
Suggested labels
Poem
Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 9
🔭 Outside diff range comments (1)
src/LumexUI/Styles/Badge.cs (1)
268-341: Hard-coding colour tokens reduces maintainabilityReplacing the reusable
ColorVariants.Flat[...]constants with literal class strings duplicates colour logic in this file and breaks the single-source-of-truth pattern adopted elsewhere (Solid,Shadow). Any future palette change must now be updated in two places.- [nameof( BadgeSlots.Badge )] = "bg-primary-200/80 text-primary-600 dark:bg-primary/20" + [nameof( BadgeSlots.Badge )] = ColorVariants.Flat[ThemeColor.Primary]Recommend reverting to the constants or extracting the new strings into the existing
ColorVariants.Flatdictionary so all variants stay centralised.
🧹 Nitpick comments (16)
docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/LoadingContent.razor (1)
1-1: Remove unnecessary Razor expression on boolean literal
@trueis parsed the same astruebut adds cognitive overhead and is easy to overlook when scanning markup.
A plain literal is clearer.-<LumexDataGrid Data="@_users" Loading="@true"> +<LumexDataGrid Data="@_users" Loading="true">docs/LumexUI.Docs.Client/Pages/Components/Card/PreviewCodes/CustomStyles.razor (1)
4-4: Align preview-wrapper styling with the new global pattern
Most updated previews also add padding (p-8) and sometimes a ring/border on the wrapper for visual consistency. This instance only setsbg-default-50. Consider matching the new convention so all preview blocks look identical.-PreviewWrapper = "bg-default-50" +PreviewWrapper = "bg-default-50 p-8"docs/LumexUI.Docs.Client/Samples/Installation/installationPackage.html (1)
1-1: Mixed use ofno-line-numbers– verify intention.Every other updated sample now opts-in to line numbers, but this one explicitly opts-out.
If this is intentional (e.g., to keep a one-liner compact) no change is needed. Otherwise, switch to the standardline-numbersclass for consistency.-<pre class="no-line-numbers"><code class="language-shell"> +<pre class="line-numbers"><code class="language-shell">src/LumexUI/Components/Tabs/LumexTabs.razor (1)
32-38: Whitespace-only diff – consider excluding from functional PRsThese lines only tweak spacing. While harmless, whitespace-only changes introduce noisy diffs that complicate future
git blameor cherry-picks. Prefer bundling formatting changes in a dedicated “style” commit or let an automated formatter run in a separate workflow.docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/CloseButton.razor (1)
4-4: Consider using a more descriptive comment or removing it entirely.The empty block comment
/* */doesn't provide meaningful information. Consider either adding a descriptive comment explaining the close behavior or removing the comment entirely for cleaner code.-private void OnClose( MouseEventArgs args ) { /* */ } +private void OnClose( MouseEventArgs args ) { }docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Image.razor (1)
3-5: Confirm availability oftext-tiny&rounded-mediumutilitiesSimilar to the previous file, these classes are non-standard. Ensure they are declared in your Tailwind config or exposed via a plugin (e.g.
@lumexui/tailwind-preset). Otherwise the new typography / radius will silently be ignored.You can reuse the shell snippet above, replacing the search patterns with
text-tinyandrounded-medium.Also applies to: 9-9
docs/LumexUI.Docs.Client/Components/CodeSnippet.razor.cs (3)
12-12: Fix indentation inconsistency.The parameter declaration uses tabs instead of spaces, which is inconsistent with the rest of the codebase that uses spaces for indentation.
- [Parameter] public bool Expandable { get; set; } + [Parameter] public bool Expandable { get; set; }
19-19: Fix indentation inconsistency.The field declaration uses tabs instead of spaces, which is inconsistent with the rest of the codebase.
- private bool _isExpanded; + private bool _isExpanded;
21-21: Fix indentation inconsistency.The constructor declaration uses tabs instead of spaces, which is inconsistent with the rest of the codebase.
- public CodeSnippet() + public CodeSnippet()docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/ExampleLayout.razor (1)
4-29: Well-implemented theme synchronization solution.The JavaScript implementation effectively handles theme synchronization between parent and iframe using MutationObserver. The approach covers both initial sync and dynamic changes, which is essential for responsive theme toggling.
Consider adding error handling for potential cross-origin access issues:
function syncThemeWithParent() { + try { const parentHtml = window.parent.document.documentElement; const iframeHtml = document.documentElement; const applyTheme = () => { const isDark = parentHtml.classList.contains('dark'); iframeHtml.classList.toggle('dark', isDark); }; // Initial sync applyTheme(); // Observe for class changes const observer = new MutationObserver(() => { applyTheme(); }); observer.observe(parentHtml, { attributes: true, attributeFilter: ['class'], }); + } catch (error) { + // Fallback or silent fail for cross-origin scenarios + console.warn('Theme sync failed:', error); + } }docs/LumexUI.Docs.Client/Components/DocsApiSection.razor (1)
27-29: Remove commented-out code.The commented-out span element should be removed to keep the codebase clean, unless it's intentionally kept for documentation purposes.
- @* <span class="px-1 py-0.5 rounded-md ring ring-orange-200 bg-default-50"> - @($"<{component} />") - </span> *@docs/LumexUI.Docs.Client/Pages/Components/Collapse/Examples/Usage.razor (1)
24-36: Remove duplicate CSS class in the builder chain.The
ElementClassbuilder chain includespy-1twice (lines 29 and 30), which is redundant and could lead to confusion.Apply this diff to remove the duplicate:
private string _directoryStyles = new ElementClass() .Add( "flex" ) .Add( "items-center" ) .Add( "gap-2" ) .Add( "px-2" ) .Add( "py-1" ) - .Add( "py-1" ) .Add( "rounded-medium" ) .Add( "cursor-pointer" ) .Add( "hover:bg-indigo-50" ) .Add( "hover:text-indigo-600" ) .Add( "dark:hover:bg-indigo-500/15" ) .Add( "dark:hover:text-indigo-200" );src/LumexUI.Shared.Icons/DynamicIcon.cs (1)
40-44: Consider parameter update behavior with TryAdd.The use of
TryAddmeans that if the same parameter is passed multiple times during the component lifecycle, only the first value will be preserved. This might not be the intended behavior for parameter updates.Consider using direct assignment instead:
else { - _attributes.TryAdd( entry.Name, entry.Value ); + _attributes[entry.Name] = entry.Value; }Alternatively, clear the dictionary at the start of
SetParametersAsyncif you want to maintain the TryAdd approach:public Task SetParametersAsync( ParameterView parameters ) { + _attributes.Clear(); // This manual parameter assignment logic will be marginally faster than callingdocs/LumexUI.Docs.Client/Components/Header.razor (1)
7-7: Consider performance impact of inline object creationWhile the inline object creation works, consider if this creates unnecessary allocations compared to a static predefined object, especially if this component renders frequently.
+private static readonly NavbarSlots _navbarClasses = new() { Wrapper = "gap-6" }; -Classes="@(new() { Wrapper = "gap-6" })" +Classes="@_navbarClasses"docs/LumexUI.Docs.Client/Components/CodeSnippet.razor (1)
24-28: Consider simplifying complex button stylingThe expand button functionality is well-implemented, but the CSS class string is quite complex. Consider extracting some classes to a CSS file or breaking into multiple class assignments for better maintainability.
-class="absolute inset-x-0 bottom-0 flex h-20 items-center justify-center rounded-b-large bg-linear-to-b from-default-800/70 to-default-800 text-foreground-200 text-small group-data-[expanded=true]:hidden dark:from-default-50/70 dark:to-default-50 dark:text-foreground-700" +class="@_expandButtonClasses"And add to code section:
private const string _expandButtonClasses = "absolute inset-x-0 bottom-0 flex h-20 items-center justify-center rounded-b-large " + "bg-linear-to-b from-default-800/70 to-default-800 text-foreground-200 text-small " + "group-data-[expanded=true]:hidden dark:from-default-50/70 dark:to-default-50 dark:text-foreground-700";docs/LumexUI.Docs/Styles/prism.css (1)
71-107: Consider using design system tokens for consistencyThe line numbering implementation is comprehensive and well-structured. However, consider replacing the hard-coded hover background color with a design system token for better theme consistency.
-background-color: rgba(128,128,128,.2) +background-color: var(--color-zinc-500/20)Also consider extracting the magic numbers (3.8em, 3em) as CSS custom properties for easier maintenance:
+:root { + --line-numbers-width: 3em; + --line-numbers-padding: 3.8em; +} -padding-left: 3.8em; +padding-left: var(--line-numbers-padding); -left: -3.8em; -width: 3em; +left: calc(-1 * var(--line-numbers-padding)); +width: var(--line-numbers-width);
docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/LoadingContent.razor
Show resolved
Hide resolved
docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/CustomStyles.razor
Show resolved
Hide resolved
docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/CustomStyles.razor
Show resolved
Hide resolved
docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/CustomStyles.razor
Show resolved
Hide resolved
* feat: support Tailwind CSS v4 (#183) * build(deps): bump TailwindMerge.NET from 0.3.0 to 1.0.0 * feat: add new CSS theme file * feat/build: add custom targets file to improve library usability * chore: move `Plugin` folder one level higher; remove `Scripts` folder * feat/build: pack new theme and custom `.targets` files * build(docs): add `Directory.Build.props` and `Directory.Build.targets` * chore(docs): remove tailwind npm deps; use standalone CLI instead * docs: apply `static` on theme * refactor(theme-provider): simplify names of box-shadow css variables * refactor(theme-provider): opacities are percentage to match `color-mix` function syntax * chore(components): apply `static` on theme; fix some vars * refactor(components): drop Tailwind CSS v3 support * feat(theme): add custom transition variables * fix(theme): correct `default` color; add `default-foreground` color * chore(theme): add reference for the custom transitions approach (it's not in docs afaik) * fix: rename `shadow-sm` to `shadow-xs` * fix: rename `rounded-sm` to `rounded-xs` * fix: rename `rounded` to `rounded-sm` * fix: rename `outline-none` to `outline-hidden` * fix: rename `ring-1` to `ring` * fix(button): add base `cursor-pointer` class * docs: remove `children` custom variant in favor of `*` * fix(theme): correct `enter` custom animation * chore(components): cleanup styles * fix(theme): add missing comma separator in custom transition vars * docs: configure typography * refactor(theme): simplify `scrollbar-hide` utility * chore(theme): apply `inline` on theme * refactor: replace `theme` function with CSS vars * fix(components): correct scale/translate transitions * feat(theme): update colors from hex to oklch * docs(installation): update installation guide * feat(theme): add leading CSS vars * chore(docs): fix prose `<code>` tag ticks * refactor(utils): remove hex luminance calculator * docs(customization): update Theme and Colors pages * docs(colors): remove 'common colors are not configurable' callout * fix(checkbox): correct radius styles * fix(data-grid): correct striped styles * fix(input/select): correct label placement out transitions * fix(input/select): correct outlined variant focus styles * fix(input): add cursor-pointer style on the clear button * fix(input/select): correct flat variant focus styles * fix(docs): correct some component examples * build(docs): adjust Tailwind standalone CLI file download for Linux * build(docs): adjust Tailwind standalone CLI file download for Linux * ci(deploy): try add staging env in the ci/cd * ci(build-test): change trigger branch * ci(deploy): update trigger branches * ci(deploy): change env vars usage (test) * ci: add deploy-dev.yml; revert deploy.yml * ci(deploy): test staging * chore(docs): nits * chore(components): tweak styles of some components * chore(docs): tweak some components examples * chore: coderabbit comments * ci: remove deploy-dev.yml * fix(theme): remove extra shade (950) from the color scales for consistency in dark mode (#199) * fix(theme): remove extra key (950) from the color scales for consistency in dark mode * build(docs): explicitly set Tailwind v4.0.9 * feat(components): introduce Avatar and AvatarGroup components (#201) * feat: add baseline implementation * feat: add slots * feat: add basic slots styles * feat: add appearance params, such as `Color`, `Radius`, `Size` * feat: add `Bordered` and `Disabled` params * feat: add compound variants styles * feat: apply slots styles * docs: add baseline examples page * feat: add `data-loaded` attribute on img * feat: add `ShowFallback` parameter * chore: fix compound style variants * chore: set `showFallback` on after first render * feat(utils): add implicit cast to string for the `ElementClass` * feat: add LumexAvatarGroup component * feat: take into account when LumexAvatar is rendered inside the LumexAvatarGroup * feat: add `AvatarClasses` parameter in the avatar group component * docs: add Avatar page * build(docs): explicitly set Tailwind v4.0.9 * test: add tests for LumexAvatar and LumexAvatarGroup components * chore: simplify condition for fallback render * fix(docs): replace usages of `-foreground-950` CSS classes with `-foreground-900` * fix(docs): remove `dark:prose-invert` CSS class until dark theme is properly configured * feat(components): introduce Skeleton component (#202) * feat(skeleton): add baseline implementation of the component * feat(skeleton): add slots and styles * feat(skeleton): add XML summaries * fix(skeleton): return back `after` pseudo CSS classes to prevent flickering on state change * docs(skeleton): add Skeleton page * test(skeleton): add tests * docs(skeleton): fix Loading example button text * fix(navbar): add a check before toggling navbar menu on navigation (#204) * feat(components): introduce Spinner component (#207) * feat(spinner): add baseline implementation * feat(spinner): add variants and styles * feat(spinner): add slots * docs(spinner): add Spinner page * docs: nits * test(spinner): add tests * docs: map static assets * build(docs): remove extra MSBuild target for the Tailwind prod build * docs: revert static assets changes * docs: update static assets usage * Revert "docs: update static assets usage" This reverts commit 94ae9ec. * feat(components): introduce Chip component (#211) * feat(chip): add baseline implementation * feat(chip): add ChipVariant enum * feat(chip): add appearance parameters and styles * feat(chip): add AvatarContent parameter * feat(chip): adjust paddings when chip has start/end content * docs(chip): add Chip page * feat(chip): add XML summaries * test(chip): add tests * chore(components): add missing XML documentation summaries * feat(components): add new Badge component (#222) * feat(badge): initial * feat(badge): add badge slots * feat(badge): add badge baseline implementation * feat(badge): add base visual-related params * feat(badge): add majority of badge styles * feat(badge): add outline around badge * feat(badge): add `Invisible` param to control badge visibility * feat(badge): add `IsOneChar` param to make badge equilateral * feat(badge): decrease badge dimensions if no content provided * refactor(badge): rename `IsOneChar` param to `OneChar` * fix(badge): use correct type for `Variant` param * feat(badge): apply CSS classes directly to the badge slot * fix(badge): ensure correct placement styles * fix(badge): correct `Content` check condition * fix(badge): allow null for content * fix(badge): properly render Content as RenderFragment * docs(badge): add Badge docs page * test(badge): add tests * test(badge): add more tests * fix(badge): ensure `OneChar` param is taken into account * fix(badge): fix one char switch * chore: apply CodeRabbit suggestions * build(deps): bump requests from 2.32.0 to 2.32.4 in /scripts (#219) Bumps [requests](https://github.com/psf/requests) from 2.32.0 to 2.32.4. - [Release notes](https://github.com/psf/requests/releases) - [Changelog](https://github.com/psf/requests/blob/main/HISTORY.md) - [Commits](psf/requests@v2.32.0...v2.32.4) --- updated-dependencies: - dependency-name: requests dependency-version: 2.32.4 dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(components): add Tooltip component (#224) * feat(tooltip): initial * refactor(popover): introduce PopoverWrapper to simplify open state * fix(popover): ensure arrow is positioned correctly * fix(popover): ensure popover closes on trigger click if already opened * fix(popover): position flicker * test(popover/dropdown): adjust tests * refactor(popover): remove LastShown meta from popover service * feat(tooltip): add baseline implementation * feat(tooltip): add common visual-related parameters to pass into popover * feat(tooltip): add OpenDelay and CloseDelay params * docs(tooltip): add Tooltip page * feat(tooltip): pass slots to popover * chore(popover): add full radius styles * test(tooltip): add tests * docs(tooltip): minor tweaks * docs(tooltip): typo * feat(components): add Alert component (#225) * feat(alert): add baseline implementation * feat(alert): add styles (may be not complete) * feat(alert): complete styles * feat(button): add full radius styles * feat(alert): apply styles * feat(alert): add close button handler * chore(alert): complete XML docs summaries * chore(docs): adjust background colors for preview and toolbar * chore(components): darken text color for warning flat variant * chore(alert): styling tweaks * feat(docs): add Alert page * chore(alert): add missing close-button slot attribute * chore(alert): ensure TitleContent takes precedence over Title * docs(alert): add callout regarding Title and TitleContent parameters usage * test(alert): add tests * fix(theme): add tw custom CSS class-based dark mode variant (#226) * refactor(theme): replace C# theme config with a new CSS-first approach (#229) * feat(theme): add light and dark theme CSS files * refactor(components): cleanup theme provider * refactor(theme): remove Theme directory * test(theme): remove Theme directory * docs(theme): remove theme config * fix(alert): correct RenderFragment parameters usage * chore(theme): correct theme variables * docs(customization): replace Customization section with Theming * test(theme-provider): remove all tests * feat(theme): introduce a mechanism to toggle light/dark modes (#230) * feat(theme): introduce Theme service to manage and persist theme settings (JS) * feat(theme): introduce Theme service to manage and persist theme settings * docs(*): rename ComponentStatus enum to PageStatus * docs(theming): add Dark Mode page * chore(docs): component rename * feat(button): add new `IconOnly` parameter * docs(button): add demo for `IconOnly` parameter * refactor(*): remove all bundled Google Material Icons and related code (#232) * build: add new shared icons project * feat(icons): add base icon component * feat(icons): add dynamic icon component * feat(icons): add some icons * build(deps): reference icons in components * refactor(accordion): use new icon components * docs(components): use new icons in Callout components * docs(*): use new icons * refactor(icons): add "Icon" suffix; add more icons * docs(*): use new icons * test(*): fix tests * refactor(components): remove `LumexIcon` component * docs(datagrid): formatting * refactor(icons): remove all Google Material Icons * refactor(icons): remove script for downloading/updating icons * feat(components): add dark mode support (#234) * feat(alert): add dark mode support * feat(button): add dark mode support * feat(chip): add dark mode support * feat(datagrid): add dark mode support * feat(textbox/numbox): add dark mode support * feat(listbox): add dark mode support * feat(menu): add dark mode support * feat(select): add dark mode support * feat(tabs): add dark mode support * fix(theme): ensure default values are of correct shade in dark mode * feat(theme): add `color-scheme` in light theme * fix(icons): use better icons for alert component * docs: add dark mode support + theme toggle (#235) * docs: add dark mode support * docs: add missing border for the preview component * docs: remove extra border in the preview code component * chore(badge): improve flat variant contrast in light theme * chore(tabs): remove `EditorRequired` attribute from `Id` param * docs: add null check and theme class cleanup to prevent issues * docs: remove IPopoverService injection from theme toggle component * chore(components): remove unused / redundant types * fix(data-grid): correct outside click handler creation * feat(popover): enable position autoUpdate * refactor(popover): make use of popover trigger component instead of service * feat(dropdown): introduce dropdown trigger component instead of relying on popover service * docs(dark-mode): update theme toggle dropdown example * docs: add Home page with library usage examples (#241) * feat(icons): add more icons * docs: add showcases on home page * chore(components): adjust some styles * docs(overview): update paths * chore(docs): nits * fix(components): add missing popover js parts * chore(docs): nits * fix(popover): use overlay to close instead of custom outside click event * fix(tooltip): remove pressed effect from on trigger hover * chore(showcases): complete column visibility toggling in UserTable example * chore(showcases): adjust legend color in usage chart * test(popover): update tests * chore(docs): coderabbit suggestions * chore(*): migrate to DigitalOcean app platform * fix(*): update custom LumexUI targets to copy theme files before build * chore(*): add missing css files in the pack * v2.0.0-preview.4 * perf(*): optimize fonts in docs app * fix(docs): stylesheets import ordering * perf(docs): optimize docs CSS output * fix(docs): correct linux tailwind executable file name * chore(*): delete update-icons.yml * perf(docs): enable stream rendering on all pages * fix(docs): ensure initial theme is set * docs(overview): update content * docs(installation): update content * docs(design-tokens): update content * docs(customization): update content * docs(dark-mode): update content * docs(accordion): update content * refactor(docs): replace `Callout` with `LumexAlert` * docs(avatar): update content * docs(components): replace `Code` component usages with HTML tag * fix(docs): ensure ThemeSelector sets correct theme value on init * docs(landing): make adaptive * docs(customization): add dark mode for global theme sample * refactor(components): remove deprecated `Root` slot * refactor(utils): remove redundant; update access modifiers * docs(card): update slot names * refactor(docs): make stream rendering global * docs(header): remove active state from links; update stars counter * ci(*): remove deploy.yml * ci: run build-test on PR to main * v2.0.0 --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Description
Closes #119
This PR adds dark mode support and theme toggle in the docs.
What's been done?
Checklist
Additional Notes
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Chores
Documentation