Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 00:03:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: added constants for theme variables (#777)

Browse Source 
fixes: #776
This commit is contained in:
Apoorv Taneja
2023-12-26 05:19:27 +05:30
committed by GitHub
parent e9312ada51
commit 5a32b5cafd
3 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/ui/primitives/constants.ts Normal file
View File

@ -0,0 +1,5 @@
export const THEMES_TYPE = {
DARK: 'dark',
LIGHT: 'light',
SYSTEM: 'system'
};

14
packages/ui/primitives/theme-switcher.tsx
View File

@ -4,6 +4,8 @@ import { useTheme } from 'next-themes';
import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
import { THEMES_TYPE } from './constants';
export const ThemeSwitcher = () => {
const { theme, setTheme } = useTheme();
const isMounted = useIsMounted();
@ -12,9 +14,9 @@ export const ThemeSwitcher = () => {
<div className="bg-muted flex items-center gap-x-1 rounded-full p-1">
<button
className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
onClick={() => setTheme('light')}
onClick={() => setTheme(THEMES_TYPE.LIGHT)}
>
{isMounted && theme === 'light' && (
{isMounted && theme === THEMES_TYPE.LIGHT && (
<motion.div
className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
layoutId="selected-theme"
@ -25,9 +27,9 @@ export const ThemeSwitcher = () => {
<button
className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
onClick={() => setTheme('dark')}
onClick={() => setTheme(THEMES_TYPE.DARK)}
>
{isMounted && theme === 'dark' && (
{isMounted && theme === THEMES_TYPE.DARK && (
<motion.div
className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
layoutId="selected-theme"
@ -39,9 +41,9 @@ export const ThemeSwitcher = () => {
<button
className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
onClick={() => setTheme('system')}
onClick={() => setTheme(THEMES_TYPE.SYSTEM)}
>
{isMounted && theme === 'system' && (
{isMounted && theme === THEMES_TYPE.SYSTEM && (
<motion.div
className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
layoutId="selected-theme"