Issues/490 theme switcher (#504)

app/package.json

@@ -57,6 +57,7 @@
  "@radix-ui/react-toggle-group": "^1.1.0",
  "@radix-ui/react-tooltip": "^1.1.2",
  "@supabase/supabase-js": "^2.44.4",
+ "@tailwindcss/line-clamp": "^0.4.4",
  "class-variance-authority": "^0.7.0",
  "clsx": "^2.1.1",
  "cmdk": "1.0.0",
@@ -92,8 +93,8 @@
  "devDependencies": {
  "@eslint/js": "^9.7.0",
  "@playwright/test": "^1.42.1",
- "@types/babel-generator": "^6.25.8",
  "@types/babel__traverse": "^7.20.6",
+ "@types/babel-generator": "^6.25.8",
  "@types/bun": "^1.1.6",
  "@types/css-tree": "^2.3.8",
  "@types/culori": "^2.1.0",

app/src/App.tsx

@@ -6,7 +6,7 @@ import Routes from './routes';
 
 function App() {
  return (
- <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+ <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
  <TooltipProvider>
  <AppBar />
  <Routes />

app/src/components/Announcement/index.tsx

@@ -69,7 +69,7 @@ function Announcement() {
 
  return (
  <Dialog open={open} onOpenChange={handleOpenChange}>
- <DialogContent className="text-text space-x-2 text-sm space-y-2">
+ <DialogContent className="text-foreground-onlook space-x-2 text-sm space-y-2">
  <div className="flex relative items-start w-[calc(100%+3rem)] h-72 -m-6 mb-0 border-b rounded-t-lg overflow-hidden">
  <img
  className="absolute w-[calc(100%+3rem)]"
@@ -88,7 +88,7 @@ function Announcement() {
  <p>Stay up to date with Onlook</p>
  <div className="flex flex-row space-x-2">
  <Input
- className="bg-bg outline-none"
+ className="bg-background-onlook outline-none"
  placeholder="[email protected]"
  type="email"
  value={email}
@@ -107,15 +107,15 @@ function Announcement() {
  <Button
  variant="link"
  size="sm"
- className="text-text flex flex-row items-center hover:text-text-active"
+ className="text-foreground-onlook flex flex-row items-center hover:text-foreground-active"
  onClick={() => window.open(Links.GITHUB, '_blank')}
  >
  <GitHubLogoIcon className="mr-2" /> Star GitHub Repo
  </Button>
  <Button
  variant="link"
  size="sm"
- className="text-text flex flex-row items-center hover:text-text-active"
+ className="text-foreground-onlook flex flex-row items-center hover:text-foreground-active"
  onClick={() => window.open(Links.DISCORD, '_blank')}
  >
  <DiscordLogoIcon className="mr-2" />
@@ -124,7 +124,7 @@ function Announcement() {
  <Button
  variant="link"
  size="sm"
- className="text-text flex flex-row items-center hover:text-text-active"
+ className="text-foreground-onlook flex flex-row items-center hover:text-foreground-active"
  onClick={() => window.open(Links.WIKI, '_blank')}
  >
  <LayersIcon className="mr-2" /> Browse Docs
@@ -144,7 +144,7 @@ function Announcement() {
  {checked ? <CheckboxIcon /> : <BoxIcon />}
  </Toggle>
  <div className="text-xs">
- <p className="text-white">Share anonymized analytics</p>
+ <p className="text-foreground">Share anonymized analytics</p>
  <p>This helps our small team a lot!</p>
  </div>
  </div>

app/src/components/AppBar/WindowsControls.tsx

@@ -13,30 +13,30 @@ export const WindowsControls = () => {
  }
 
  return (
- <div className="flex mx-2 text-text-active">
+ <div className="flex mx-2 text-foreground-active">
  <Button
  onClick={() => sendCommand(WindowCommand.MINIMIZE)}
  variant={'ghost'}
- className="hover:bg-bg/30 outline-border"
+ className="hover:bg-background-onlook/30 hover:text-foreground outline-border"
  aria-label="Minimize"
  >
- <MinusIcon className="h-3 w-3 hover:text-white" />
+ <MinusIcon className="h-3 w-3" />
  </Button>
  <Button
  onClick={() => sendCommand(WindowCommand.MAXIMIZE)}
  variant={'ghost'}
- className="hover:bg-bg/30 outline-border"
+ className="hover:bg-background-onlook/30 hover:text-foreground outline-border"
  aria-label="Maximize"
  >
- <SquareIcon className="h-3 w-3 hover:text-white" />
+ <SquareIcon className="h-3 w-3" />
  </Button>
  <Button
  onClick={() => sendCommand(WindowCommand.CLOSE)}
  variant={'ghost'}
- className="hover:bg-bg/30 outline-border"
+ className="hover:bg-background-onlook/30 hover:text-foreground outline-border"
  aria-label="Close"
  >
- <Cross1Icon className="h-3 w-3 hover:text-white" />
+ <Cross1Icon className="h-3 w-3" />
  </Button>
  </div>
  );

app/src/components/AppBar/index.tsx

@@ -1,28 +1,53 @@
 import { useRouteManager, useUpdateManager } from '@/components/Context';
 import { Route } from '@/lib/routes';
-import { DiscordLogoIcon, GitHubLogoIcon } from '@radix-ui/react-icons';
+import {
+ DiscordLogoIcon,
+ GitHubLogoIcon,
+ LaptopIcon,
+ MoonIcon,
+ SunIcon,
+} from '@radix-ui/react-icons';
 import clsx from 'clsx';
 import { observer } from 'mobx-react-lite';
 import { Button } from '../ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 import UpdateButton from './UpdateButton';
 import { WindowsControls } from './WindowsControls';
 import { Links } from '/common/constants';
+import { useTheme } from '../ThemeProvider';
 
 const AppBar = observer(() => {
  const routeManager = useRouteManager();
  const updateManager = useUpdateManager();
+ const { theme, nextTheme, setTheme } = useTheme();
 
  return (
  <div
  className={clsx(
- 'flex flex-row items-center pl-20 h-10 border-b bg-bg-active transition-colors duration-300 ease-in-out',
+ 'flex flex-row items-center pl-20 h-10 border-b bg-background dark:bg-background-active transition-colors duration-300 ease-in-out',
  routeManager.route === Route.SIGN_IN && 'bg-transparent border-b-0',
  updateManager.updateAvailable &&
  'bg-red-950 transition-opacity duration-300 ease-in-out',
  )}
  >
  <div className="appbar w-full h-full"></div>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ size="sm"
+ variant="ghost"
+ className={clsx(updateManager.updateAvailable && 'hover:bg-red-800')}
+ onClick={() => {
+ setTheme(nextTheme);
+ }}
+ >
+ {theme === 'dark' && <MoonIcon />}
+ {theme === 'light' && <SunIcon />}
+ {theme === 'system' && <LaptopIcon />}
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>Switch to {nextTheme} mode</TooltipContent>
+ </Tooltip>
  <Tooltip>
  <TooltipTrigger asChild>
  <Button
@@ -58,7 +83,7 @@ const AppBar = observer(() => {
  <Button
  size={'sm'}
  variant={'ghost'}
- className="h-[26px] relative bg-black text-white rounded-sm transition-opacity duration-300 ease-in-out"
+ className="h-[26px] relative bg-secondary text-secondary-foreground rounded-sm transition-opacity duration-300 ease-in-out"
  onClick={() => {
  window.open(Links.OPEN_ISSUE, '_blank');
  }}

app/src/components/ThemeProvider.tsx

@@ -10,11 +10,13 @@ type ThemeProviderProps = {
 
 type ThemeProviderState = {
  theme: Theme;
+ nextTheme: Theme;
  setTheme: (theme: Theme) => void;
 };
 
 const initialState: ThemeProviderState = {
  theme: 'system',
+ nextTheme: 'dark',
  setTheme: () => null,
 };
 
@@ -30,6 +32,8 @@ export function ThemeProvider({
  () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
  );
 
+ const [nextTheme, setNextTheme] = useState<Theme>('dark');
+
  useEffect(() => {
  const root = window.document.documentElement;
 
@@ -41,17 +45,32 @@ export function ThemeProvider({
  : 'light';
 
  root.classList.add(systemTheme);
- return;
+ } else {
+ root.classList.add(theme);
  }
 
- root.classList.add(theme);
+ const next: Theme = (() => {
+ switch (theme) {
+ case 'dark':
+ return 'light';
+ case 'light':
+ return 'system';
+ case 'system':
+ return 'dark';
+ default:
+ return 'dark';
+ }
+ })();
+
+ setNextTheme(next);
  }, [theme]);
 
  const value = {
  theme,
- setTheme: (theme: Theme) => {
- localStorage.setItem(storageKey, theme);
- setTheme(theme);
+ nextTheme,
+ setTheme: (newTheme: Theme) => {
+ localStorage.setItem(storageKey, newTheme);
+ setTheme(newTheme);
  },
  };
 

app/src/components/ui/button.tsx

@@ -12,11 +12,11 @@ const buttonVariants = cva(
  default:
  'bg-primary border-[0.5px] text-primary-foreground shadow hover:bg-primary/90 hover:border-border-hover',
  destructive:
- 'border border-[0.5px] border-red-800 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:border-red-500 hover:bg-red-800',
+ 'border border-[0.5px] border-red-600 dark:border-red-800 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:border-red-500 dark:hover:border-red-800',
  outline:
  'border border-[0.5px] border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-border-hover',
  secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
- ghost: 'hover:bg-bg-hover hover:text-accent-foreground hover:border-border-hover',
+ ghost: 'hover:bg-background-hover hover:text-accent-foreground hover:border-border-hover',
  link: 'text-primary underline-offset-4 hover:underline',
  },
  size: {

app/src/components/ui/input.tsx

@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
  <input
  type={type}
  className={cn(
- 'flex h-9 w-full rounded border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:bg-bg focus-visible:border-border-active focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+ 'flex h-9 w-full rounded border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:bg-background-onlook focus-visible:border-border-active focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
  className,
  )}
  ref={ref}

app/src/components/ui/tabs.tsx

@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
  <TabsPrimitive.Trigger
  ref={ref}
  className={cn(
- 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:shadow',
+ 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-regular text-foreground-tertiary ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:font-semibold',
  className,
  )}
  {...props}

app/src/components/ui/toggle.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 const toggleVariants = cva(
- 'inline-flex items-center justify-center rounded text-sm text-text font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-text-active',
+ 'inline-flex items-center justify-center rounded text-sm text-foreground-onlook font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-foreground-active',
  {
  variants: {
  variant: {

app/src/components/ui/tooltip.tsx

@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
  ref={ref}
  sideOffset={sideOffset}
  className={cn(
- 'z-50 rounded-md bg-black px-2 py-1.5 text-xs text-text-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+ 'z-50 overflow-hidden rounded-md bg-primary px-2 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
  className,
  )}
  {...props}