Skip to content

Commit

Permalink
feat: add custom theme switch component (#726)
Browse files Browse the repository at this point in the history 
* feat: add custom theme switch

* fix: undo lockfile changes

* feat: update theme in global config
  • Loading branch information
@tinaszheng @moldy530
tinaszheng authored and moldy530 committed Aug 13, 2024
1 parent 28a257a commit 6028e24
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 59 deletions.
108 changes: 54 additions & 54 deletions examples/ui-demo/src/app/globals.css
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,76 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;

--radius: 0.5rem;
}
--radius: 0.5rem;
}

.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;

--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
25 changes: 20 additions & 5 deletions examples/ui-demo/src/components/configuration/Styling.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,30 @@ import { ColorPicker } from "./ColorPicker";
import { useConfig } from "@/src/app/state";
import { PhotoIcon } from "../icons/photo";
import { PhotoUploads } from "./PhotoUpload";
import { Switch } from "@/components/ui/switch";
import { ThemeSwitch } from "../shared/ThemeSwitch";
import { useState } from "react";

export function Styling({ className }: { className?: string }) {
const { config, setConfig } = useConfig();

const onSwitchTheme = (isDarkMode: boolean) => {
setConfig(prev => ({
...prev,
ui: {
...prev.ui,
theme: isDarkMode ? "dark" : "light"
}
}))
}
return (
<div className={cn("flex flex-col", className)}>
<div className="flex flex-col gap-4 border-b border-static py-4">
<div className="flex flex-col gap-4 border-b border-static py-6">
<p className="font-semibold text-secondary-foreground text-sm">Theme</p>
<ThemeSwitch checked={config.ui.theme === 'dark'} onCheckedChange={onSwitchTheme} />
</div>

<div className="flex flex-col gap-4 border-b border-static py-4 items-start">
<div className="flex flex-col gap-4 border-b border-static py-6 items-start">
<div className="flex flex-col gap-2">
<p className="font-semibold text-secondary-foreground text-sm">
Color
Expand All @@ -23,7 +38,7 @@ export function Styling({ className }: { className?: string }) {
<ColorPicker />
</div>

<div className="flex flex-col gap-4 border-b border-static py-4 items-start">
<div className="flex flex-col gap-4 border-b border-static py-6 items-start">
<div className="flex flex-col gap-2">
<p className="font-semibold text-secondary-foreground text-sm">
Logo
Expand All @@ -36,7 +51,7 @@ export function Styling({ className }: { className?: string }) {
</div>
</div>

<div className="flex flex-col gap-4 border-b border-static py-4 items-start">
<div className="flex flex-col gap-4 border-b border-static py-6 items-start">
<div className="flex flex-col gap-2 self-stretch">
<p className="font-semibold text-secondary-foreground text-sm">
Corner radius
Expand All @@ -45,7 +60,7 @@ export function Styling({ className }: { className?: string }) {
</div>
</div>

<div className="flex flex-col gap-4 py-4 items-start">
<div className="flex flex-col gap-4 py-6 items-start">
<div className="flex flex-col gap-2 self-stretch">
<p className="font-semibold text-secondary-foreground text-sm">
Illustration style
Expand Down
38 changes: 38 additions & 0 deletions examples/ui-demo/src/components/shared/ThemeSwitch.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"
import { Moon, Sun } from "lucide-react"

const ThemeSwitch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
"relative peer inline-flex h-10 w-48 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-gray-500 data-[state=unchecked]:bg-input",
className
)}
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-9 w-24 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[92px] data-[state=unchecked]:translate-x-0"
)}
></SwitchPrimitives.Thumb>
<div className="absolute flex text-sm items-center right-[2px] left-[2px] top-[2px] bottom-[2px] z-10 justify-between bg-transparent">
<div className="flex items-center data-[state=unchecked]:font-medium text-gray-950 justify-center gap-1 flex-1 basis-0">
<Sun size={18} /><div className={cn(!props.checked && "font-medium")}>Light</div>
</div>
<div className="flex items-center justify-center gap-1 flex-1 basis-0">
<Moon size={18} /><div className={cn(props.checked && "font-medium")}>Dark</div>
</div>
</div>
</SwitchPrimitives.Root>
))
ThemeSwitch.displayName = SwitchPrimitives.Root.displayName

export { ThemeSwitch }

0 comments on commit 6028e24

Please sign in to comment.