duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add UI Customization Panel with full color theming

Browse Source 
- New "Interfaccia" panel with color picker (HSV + hex/RGB/alpha + 30 presets)
- Profile background customization tab
- Accent color propagates via CSS variables to: card headers/tabs,
  context menus, Button dark/primary/gray variants, InfoStand panels,
  toolbar, room tools, purse, .btn-primary/.btn-dark CSS classes
- All elements use var(--name, fallback) for zero visual change when default
- Settings persisted in localStorage
- Added react-colorful dependency
- Added ui-config.json with header images config keys
This commit is contained in:
medievalshell
2026-03-18 20:11:40 +01:00
committed by simoleo89
parent ae4ecc42f0
commit ea35f19940
25 changed files with 3192 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/room/widgets/context-menu/ContextMenuHeaderView.tsx
+8 -3
View File
@@ -3,16 +3,21 @@ import { Flex, FlexProps } from '../../../../common';
export const ContextMenuHeaderView: FC<FlexProps> = props =>
{
const { justifyContent = 'center', alignItems = 'center', classNames = [], ...rest } = props;
const { justifyContent = 'center', alignItems = 'center', classNames = [], style = {}, ...rest } = props;
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'bg-[#3d5f6e] text-[#fff] min-w-[117px] h-[25px] max-h-[25px] text-[16px] mb-[2px]', 'p-1' ];
const newClassNames: string[] = [ 'text-[#fff] min-w-[117px] h-[25px] max-h-[25px] text-[16px] mb-[2px]', 'p-1' ];
if(classNames.length) newClassNames.push(...classNames);
return newClassNames;
}, [ classNames ]);
return <Flex alignItems={ alignItems } classNames={ getClassNames } justifyContent={ justifyContent } { ...rest } />;
const mergedStyle = useMemo(() => ({
backgroundColor: 'var(--ui-ctx-header-bg, #3d5f6e)',
...style
}), [ style ]);
return <Flex alignItems={ alignItems } classNames={ getClassNames } justifyContent={ justifyContent } style={ mergedStyle } { ...rest } />;
};