blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases 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

7
apps/web/src/components/(dashboard)/common/command-menu.tsx
View File

@@ -22,6 +22,7 @@ import {
CommandList, CommandList,
CommandShortcut, CommandShortcut,
} from '@documenso/ui/primitives/command'; } from '@documenso/ui/primitives/command';
import { THEMES_TYPE } from '@documenso/ui/primitives/constants';
const DOCUMENTS_PAGES = [ const DOCUMENTS_PAGES = [
{ {
@@ -215,9 +216,9 @@ const Commands = ({
const ThemeCommands = ({ setTheme }: { setTheme: (_theme: string) => void }) => { const ThemeCommands = ({ setTheme }: { setTheme: (_theme: string) => void }) => {
const THEMES = useMemo( const THEMES = useMemo(
() => [ () => [
{ label: 'Light Mode', theme: 'light', icon: Sun }, { label: 'Light Mode', theme: THEMES_TYPE.LIGHT, icon: Sun },
{ label: 'Dark Mode', theme: 'dark', icon: Moon }, { label: 'Dark Mode', theme: THEMES_TYPE.DARK, icon: Moon },
{ label: 'System Theme', theme: 'system', icon: Monitor }, { label: 'System Theme', theme: THEMES_TYPE.SYSTEM, icon: Monitor },
], ],
[], [],
); );

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