diff --git a/package.json b/package.json index 242793af..e8bae534 100644 --- a/package.json +++ b/package.json @@ -131,6 +131,7 @@ "@radix-ui/react-tooltip": "^1.0.7", "@tailwindcss/container-queries": "^0.1.1", "@uiw/react-color-chrome": "^2.0.6", + "@uiw/react-color-colorful": "^2.3.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "cmdk": "^0.2.1", diff --git a/src/config/settings.ts b/src/config/settings.ts index f8d6383c..3742196c 100644 --- a/src/config/settings.ts +++ b/src/config/settings.ts @@ -7,6 +7,7 @@ export type ViewModeType = 'grid' | 'list'; export type NotificationType = 'system' | 'app' | 'all'; export interface SettingsType { + accentColor: string; allowAnalytics: boolean; allowSounds: boolean; allowAutoUpdate: boolean; @@ -50,6 +51,7 @@ export interface SettingsType { export const DEFAULT_SETTINGS: SettingsType = { paths: [], + accentColor: '#b453ff', allowAnalytics: true, allowAutoUpdate: true, allowSounds: true, diff --git a/src/renderer/components/input/InputColor.tsx b/src/renderer/components/input/InputColor.tsx index ff9b98b8..c5db91a3 100644 --- a/src/renderer/components/input/InputColor.tsx +++ b/src/renderer/components/input/InputColor.tsx @@ -1,7 +1,7 @@ // todo: color value is reset when pure black // todo: clear button cannot be inside button import { simpleUUID } from '@/utils/getUUID'; -import Chrome from '@uiw/react-color-chrome'; +import Colorful from '@uiw/react-color-colorful'; import { useCallback, useMemo } from 'react'; import { Button } from '@/components/ui/button'; @@ -11,9 +11,11 @@ import { PopoverTrigger, } from '@/components/ui/popover'; import { invertColor } from '@/utils/invertColor'; +import Chrome from '@uiw/react-color-chrome'; import { ClearButton } from './ClearButton'; export function InputColor({ + variant = 'chrome', value, onChange, label, @@ -23,6 +25,7 @@ export function InputColor({ ...props }: { + variant?: 'chrome' | 'colorful'; value?: string; onChange?: (value: string) => void; label?: string; @@ -31,6 +34,7 @@ export function InputColor({ buttonText?: string; props?: any; }) { + const Component = variant === 'chrome' ? Chrome : Colorful; const color = useMemo(() => value || '', [value]); const uuid = useMemo(simpleUUID, []); @@ -75,24 +79,29 @@ export function InputColor({ - {color && ( )} - + - +
+ -
+
{children || }