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

Author: desmondinho

docs/LumexUI.Docs.Client/Components/Callout.razor

@@ -42,7 +42,7 @@
         {
             CalloutVariant.Info => typeof( InfoIcon ),
             CalloutVariant.Warning => typeof( ShieldAlertIcon ),
-            CalloutVariant.Danger => typeof( OctagonAlertIcon ),
+            CalloutVariant.Danger => typeof( OctagonAlertFilledIcon ),
             CalloutVariant.Success => typeof( CircleCheckIcon ),
             CalloutVariant.Tip => typeof( InfoIcon ),
             _ => throw new NotImplementedException()

docs/LumexUI.Docs.Client/Components/CodeSnippet.razor

@@ -1,18 +1,30 @@
 @namespace LumexUI.Docs.Client.Components
 @rendermode InteractiveWebAssembly
 
-<div class="relative my-6 first:mt-0 last:mb-0 rounded-large overflow-hidden" @ref="@_ref">
-    <div class="prose prose-zinc bg-zinc-800">
-        @if( !string.IsNullOrEmpty( Code.Name ) )
-        {
-            <div class="flex items-center px-3 py-2 text-xs leading-6 border-b border-zinc-600/50">
-                <div class="flex items-center px-2 py-0.5 text-orange-400 bg-zinc-700/40 rounded-lg">
+<div class="group relative my-6 first:mt-0 last:mb-0"
+     data-expanded="@(Expandable ? _isExpanded.ToAttributeValue() : null)">
+    <div class="rounded-large overflow-hidden group-data-[expanded=false]:max-h-72">
+        <div class="prose prose-zinc dark:prose-invert">
+            @if( !string.IsNullOrEmpty( Code.Name ) )
+            {
+                <div class="flex items-center px-4 py-2.5 gap-2 border-b border-zinc-700 text-small text-foreground-400 bg-zinc-800 dark:text-foreground-500 dark:bg-zinc-900">
+                    <CodeXmlIcon Size="16" />
                     @Code.Name
                 </div>
+            }
+
+            <div id="@Id" class="*:my-0" @ref="@_ref">
+                @_renderCodeSnippet
             </div>
-        }
-        <div id="@Id" class="*:my-0">
-            @_renderCodeSnippet
         </div>
     </div>
+
+    @if( Expandable )
+    {
+        <button type="button"
+                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"
+                @onclick="@(() => _isExpanded = true)">
+            Expand
+        </button>
+    }
 </div>

docs/LumexUI.Docs.Client/Components/CodeSnippet.razor.cs

@@ -9,14 +9,16 @@ namespace LumexUI.Docs.Client.Components;
 public partial class CodeSnippet
 {
     [Parameter] public string? Id { get; set; }
+	[Parameter] public bool Expandable { get; set; }
     [Parameter, EditorRequired] public CodeBlock Code { get; set; } = default!;
 
     [Inject] private IJSRuntime JSRuntime { get; set; } = default!;
 
     private readonly RenderFragment _renderCodeSnippet;
     private ElementReference _ref;
+	private bool _isExpanded;
 
-    public CodeSnippet()
+	public CodeSnippet()
     {
         _renderCodeSnippet = RenderCodeSnippet;
     }

docs/LumexUI.Docs.Client/Components/CodeSnippetCollapsible.razor

@@ -12,14 +12,21 @@
             var componentPathSegment = component.Replace( "Lumex", "" ).SplitPascalCase().ToKebabCase();
 
             <li>
-                <LumexLink Href="@($"{NavigationManager.BaseUri}docs/api/{componentPathSegment}")"
-                           Class="border-none text-orange-500 text-xs font-normal not-prose">
-                    <span class="px-1 py-0.5 rounded-md ring ring-orange-200 bg-orange-50">
+                <LumexChip Size="@Size.Small"
+                           Radius="@Radius.Small"
+                           Variant="@ChipVariant.Flat"
+                           Class="not-prose bg-default-50 ring ring-default-900/10">
+                    <LumexLink Href="@($"{NavigationManager.BaseUri}docs/api/{componentPathSegment}")"
+                               Class="font-mono text-orange-600 dark:text-orange-400">
                         @($"<{component} />")
-                    </span>
-                </LumexLink>
+                    </LumexLink>
+                </LumexChip>
             </li>
         }
+
+        @* <span class="px-1 py-0.5 rounded-md ring ring-orange-200 bg-default-50">
+            @($"<{component} />")
+        </span> *@
     </ul>
 </DocsSection>
 

docs/LumexUI.Docs.Client/Components/CodeSnippetCollapsible.razor.cs

@@ -8,7 +8,7 @@
         @foreach( var component in Components )
         {
             <li>
-                <strong class="text-orange-500">@component.Name</strong>: @component.Description
+                <strong class="text-orange-500 dark:text-orange-400">@component.Name</strong>: @component.Description
             </li>
         }
     </ul>

docs/LumexUI.Docs.Client/Components/DocsApiSection.razor

@@ -7,10 +7,9 @@
     <LumexComponent As="@(IsSubsection ? "h3" : "h2")"
                     id="@_id">
         <LumexLink Href="@($"{RelativePath}#{_id}")"
-                   Color="@ThemeColor.None"
-                   Class="border-none">
+                   Color="@ThemeColor.None">
             @Title
-            <span class="flex items-center justify-center size-6 ml-2 rounded-md text-foreground-400 shadow-xs ring ring-foreground-900/10 hover:ring-orange-200 hover:bg-orange-50 hover:text-orange-500">
+            <span class="flex items-center justify-center size-6 ml-2 rounded-md text-foreground-400 shadow-xs ring ring-default-900/10 hover:ring-orange-300 hover:bg-orange-400/10 hover:text-orange-500 dark:text-foreground-500 dark:hover:ring-orange-300/60 dark:hover:text-orange-200">
                 <Link2Icon Size="16" />
             </span>
         </LumexLink>

docs/LumexUI.Docs.Client/Components/DocsCompositionSection.razor

@@ -9,7 +9,7 @@
         @foreach( var slot in Slots )
         {
             <li>
-                <strong class="text-orange-500">@slot.Name:</strong> @slot.Description
+                <strong class="text-orange-500 dark:text-orange-400">@slot.Name:</strong> @slot.Description
             </li>
         }
     </ul>

docs/LumexUI.Docs.Client/Components/DocsSection.razor

@@ -4,7 +4,7 @@
 <LumexNavbar Sticky="@true"
              Bordered="@true"
              MaxWidth="@MaxWidth.XLarge"
-             Classes="@_navbarClasses">
+             Classes="@(new() { Wrapper = "gap-6" })">
     <LumexNavbarBrand>
         <LumexLink Href="/"
                    Class="font-bold text-xl text-foreground-900">
@@ -18,13 +18,13 @@
             <LumexNavbarItem>
                 <LumexLink Href="@item.Link"
                            Color="@ThemeColor.None"
-                           Class="hover:text-orange-500 data-[active=true]:text-orange-500">
+                           Class="data-[active=true]:text-orange-500 dark:text-foreground-700 dark:data-[active=true]:text-orange-400">
                     @item.Name
                 </LumexLink>
             </LumexNavbarItem>
         }
 
-        <LumexNavbarItem Class="h-full">
+        <LumexNavbarItem Class="h-6">
             <LumexDivider Orientation="@Orientation.Vertical" />
         </LumexNavbarItem>
         @_headerActions
@@ -41,22 +41,20 @@
 </LumexNavbar>
 
 @code {
-    private static RenderFragment _headerActions =
+    private readonly RenderFragment _headerActions =
     @<text>
         <LumexNavbarItem Class="flex">
             <LumexLink Href="https://github.com/LumexUI/lumexui"
                        External="@true"
-                       Class="text-foreground-400 hover:text-foreground-600">
+                       Class="text-foreground-500 hover:text-foreground-600 hover:opacity-100">
                 <GithubIcon Size="20" />
             </LumexLink>
         </LumexNavbarItem>
+        <LumexNavbarItem Class="flex">
+            <ThemeToggle />
+        </LumexNavbarItem>
     </text>;
 
-    private readonly NavbarSlots _navbarClasses = new()
-        {
-            Wrapper = "py-5 gap-6"
-        };
-
     private readonly NavItem[] _navItems = new NavItem[]
     {
         new("/", "Docs"),