feat: preferred color scheme

examples/dashboard/src/App.tsx

@@ -5,7 +5,7 @@ import { EffectComposer, TiltShift2 } from '@react-three/postprocessing'
 import { Container, Root, Text } from '@react-three/uikit'
 import { Activity, CreditCard, DollarSign, Users } from '@react-three/uikit-lucide'
 
-import { DefaultColors, colors } from '@/defaults'
+import { DefaultColors, colors } from '@/theme'
 import { Button } from '@/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/tabs'

examples/dashboard/src/components/MainNav.tsx

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react'
 import { Container, Text } from '@react-three/uikit'
-import { colors } from '@/defaults'
+import { colors } from '@/theme'
 
 export function MainNav(props: Omit<ComponentPropsWithoutRef<typeof Container>, 'children'>) {
   return (

examples/dashboard/src/components/Overview.tsx

@@ -1,5 +1,5 @@
 import { Container, Text } from '@react-three/uikit'
-import { colors } from '@/defaults'
+import { colors } from '@/theme'
 
 const data = [
   {

examples/dashboard/src/components/RecentSales.tsx

@@ -1,6 +1,6 @@
 import { Container, Text } from '@react-three/uikit'
 import { Avatar } from '@/avatar'
-import { colors } from '@/defaults'
+import { colors } from '@/theme'
 
 export function RecentSales() {
   return (

examples/dashboard/src/components/UserNav.tsx

@@ -11,7 +11,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/dialog'
-import { colors } from '@/defaults'
+import { colors } from '@/theme'
 import { Switch } from '@/switch'
 
 const notifications = [

examples/default/src/App.tsx

@@ -6,7 +6,7 @@ import { Perf } from 'r3f-perf'
 
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/accordion'
 import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@/alert'
-import { DefaultColors, colors } from '@/defaults'
+import { DefaultColors, colors } from '@/theme'
 import { Avatar } from '@/avatar'
 import { Badge } from '@/badge'
 import { Button } from '@/button'

examples/market/src/App.tsx

@@ -3,7 +3,7 @@ import { Canvas } from '@react-three/fiber'
 import { EffectComposer, TiltShift2 } from '@react-three/postprocessing'
 import { Root, Container, Image, Text, Fullscreen, DefaultProperties } from '@react-three/uikit'
 import { PlusCircle } from '@react-three/uikit-lucide'
-import { DefaultColors, colors } from '@/defaults.js'
+import { DefaultColors, colors } from '@/theme.js'
 import { DialogAnchor } from '@/dialog.js'
 import { Tabs, TabsList, TabsContent, TabsTrigger } from '@/tabs.js'
 import { Separator } from '@/separator.js'

examples/market/src/components/album-artwork.tsx

@@ -1,7 +1,7 @@
 import { Container, Text, Image } from '@react-three/uikit'
 import { Album } from '../data/albums.js'
 import { ComponentPropsWithoutRef } from 'react'
-import { colors } from '@/defaults.js'
+import { colors } from '@/theme.js'
 
 export function AlbumArtwork({
   album,

examples/market/src/components/menu.tsx

@@ -1,7 +1,11 @@
+import { Button } from '@/button'
 import { Menubar, MenubarMenu, MenubarTrigger } from '@/menubar.js'
-import { SvgIconFromText, Text } from '@react-three/uikit'
+import { Container, SvgIconFromText, Text, getPreferredColorScheme, setPreferredColorScheme } from '@react-three/uikit'
+import { useState } from 'react'
+import { Moon, Sun, SunMoon } from '@react-three/uikit-lucide'
 
 export function Menu() {
+  const [pcs, updatePCS] = useState(() => getPreferredColorScheme())
   return (
     <Menubar borderRadius={0} paddingX={8} lg={{ paddingX: 16 }}>
       <MenubarMenu>
@@ -34,6 +38,18 @@ export function Menu() {
           <Text>Account</Text>
         </MenubarTrigger>
       </MenubarMenu>
+      <Container flexGrow={1} />
+
+      <MenubarMenu>
+        <MenubarTrigger
+          onClick={() => {
+            setPreferredColorScheme(pcs === 'light' ? 'dark' : pcs === 'dark' ? 'system' : 'light')
+            updatePCS(getPreferredColorScheme())
+          }}
+        >
+          {pcs === 'dark' ? <Moon /> : pcs === 'system' ? <SunMoon /> : <Sun />}
+        </MenubarTrigger>
+      </MenubarMenu>
     </Menubar>
   )
 }

examples/uikit/src/App.tsx

@@ -81,9 +81,10 @@ export default function App() {
             keepAspectRatio={false}
             borderRight={100}
           >
-            <Box>
+            <mesh>
+              <planeGeometry />
               <meshPhongMaterial depthWrite={false} transparent />
-            </Box>
+            </mesh>
           </Content>
           <Content width={100}>
             <Gltf src="example.glb" />

packages/kits/default/alert-dialog.tsx

@@ -10,7 +10,7 @@ import {
   useCloseDialog,
 } from './dialog.js'
 import { Container, DefaultProperties } from '@react-three/uikit'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 export const AlertDialogOverlay = DialogOverlay
 

packages/kits/default/alert.tsx

@@ -1,6 +1,6 @@
 import { AllOptionalProperties, Container, DefaultProperties } from '@react-three/uikit'
 import { ComponentPropsWithoutRef, ReactNode } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 const alertVariants = {
   default: {},

packages/kits/default/badge.tsx

@@ -1,6 +1,6 @@
 import { AllOptionalProperties, Container, DefaultProperties } from '@react-three/uikit'
 import { ComponentPropsWithoutRef } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 const badgeVariants = {
   default: {

packages/kits/default/button.tsx

@@ -1,6 +1,6 @@
 import { AllOptionalProperties, Container, DefaultProperties } from '@react-three/uikit'
 import { ComponentPropsWithoutRef } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 const buttonVariants = {
   default: {

packages/kits/default/card.tsx

@@ -1,6 +1,6 @@
 import { Container, DefaultProperties } from '@react-three/uikit'
 import { ComponentPropsWithoutRef, ReactNode } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 export function Card({ children, ...props }: ComponentPropsWithoutRef<typeof Container>) {
   return (

packages/kits/default/checkbox.tsx

@@ -1,7 +1,7 @@
 import { Container } from '@react-three/uikit'
 import { Check } from '@react-three/uikit-lucide'
 import { ComponentPropsWithoutRef, useState } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 export function Checkbox({
   defaultChecked,

packages/kits/default/dialog.tsx

@@ -1,5 +1,5 @@
 import { Container, DefaultProperties } from '@react-three/uikit'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 import {
   ComponentPropsWithoutRef,
   ReactNode,

packages/kits/default/menubar.tsx

@@ -1,6 +1,6 @@
 import { Container, DefaultProperties } from '@react-three/uikit'
 import { ComponentPropsWithoutRef, ReactNode } from 'react'
-import { colors } from './defaults'
+import { colors } from './theme'
 
 export function MenubarMenu({ children }: { children?: ReactNode }) {
   return <>{children}</>

packages/kits/default/pagination.tsx

@@ -1,7 +1,7 @@
 import { Container, Text } from '@react-three/uikit'
 import { ChevronLeft, ChevronRight, MoreHorizontal } from '@react-three/uikit-lucide'
 import { ComponentPropsWithoutRef } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 export function Pagination(props: ComponentPropsWithoutRef<typeof Container>) {
   return <Container marginX="auto" flexDirection="row" width="100%" justifyContent="center" {...props} />

packages/kits/default/progress.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@react-three/uikit'
 import { ComponentPropsWithoutRef, useMemo } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 import { WithReactive } from '@react-three/uikit/dist/properties/utils.js'
 import { computed } from '@preact/signals-core'
 

packages/kits/default/radio-group.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@react-three/uikit'
 import { ComponentPropsWithoutRef, createContext, useContext, useMemo, useState } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 const RadioGroupContext = createContext<{
   value?: string

packages/kits/default/separator.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@react-three/uikit'
 import { ComponentPropsWithoutRef } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 export function Separator({
   orientation = 'horizontal',

packages/kits/default/skeleton.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@react-three/uikit'
 import { ComponentPropsWithoutRef, useMemo, useRef } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 import { useFrame } from '@react-three/fiber'
 import { signal } from '@preact/signals-core'
 

packages/kits/default/slider.tsx

@@ -1,5 +1,5 @@
 import { Container, ComponentInternals } from '@react-three/uikit'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 import { ComponentPropsWithoutRef, useMemo, useRef, useState } from 'react'
 import { EventHandlers, ThreeEvent } from '@react-three/fiber/dist/declarations/src/core/events.js'
 import { Vector3 } from 'three'

packages/kits/default/switch.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@react-three/uikit'
 import { ComponentPropsWithoutRef, useState } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 export function Switch({
   defaultChecked,

packages/kits/default/tabs.tsx

@@ -1,6 +1,6 @@
 import { Container, DefaultProperties } from '@react-three/uikit'
 import { ComponentPropsWithoutRef, ReactNode, createContext, useContext, useMemo, useState } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 const TabsContext = createContext<{
   value?: string

packages/kits/default/theme.tsx

@@ -0,0 +1,65 @@
+import { basedOnPreferredColorScheme, DefaultProperties } from '@react-three/uikit'
+import { ComponentPropsWithoutRef } from 'react'
+import { Color } from 'three'
+
+function hsl(h: number, s: number, l: number) {
+  return new Color().setHSL(h / 360, s / 100, l / 100, 'srgb')
+}
+
+export const colors = basedOnPreferredColorScheme({
+  light: {
+    background: hsl(0, 0, 100),
+    foreground: hsl(222.2, 84, 4.9),
+    card: hsl(0, 0, 1),
+    cardForeground: hsl(222.2, 84, 4.9),
+    popover: hsl(0, 0, 100),
+    popoverForeground: hsl(222.2, 84, 4.9),
+    primary: hsl(100.2, 0.774, 51.2),
+    primaryForeground: hsl(210, 40, 98),
+    secondary: hsl(210, 40, 96.1),
+    secondaryForeground: hsl(222.2, 47.4, 11.2),
+    muted: hsl(210, 40, 96.1),
+    mutedForeground: hsl(215.4, 16.3, 46.9),
+    accent: hsl(210, 40, 96.1),
+    accentForeground: hsl(222.2, 47.4, 11.2),
+    destructive: hsl(0, 72.22, 50.59),
+    destructiveForeground: hsl(210, 40, 98),
+    border: hsl(214.3, 31.8, 91.4),
+    input: hsl(214.3, 31.8, 91.4),
+    ring: hsl(222.2, 84, 4.9),
+  },
+  dark: {
+    background: hsl(222.2, 84, 4.9),
+    foreground: hsl(210, 40, 98),
+    card: hsl(222.2, 84, 4.9),
+    cardForeground: hsl(210, 40, 98),
+    popover: hsl(222.2, 84, 4.9),
+    popoverForeground: hsl(210, 40, 98),
+    primary: hsl(210, 40, 98),
+    primaryForeground: hsl(222.2, 47.4, 11.2),
+    secondary: hsl(217.2, 32.6, 17.5),
+    secondaryForeground: hsl(210, 40, 98),
+    muted: hsl(217.2, 32.6, 17.5),
+    mutedForeground: hsl(215, 20.2, 65.1),
+    accent: hsl(217.2, 32.6, 17.5),
+    accentForeground: hsl(210, 40, 98),
+    destructive: hsl(0, 62.8, 30.6),
+    destructiveForeground: hsl(210, 40, 98),
+    border: hsl(217.2, 32.6, 17.5),
+    input: hsl(217.2, 32.6, 17.5),
+    ring: hsl(212.7, 26.8, 83.9),
+  },
+})
+
+export function DefaultColors(props: ComponentPropsWithoutRef<typeof DefaultProperties>) {
+  return (
+    <DefaultProperties
+      scrollbarColor={colors.foreground}
+      scrollbarBorderRadius={4}
+      scrollbarOpacity={0.3}
+      borderColor={colors.border}
+      color={colors.foreground}
+      {...props}
+    />
+  )
+}

packages/kits/default/toggle-group.tsx

@@ -1,6 +1,6 @@
 import { Container, DefaultProperties } from '@react-three/uikit'
 import { ComponentPropsWithoutRef, createContext, useContext, useState } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 const toggleVariants = {
   default: {

packages/kits/default/toggle.tsx

@@ -1,6 +1,6 @@
 import { Container, DefaultProperties } from '@react-three/uikit'
 import { ComponentPropsWithoutRef, useState } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 const toggleVariants = {
   default: {

packages/kits/default/tooltip.tsx

@@ -1,6 +1,6 @@
 import { Container, DefaultProperties } from '@react-three/uikit'
 import { ComponentPropsWithoutRef, createContext, useContext, useEffect, useRef, useState } from 'react'
-import { colors } from './defaults.js'
+import { colors } from './theme.js'
 
 const TooltipContext = createContext<boolean>(null as any)
 

packages/uikit/src/components/container.tsx

@@ -39,6 +39,7 @@ import { useRootGroupRef } from '../utils.js'
 import { useApplyResponsiveProperties } from '../responsive.js'
 import { Group } from 'three'
 import { ElementType, OrderInfoProvider, ZIndexOffset, useOrderInfo } from '../order.js'
+import { useApplyPreferredColorSchemeProperties } from '../dark.js'
 
 export type ContainerProperties = WithConditionals<
   WithClasses<
@@ -95,6 +96,7 @@ export const Container = forwardRef<
 
   //apply all properties
   useApplyProperties(collection, properties)
+  useApplyPreferredColorSchemeProperties(collection, properties)
   useApplyResponsiveProperties(collection, properties)
   const hoverHandlers = useApplyHoverProperties(collection, properties)
   finalizeCollection(collection)