Skip to content

feat(cli): add installable mode-toggle component #230

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AMDphreak wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(cli): add installable mode-toggle component #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 1 addition & 38 deletions apps/docs/src/components/mode-toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1 @@
import { useColorMode } from "@kobalte/core"

import { IconLaptop, IconMoon, IconSun } from "~/components/icons"
import { Button } from "~/registry/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger
} from "~/registry/ui/dropdown-menu"

export function ModeToggle() {
const { setColorMode } = useColorMode()

return (
<DropdownMenu>
<DropdownMenuTrigger as={Button<"button">} variant="ghost" size="sm" class="w-9 px-0">
<IconSun class="size-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<IconMoon class="absolute size-6 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span class="sr-only">Toggle theme</span>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onSelect={() => setColorMode("light")}>
<IconSun class="mr-2 size-4" />
<span>Light</span>
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setColorMode("dark")}>
<IconMoon class="mr-2 size-4" />
<span>Dark</span>
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setColorMode("system")}>
<IconLaptop class="mr-2 size-4" />
<span>System</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
export { ModeToggle } from "~/registry/ui/mode-toggle"
39 changes: 1 addition & 38 deletions apps/docs/src/registry/example/mode-toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1 @@
import { useColorMode } from "@kobalte/core"

import { IconLaptop, IconMoon, IconSun } from "~/components/icons"
import { Button } from "~/registry/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger
} from "~/registry/ui/dropdown-menu"

export default function ModeToggle() {
const { setColorMode } = useColorMode()

return (
<DropdownMenu>
<DropdownMenuTrigger as={Button<"button">} variant="ghost" size="sm" class="w-9 px-0">
<IconSun class="size-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<IconMoon class="absolute size-6 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span class="sr-only">Toggle theme</span>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onSelect={() => setColorMode("light")}>
<IconSun class="mr-2 size-4" />
<span>Light</span>
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setColorMode("dark")}>
<IconMoon class="mr-2 size-4" />
<span>Dark</span>
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setColorMode("system")}>
<IconLaptop class="mr-2 size-4" />
<span>System</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
export { ModeToggle as default } from "~/registry/ui/mode-toggle"
12 changes: 12 additions & 0 deletions apps/docs/src/registry/registry-ui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,18 @@ export const ui: Registry = [
}
]
},
{
name: "mode-toggle",
type: "ui",
dependencies: ["@kobalte/core", "lucide-solid"],
registryDependencies: ["button", "dropdown-menu"],
files: [
{
path: "ui/mode-toggle.tsx",
type: "ui"
}
]
},
{
name: "navigation-menu",
type: "ui",
Expand Down
38 changes: 38 additions & 0 deletions apps/docs/src/registry/ui/mode-toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { useColorMode } from "@kobalte/core"
import { Laptop, Moon, Sun } from "lucide-solid"

import { Button } from "~/registry/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger
} from "~/registry/ui/dropdown-menu"

export function ModeToggle() {
const { setColorMode } = useColorMode()

return (
<DropdownMenu>
<DropdownMenuTrigger as={Button<"button">} variant="ghost" size="sm" class="w-9 px-0">
<Sun class="size-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon class="absolute size-6 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span class="sr-only">Toggle theme</span>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onSelect={() => setColorMode("light")}>
<Sun class="mr-2 size-4" />
<span>Light</span>
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setColorMode("dark")}>
<Moon class="mr-2 size-4" />
<span>Dark</span>
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setColorMode("system")}>
<Laptop class="mr-2 size-4" />
<span>System</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
12 changes: 7 additions & 5 deletions apps/docs/src/routes/(app)/docs/dark-mode/solid-start.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,17 +46,19 @@ export default function App() {
}
```

### Add needed components
### Add a mode toggle

Make sure you have the `button` and `dropdown-menu` components installed.
Install the mode toggle (pulls in `button` and `dropdown-menu` automatically) and place it in your layout.

```bash
npx solidui-cli@latest add button dropdown-menu
npx solidui-cli@latest add mode-toggle
```

### Add a mode toggle
```tsx
import { ModeToggle } from "~/components/ui/mode-toggle"
```

Place a mode toggle on your site to toggle between light and dark mode.
Place a mode toggle on your site to toggle between light, dark, and system mode.

<ComponentPreview name="mode-toggle" />

Expand Down
12 changes: 7 additions & 5 deletions apps/docs/src/routes/(app)/docs/dark-mode/vite.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,19 @@ export default function App() {
}
```

### Add needed components
### Add a mode toggle

Make sure you have the `button` and `dropdown-menu` components installed.
Install the mode toggle (pulls in `button` and `dropdown-menu` automatically) and place it in your layout.

```bash
npx solidui-cli@latest add button dropdown-menu
npx solidui-cli@latest add mode-toggle
```

### Add a mode toggle
```tsx
import { ModeToggle } from "~/components/ui/mode-toggle"
```

Place a mode toggle on your site to toggle between light and dark mode.
Place a mode toggle on your site to toggle between light, dark, and system mode.

<ComponentPreview name="mode-toggle" />

Expand Down