feat: UI color theming system with live preview, presets and server sync

- RGBA color picker with live preview (debounce 50ms) - 30 preset colors + 12 theme presets (Ocean, Forest, Sunset, Royal, etc.) - Header image selection from configurable image library - Export/Import theme as JSON via clipboard - CSS variable theming across all UI elements: NitroCard headers/tabs, context menus, buttons (primary/dark/gray), InfoStand, toolbar, room tools, purse, progress bars, sliders - All elements use var(--name, fallback) for zero visual change when default - Smooth 0.3s CSS transitions on theme change - Server-side persistence via WebSocket (packets 10047/10048) - Integrated Color/Image tabs into BackgroundsView panel - All strings use LocalizeText() for i18n support - Settings persisted in localStorage + server sync with 1s debounce - Added react-colorful dependency
2026-06-19 15:06:20 +00:00 · 2026-03-22 21:39:44 +01:00
parent b73c0841f2
commit 9c2dccaad6
28 changed files with 774 additions and 70 deletions
@@ -21,6 +21,7 @@
        "framer-motion": "^11.2.12",
        "react": "^19.2.4",
        "react-bootstrap": "^2.10.10",
+        "react-colorful": "^5.6.1",
        "react-dom": "^19.2.4",
        "react-icons": "^5.5.0",
        "react-slider": "^2.0.6",
@@ -1,6 +1,6 @@
 import { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTexturePool, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { GetUIVersion } from './api';
+import { GetUIVersion, UiSettingsProvider } from './api';
 import { Base } from './common';
 import { LoadingView } from './components/loading/LoadingView';
 import { MainView } from './components/MainView';
@@ -90,12 +90,14 @@ export const App: FC<{}> = props =>
    }, []);

    return (
-        <Base fit overflow="hidden" className={ !(window.devicePixelRatio % 1) && 'image-rendering-pixelated' }>
-            { !isReady &&
-                <LoadingView /> }
-            { isReady && <MainView /> }
-            <ReconnectView />
-            <Base id="draggable-windows-container" />
-        </Base>
+        <UiSettingsProvider>
+            <Base fit overflow="hidden" className={ !(window.devicePixelRatio % 1) && 'image-rendering-pixelated' }>
+                { !isReady &&
+                    <LoadingView /> }
+                { isReady && <MainView /> }
+                <ReconnectView />
+                <Base id="draggable-windows-container" />
+            </Base>
+        </UiSettingsProvider>
    );
 };
@@ -24,5 +24,6 @@ export * from './room';
 export * from './room/events';
 export * from './room/widgets';
 export * from './user';
+export * from './ui-settings';
 export * from './utils';
 export * from './wired';
@@ -0,0 +1,43 @@
+export interface IUiSettings
+{
+    colorMode: 'color' | 'image' | 'default';
+    headerColor: string;
+    headerImageUrl: string;
+    headerAlpha: number;
+}
+
+export const DEFAULT_UI_SETTINGS: IUiSettings = {
+    colorMode: 'default',
+    headerColor: '#1E7295',
+    headerImageUrl: '',
+    headerAlpha: 100
+};
+
+export const PRESET_COLORS: string[] = [
+    '#000000', '#444444', '#888888', '#CCCCCC', '#660000', '#CC3333', '#FF6666', '#CC6600',
+    '#FF3333', '#FF6633', '#FF9933', '#FFCC00', '#FFFF00', '#66FF00', '#00CC00', '#009900',
+    '#00FFCC', '#33CCFF', '#3366FF', '#0000CC', '#6633CC', '#9933FF', '#CC33FF', '#FF66CC',
+    '#FF99CC', '#1E7295', '#185D79', '#2DABC2', '#2B91A7', '#283F5D'
+];
+
+export interface IThemePreset
+{
+    name: string;
+    color: string;
+    alpha: number;
+}
+
+export const THEME_PRESETS: IThemePreset[] = [
+    { name: 'default', color: '#1E7295', alpha: 100 },
+    { name: 'ocean', color: '#0077B6', alpha: 100 },
+    { name: 'forest', color: '#2D6A4F', alpha: 100 },
+    { name: 'sunset', color: '#E76F51', alpha: 100 },
+    { name: 'royal', color: '#7B2CBF', alpha: 100 },
+    { name: 'midnight', color: '#1B1B2F', alpha: 100 },
+    { name: 'cherry', color: '#C1121F', alpha: 100 },
+    { name: 'gold', color: '#B8860B', alpha: 100 },
+    { name: 'slate', color: '#475569', alpha: 100 },
+    { name: 'candy', color: '#FF69B4', alpha: 100 },
+    { name: 'emerald', color: '#059669', alpha: 100 },
+    { name: 'volcano', color: '#DC2626', alpha: 90 },
+];
@@ -0,0 +1,224 @@
+import { GetCommunication, UiSettingsDataEvent, UiSettingsLoadComposer, UiSettingsSaveComposer } from '@nitrots/nitro-renderer';
+import { createContext, FC, PropsWithChildren, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { DEFAULT_UI_SETTINGS, IUiSettings } from './IUiSettings';
+
+const STORAGE_KEY = 'nitro.ui.settings';
+
+interface IUiSettingsContext
+{
+    settings: IUiSettings;
+    isCustomActive: boolean;
+    updateSettings: (partial: Partial<IUiSettings>) => void;
+    resetSettings: () => void;
+    getHeaderStyle: () => React.CSSProperties;
+    getTabsStyle: () => React.CSSProperties;
+    getAccentColor: () => string;
+}
+
+const UiSettingsContext = createContext<IUiSettingsContext>({
+    settings: DEFAULT_UI_SETTINGS,
+    isCustomActive: false,
+    updateSettings: () => {},
+    resetSettings: () => {},
+    getHeaderStyle: () => ({}),
+    getTabsStyle: () => ({}),
+    getAccentColor: () => DEFAULT_UI_SETTINGS.headerColor
+});
+
+const darkenColor = (hex: string, amount: number): string =>
+{
+    const num = parseInt(hex.replace('#', ''), 16);
+    const r = Math.max(0, ((num >> 16) & 0xFF) - amount);
+    const g = Math.max(0, ((num >> 8) & 0xFF) - amount);
+    const b = Math.max(0, (num & 0xFF) - amount);
+
+    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+};
+
+const loadSettings = (): IUiSettings =>
+{
+    try
+    {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if(stored) return { ...DEFAULT_UI_SETTINGS, ...JSON.parse(stored) };
+    }
+    catch(e) {}
+
+    return { ...DEFAULT_UI_SETTINGS };
+};
+
+const saveSettings = (settings: IUiSettings): void =>
+{
+    try
+    {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+    }
+    catch(e) {}
+};
+
+const sendComposer = (composer: any): void =>
+{
+    try
+    {
+        GetCommunication()?.connection?.send(composer);
+    }
+    catch(e) {}
+};
+
+export const UiSettingsProvider: FC<PropsWithChildren> = ({ children }) =>
+{
+    const [ settings, setSettings ] = useState<IUiSettings>(loadSettings);
+    const serverSaveTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+    // Carica dal server al mount e ascolta risposta
+    useEffect(() =>
+    {
+        sendComposer(new UiSettingsLoadComposer());
+
+        const connection = GetCommunication()?.connection;
+
+        if(!connection) return;
+
+        const handler = (event: any) =>
+        {
+            try
+            {
+                const parser = event.getParser();
+                const json = parser?.settingsJson;
+
+                if(json && json !== '{}')
+                {
+                    const serverSettings = { ...DEFAULT_UI_SETTINGS, ...JSON.parse(json) };
+                    setSettings(serverSettings);
+                    saveSettings(serverSettings);
+                }
+            }
+            catch(e) {}
+        };
+
+        connection.addMessageEvent(new UiSettingsDataEvent(handler));
+    }, []);
+
+    const syncToServer = useCallback((settingsToSave: IUiSettings) =>
+    {
+        if(serverSaveTimerRef.current) clearTimeout(serverSaveTimerRef.current);
+
+        serverSaveTimerRef.current = setTimeout(() =>
+        {
+            sendComposer(new UiSettingsSaveComposer(JSON.stringify(settingsToSave)));
+        }, 1000);
+    }, []);
+
+    const updateSettings = useCallback((partial: Partial<IUiSettings>) =>
+    {
+        setSettings(prev =>
+        {
+            const updated = { ...prev, ...partial };
+            saveSettings(updated);
+            syncToServer(updated);
+
+            return updated;
+        });
+    }, [ syncToServer ]);
+
+    const resetSettings = useCallback(() =>
+    {
+        setSettings({ ...DEFAULT_UI_SETTINGS });
+        saveSettings(DEFAULT_UI_SETTINGS);
+        syncToServer(DEFAULT_UI_SETTINGS);
+    }, [ syncToServer ]);
+
+    const getHeaderStyle = useCallback((): React.CSSProperties =>
+    {
+        if(settings.colorMode === 'color')
+        {
+            const alpha = (settings.headerAlpha ?? 100) / 100;
+            const num = parseInt(settings.headerColor.replace('#', ''), 16);
+            const r = (num >> 16) & 0xFF;
+            const g = (num >> 8) & 0xFF;
+            const b = num & 0xFF;
+
+            return { backgroundColor: `rgba(${ r }, ${ g }, ${ b }, ${ alpha })` };
+        }
+
+        if(settings.colorMode === 'image' && settings.headerImageUrl)
+        {
+            return {
+                backgroundImage: `url(${ settings.headerImageUrl })`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                backgroundRepeat: 'repeat'
+            };
+        }
+
+        return {};
+    }, [ settings ]);
+
+    const getTabsStyle = useCallback((): React.CSSProperties =>
+    {
+        if(settings.colorMode === 'color')
+        {
+            return { backgroundColor: darkenColor(settings.headerColor, 30) };
+        }
+
+        if(settings.colorMode === 'image' && settings.headerImageUrl)
+        {
+            return {
+                backgroundImage: `url(${ settings.headerImageUrl })`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center bottom',
+                backgroundRepeat: 'repeat'
+            };
+        }
+
+        return {};
+    }, [ settings ]);
+
+    const getAccentColor = useCallback((): string =>
+    {
+        if(settings.colorMode === 'color') return settings.headerColor;
+
+        return DEFAULT_UI_SETTINGS.headerColor;
+    }, [ settings ]);
+
+    const isCustomActive = settings.colorMode !== 'default';
+
+    const ALL_CSS_VARS = [
+        '--ui-accent-color', '--ui-accent-dark',
+        '--ui-ctx-bg', '--ui-ctx-header-bg', '--ui-ctx-item-bg1', '--ui-ctx-item-bg2',
+        '--ui-btn-primary-bg', '--ui-btn-primary-border',
+        '--ui-dark-bg', '--ui-dark-border'
+    ];
+
+    useEffect(() =>
+    {
+        const root = document.documentElement;
+
+        if(settings.colorMode === 'color')
+        {
+            const c = settings.headerColor;
+            root.style.setProperty('--ui-accent-color', c);
+            root.style.setProperty('--ui-accent-dark', darkenColor(c, 30));
+            root.style.setProperty('--ui-ctx-bg', darkenColor(c, 50));
+            root.style.setProperty('--ui-ctx-header-bg', darkenColor(c, 20));
+            root.style.setProperty('--ui-ctx-item-bg1', darkenColor(c, 60));
+            root.style.setProperty('--ui-ctx-item-bg2', darkenColor(c, 70));
+            root.style.setProperty('--ui-btn-primary-bg', c);
+            root.style.setProperty('--ui-btn-primary-border', darkenColor(c, 20));
+            root.style.setProperty('--ui-dark-bg', darkenColor(c, 55));
+            root.style.setProperty('--ui-dark-border', darkenColor(c, 60));
+        }
+        else
+        {
+            ALL_CSS_VARS.forEach(v => root.style.removeProperty(v));
+        }
+    }, [ settings ]);
+
+    return (
+        <UiSettingsContext.Provider value={ { settings, isCustomActive, updateSettings, resetSettings, getHeaderStyle, getTabsStyle, getAccentColor } }>
+            { children }
+        </UiSettingsContext.Provider>
+    );
+};
+
+export const useUiSettings = () => useContext(UiSettingsContext);
@@ -0,0 +1,2 @@
+export * from './IUiSettings';
+export * from './UiSettingsContext';
@@ -12,20 +12,16 @@ export interface ButtonProps extends FlexProps

 export const Button: FC<ButtonProps> = props =>
 {
-    const { variant = 'primary', size = 'sm', active = false, disabled = false, classNames = [], ...rest } = props;
+    const { variant = 'primary', size = 'sm', active = false, disabled = false, classNames = [], style = {}, ...rest } = props;

    const getClassNames = useMemo(() =>
    {
-
-        // fucked up method i know (i dont have a clue what im doing because im a ninja)
-
        const newClassNames: string[] = [ 'pointer-events-auto inline-block font-normal leading-normal text-[#fff] text-center no-underline align-middle cursor-pointer select-none border border-[solid] border-transparent px-[.75rem] py-[.375rem] text-[.9rem] rounded-[.25rem] [transition:color_.15s_ease-in-out,background-color_.15s_ease-in-out,border-color_.15s_ease-in-out,box-shadow_.15s_ease-in-out]' ];

        if(variant)
        {
-
            if(variant == 'primary')
-                newClassNames.push('text-white bg-[#1e7295] border-[#1e7295] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#1a617f] hover:border-[#185b77]');
+                newClassNames.push('text-white [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white');

            if(variant == 'success')
                newClassNames.push('text-white  bg-[#00800b] border-[#00800b] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white  hover:bg-[#006d09] hover:border-[#006609]');
@@ -43,10 +39,10 @@ export const Button: FC<ButtonProps> = props =>
                newClassNames.push('text-white  bg-[#185d79] border-[#185d79] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a]  hover:text-white hover:bg-[#144f67] hover:border-[#134a61]');

            if(variant == 'dark')
-                newClassNames.push('text-white bg-dark [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#18181bfb] hover:border-[#161619fb]');
+                newClassNames.push('text-white [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white');

 			if(variant == 'gray')
-				newClassNames.push('text-white bg-[#1e7295] border-[#1e7295] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#1a617f] hover:border-[#185b77]');
+				newClassNames.push('text-white [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white');

        }

@@ -67,5 +63,28 @@ export const Button: FC<ButtonProps> = props =>
        return newClassNames;
    }, [ variant, size, active, disabled, classNames ]);

-    return <Flex center classNames={ getClassNames } { ...rest } />;
+    const getStyle = useMemo(() =>
+    {
+        if(variant === 'primary' || variant === 'gray')
+        {
+            return {
+                backgroundColor: 'var(--ui-btn-primary-bg, #1e7295)',
+                borderColor: 'var(--ui-btn-primary-border, #1e7295)',
+                ...style
+            };
+        }
+
+        if(variant === 'dark')
+        {
+            return {
+                backgroundColor: 'var(--ui-dark-bg, rgba(28, 28, 32, .98))',
+                borderColor: 'var(--ui-dark-border, rgba(28, 28, 32, .98))',
+                ...style
+            };
+        }
+
+        return style;
+    }, [ variant, style ]);
+
+    return <Flex center classNames={ getClassNames } style={ getStyle } { ...rest } />;
 };
@@ -1,4 +1,4 @@
-import { FC, useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 import { Base, BaseProps } from './Base';
 import { ColorVariantType, FontSizeType, FontWeightType, TextAlignType } from './types';

@@ -44,7 +44,7 @@ export const Text: FC<TextProps> = props => {
        const newClassNames: string[] = [truncate ? 'block' : 'inline'];

        if (variant) {
-			if (variant === 'primary') newClassNames.push('text-[#1e7295]');
+			// primary color handled via inline style with CSS variable
 			if (variant == 'secondary') newClassNames.push('text-[#185d79]');
 			if (variant === 'black') newClassNames.push('text-[#000000]');
 			if (variant == 'dark') newClassNames.push('text-[#18181b]');
@@ -73,7 +73,12 @@ export const Text: FC<TextProps> = props => {
        return newClassNames;
    }, [ variant, fontWeight, fontSize, fontSizeCustom, align, bold, underline, italics, truncate, center, textEnd, small, wrap, noWrap, textBreak ]);

-    const style = fontSizeCustom ? { '--font-size': `${fontSizeCustom}px` } as React.CSSProperties : undefined;
+    const style = useMemo(() => {
+        const s: React.CSSProperties = {};
+        if (fontSizeCustom) (s as any)['--font-size'] = `${fontSizeCustom}px`;
+        if (variant === 'primary') s.color = 'var(--ui-accent-color, #1e7295)';
+        return Object.keys(s).length ? s : undefined;
+    }, [ fontSizeCustom, variant ]);

    return <Base classNames={getClassNames} style={style} {...rest} />;
 };
@@ -1,5 +1,6 @@
 import { FC, MouseEvent } from 'react';
 import { FaFlag } from 'react-icons/fa';
+import { useUiSettings } from '../../api/ui-settings/UiSettingsContext';
 import { Base, Column, ColumnProps, Flex } from '..';

 interface NitroCardHeaderViewProps extends ColumnProps
@@ -16,8 +17,7 @@ interface NitroCardHeaderViewProps extends ColumnProps
 export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 {
    const { headerText = null, isGalleryPhoto = false, noCloseButton = false, isInfoToHabboPages = false, onReportPhoto = null, onClickInfoHabboPages = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
-
-
+    const { isCustomActive, getHeaderStyle } = useUiSettings();

    const onMouseDown = (event: MouseEvent<HTMLDivElement>) =>
    {
@@ -25,8 +25,12 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
        event.nativeEvent.stopImmediatePropagation();
    };

+    const headerClassName = isCustomActive
+        ? 'relative flex items-center justify-center flex-col drag-handler min-h-card-header max-h-card-header'
+        : 'relative flex items-center justify-center flex-col drag-handler min-h-card-header max-h-card-header bg-card-header';
+
    return (
-        <Column center className={ 'relative flex items-center justify-center flex-col drag-handler min-h-card-header max-h-card-header bg-card-header' } { ...rest }>
+        <Column center className={ headerClassName } style={ getHeaderStyle() } { ...rest }>
            <Flex center fullWidth>
                <span className="text-xl text-white drop-shadow-lg">{ headerText }</span>
                { isGalleryPhoto &&
@@ -1,21 +1,27 @@
 import { FC, useMemo } from 'react';
+import { useUiSettings } from '../../../api/ui-settings/UiSettingsContext';
 import { Flex, FlexProps } from '../..';

 export const NitroCardTabsView: FC<FlexProps> = props =>
 {
    const { justifyContent = 'center', gap = 1, classNames = [], children = null, ...rest } = props;
+    const { isCustomActive, getTabsStyle } = useUiSettings();

    const getClassNames = useMemo(() =>
    {
-        const newClassNames: string[] = [ 'justify-center gap-0.5 flex bg-card-tabs min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-px' ];
+        const base = isCustomActive
+            ? 'justify-center gap-0.5 flex min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-px'
+            : 'justify-center gap-0.5 flex bg-card-tabs min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-px';
+
+        const newClassNames: string[] = [ base ];

        if(classNames.length) newClassNames.push(...classNames);

        return newClassNames;
-    }, [ classNames ]);
+    }, [ classNames, isCustomActive ]);

    return (
-        <Flex classNames={ getClassNames } gap={ gap } justifyContent={ justifyContent } { ...rest }>
+        <Flex classNames={ getClassNames } gap={ gap } justifyContent={ justifyContent } style={ getTabsStyle() } { ...rest }>
            { children }
        </Flex>
    );
@@ -14,7 +14,7 @@ export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>

    const getClassNames = useMemo(() =>
    {
-        const newClassNames: string[] = [ 'border border-[solid] border-[#fff] p-[2px] h-[20px] rounded-[.25rem] overflow-hidden bg-[#1E7295]        ', 'text-white' ];
+        const newClassNames: string[] = [ 'border border-[solid] border-[#fff] p-[2px] h-[20px] rounded-[.25rem] overflow-hidden', 'text-white' ];

        if(classNames.length) newClassNames.push(...classNames);

@@ -22,7 +22,7 @@ export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
    }, [ classNames ]);

    return (
-        <Column classNames={ getClassNames } justifyContent={ justifyContent } position={ position } { ...rest }>
+        <Column classNames={ getClassNames } justifyContent={ justifyContent } position={ position } style={ { backgroundColor: 'var(--ui-accent-color, #1E7295)' } } { ...rest }>
            { text && (text.length > 0) &&
                <Flex center fit className="[text-shadow:0px_4px_4px_rgba(0,0,0,.25)] z-20" position="absolute">{ text }</Flex> }
            <Base className="h-full z-10 [transition:all_1s] rounded-[.125rem] bg-[repeating-linear-gradient(#2DABC2,#2DABC2_50%,#2B91A7_50%,#2B91A7_100%)]" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') } } />
@@ -2,7 +2,9 @@ import { GetSessionDataManager, HabboClubLevelEnum} from '@nitrots/nitro-rendere
 import { Dispatch, FC, SetStateAction, useCallback, useMemo, useState } from 'react';
 import { Base, Grid, Flex, NitroCardView, NitroCardHeaderView, NitroCardTabsView, NitroCardTabsItemView, NitroCardContentView, Text, LayoutCurrencyIcon } from '../../common';
 import { useRoom } from '../../hooks';
-import { GetClubMemberLevel, GetConfigurationValue } from '../../api';
+import { GetClubMemberLevel, GetConfigurationValue, LocalizeText } from '../../api';
+import { InterfaceColorTabView } from '../interface-settings/InterfaceColorTabView';
+import { InterfaceImageTabView } from '../interface-settings/InterfaceImageTabView';

 interface ItemData {
    id: number;
@@ -22,7 +24,7 @@ interface BackgroundsViewProps {
    setSelectedOverlay: Dispatch<SetStateAction<number>>;
 }

-const TABS = ['backgrounds', 'stands', 'overlays'] as const;
+const TABS = ['backgrounds', 'stands', 'overlays', 'color', 'image'] as const;
 type TabType = typeof TABS[number];

 export const BackgroundsView: FC<BackgroundsViewProps> = ({
@@ -68,7 +70,7 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({

        const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay };

-        setters[activeTab](id);
+        setters[activeTab as 'backgrounds' | 'stands' | 'overlays'](id);
        const newValues = { ...currentValues, [activeTab]: id };
        roomSession.sendBackgroundMessage( newValues.backgrounds, newValues.stands, newValues.overlays );
    }, [activeTab, roomSession, selectedBackground, selectedStand, selectedOverlay, setSelectedBackground, setSelectedStand, setSelectedOverlay]);
@@ -86,9 +88,11 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
        </Flex>
    ), [handleSelection]);

+    const isProfileTab = activeTab === 'backgrounds' || activeTab === 'stands' || activeTab === 'overlays';
+
    return (
        <NitroCardView uniqueKey="backgrounds" className="absolute min-w-[535px] max-w-[535px] min-h-[389px] max-h-[389px]">
-            <NitroCardHeaderView headerText="Profile Background" onCloseClick={() => setIsVisible(false)} />
+            <NitroCardHeaderView headerText={ LocalizeText('interface.settings.title') } onCloseClick={() => setIsVisible(false)} />
            <NitroCardTabsView>
                {TABS.map(tab => (
                    <NitroCardTabsItemView
@@ -96,15 +100,21 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
                        isActive={activeTab === tab}
                        onClick={() => setActiveTab(tab)}
                    >
-                        {tab.charAt(0).toUpperCase() + tab.slice(1)}
+                        { LocalizeText(`interface.settings.tab.${ tab }`) }
                    </NitroCardTabsItemView>
                ))}
            </NitroCardTabsView>
            <NitroCardContentView gap={1}>
-                <Text bold center>Select an Option</Text>
-                <Grid gap={1} columnCount={7} overflow="auto">
-                    {allData[activeTab].map(item => renderItem(item, activeTab.slice(0, -1)))}
-                </Grid>
+                { isProfileTab && (
+                    <>
+                        <Text bold center>{ LocalizeText('interface.settings.select.option') }</Text>
+                        <Grid gap={1} columnCount={7} overflow="auto">
+                            {allData[activeTab as 'backgrounds' | 'stands' | 'overlays'].map(item => renderItem(item, activeTab.slice(0, -1)))}
+                        </Grid>
+                    </>
+                ) }
+                { activeTab === 'color' && <InterfaceColorTabView /> }
+                { activeTab === 'image' && <InterfaceImageTabView /> }
            </NitroCardContentView>
        </NitroCardView>
    );
@@ -0,0 +1,288 @@
+import { RgbaColorPicker, RgbaColor } from 'react-colorful';
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FaUndo, FaTrash, FaDownload, FaUpload } from 'react-icons/fa';
+import { LocalizeText, PRESET_COLORS, THEME_PRESETS, useUiSettings } from '../../api';
+import { Flex, Text } from '../../common';
+
+const hexToRgba = (hex: string, a = 1): RgbaColor =>
+{
+    const num = parseInt(hex.replace('#', ''), 16);
+    return { r: (num >> 16) & 0xFF, g: (num >> 8) & 0xFF, b: num & 0xFF, a };
+};
+
+const rgbaToHex = (rgba: RgbaColor): string =>
+{
+    return '#' + ((1 << 24) + (rgba.r << 16) + (rgba.g << 8) + rgba.b).toString(16).slice(1);
+};
+
+export const InterfaceColorTabView: FC<{}> = () =>
+{
+    const { settings, updateSettings, resetSettings } = useUiSettings();
+    const [ color, setColor ] = useState<RgbaColor>(() => hexToRgba(settings.headerColor, settings.headerAlpha / 100));
+    const [ importValue, setImportValue ] = useState('');
+    const [ showImport, setShowImport ] = useState(false);
+    const [ copyFeedback, setCopyFeedback ] = useState(false);
+    const previewTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+    const hexColor = useMemo(() => rgbaToHex(color), [ color ]);
+    const alphaPercent = useMemo(() => Math.round((color.a ?? 1) * 100), [ color ]);
+
+    // Live preview con debounce
+    useEffect(() =>
+    {
+        if(previewTimerRef.current) clearTimeout(previewTimerRef.current);
+
+        previewTimerRef.current = setTimeout(() =>
+        {
+            updateSettings({
+                colorMode: 'color',
+                headerColor: hexColor,
+                headerAlpha: alphaPercent
+            });
+        }, 50);
+
+        return () =>
+        {
+            if(previewTimerRef.current) clearTimeout(previewTimerRef.current);
+        };
+    }, [ hexColor, alphaPercent ]);
+
+    const onHexInput = useCallback((value: string) =>
+    {
+        const clean = value.replace(/[^0-9a-fA-F]/g, '').slice(0, 6);
+        if(clean.length === 6)
+        {
+            const rgba = hexToRgba('#' + clean, color.a);
+            setColor(rgba);
+        }
+    }, [ color.a ]);
+
+    const onRgbInput = useCallback((channel: 'r' | 'g' | 'b', value: number) =>
+    {
+        const clamped = Math.max(0, Math.min(255, value || 0));
+        setColor(prev => ({ ...prev, [channel]: clamped }));
+    }, []);
+
+    const onAlphaInput = useCallback((value: number) =>
+    {
+        const clamped = Math.max(0, Math.min(100, value || 0));
+        setColor(prev => ({ ...prev, a: clamped / 100 }));
+    }, []);
+
+    const onPresetClick = useCallback((presetHex: string) =>
+    {
+        setColor(hexToRgba(presetHex, color.a));
+    }, [ color.a ]);
+
+    const onThemeClick = useCallback((themeColor: string, themeAlpha: number) =>
+    {
+        setColor(hexToRgba(themeColor, themeAlpha / 100));
+    }, []);
+
+    const onReset = useCallback(() =>
+    {
+        resetSettings();
+        setColor(hexToRgba('#1E7295', 1));
+    }, [ resetSettings ]);
+
+    const onDelete = useCallback(() =>
+    {
+        updateSettings({ colorMode: 'default' });
+        setColor(hexToRgba('#1E7295', 1));
+    }, [ updateSettings ]);
+
+    const onExport = useCallback(() =>
+    {
+        const data = JSON.stringify({
+            color: hexColor,
+            alpha: alphaPercent,
+            mode: settings.colorMode,
+            image: settings.headerImageUrl
+        });
+
+        navigator.clipboard.writeText(data);
+        setCopyFeedback(true);
+        setTimeout(() => setCopyFeedback(false), 2000);
+    }, [ hexColor, alphaPercent, settings ]);
+
+    const onImport = useCallback(() =>
+    {
+        try
+        {
+            const data = JSON.parse(importValue);
+
+            if(data.color)
+            {
+                const alpha = data.alpha ?? 100;
+                setColor(hexToRgba(data.color, alpha / 100));
+                updateSettings({
+                    colorMode: data.mode || 'color',
+                    headerColor: data.color,
+                    headerAlpha: alpha,
+                    headerImageUrl: data.image || ''
+                });
+            }
+
+            setImportValue('');
+            setShowImport(false);
+        }
+        catch(e) {}
+    }, [ importValue, updateSettings ]);
+
+    return (
+        <Flex column gap={ 2 } className="items-center p-2">
+            {/* Color picker */}
+            <div className="w-[280px]">
+                <RgbaColorPicker color={ color } onChange={ setColor } style={ { width: '100%', height: '180px' } } />
+            </div>
+
+            {/* Color preview swatch */}
+            <div
+                className="w-[280px] h-[32px] rounded border border-black/20"
+                style={ { backgroundColor: `rgba(${ color.r }, ${ color.g }, ${ color.b }, ${ color.a })` } }
+            />
+
+            {/* Hex/RGB/A inputs */}
+            <Flex gap={ 1 } className="items-center mt-1">
+                <Flex column className="items-center">
+                    <input
+                        className="form-control form-control-sm text-center w-[70px]"
+                        value={ hexColor.replace('#', '').toUpperCase() }
+                        onChange={ e => onHexInput(e.target.value) }
+                        maxLength={ 6 }
+                    />
+                    <Text small className="text-black">Hex</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ color.r }
+                        onChange={ e => onRgbInput('r', parseInt(e.target.value)) }
+                        min={ 0 } max={ 255 }
+                    />
+                    <Text small className="text-black">R</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ color.g }
+                        onChange={ e => onRgbInput('g', parseInt(e.target.value)) }
+                        min={ 0 } max={ 255 }
+                    />
+                    <Text small className="text-black">G</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ color.b }
+                        onChange={ e => onRgbInput('b', parseInt(e.target.value)) }
+                        min={ 0 } max={ 255 }
+                    />
+                    <Text small className="text-black">B</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ alphaPercent }
+                        onChange={ e => onAlphaInput(parseInt(e.target.value)) }
+                        min={ 0 } max={ 100 }
+                    />
+                    <Text small className="text-black">A</Text>
+                </Flex>
+            </Flex>
+
+            {/* Preset colors */}
+            <div className="grid grid-cols-10 gap-0.5 mt-1">
+                { PRESET_COLORS.map((presetHex, i) => (
+                    <div
+                        key={ i }
+                        className={ `w-[24px] h-[24px] rounded cursor-pointer border hover:scale-110 transition-transform ${ hexColor.toUpperCase() === presetHex.toUpperCase() ? 'border-white border-2 scale-110' : 'border-black/20' }` }
+                        style={ { backgroundColor: presetHex } }
+                        onClick={ () => onPresetClick(presetHex) }
+                    />
+                )) }
+            </div>
+
+            {/* Theme presets */}
+            <Text small bold className="text-black mt-2">{ LocalizeText('interface.settings.color.themes') }</Text>
+            <div className="grid grid-cols-6 gap-1 w-full">
+                { THEME_PRESETS.map((theme) => (
+                    <div
+                        key={ theme.name }
+                        className={ `flex flex-col items-center gap-0.5 p-1 rounded cursor-pointer hover:bg-black/5 transition-colors ${ hexColor.toUpperCase() === theme.color.toUpperCase() ? 'ring-2 ring-white' : '' }` }
+                        onClick={ () => onThemeClick(theme.color, theme.alpha) }
+                    >
+                        <div
+                            className="w-[32px] h-[32px] rounded-full border border-black/20"
+                            style={ { backgroundColor: theme.color, opacity: theme.alpha / 100 } }
+                        />
+                        <Text small className="text-black text-[10px]">{ LocalizeText(`interface.settings.theme.${ theme.name }`) }</Text>
+                    </div>
+                )) }
+            </div>
+
+            {/* Action buttons */}
+            <Flex gap={ 1 } className="w-full mt-2">
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
+                    style={ { backgroundColor: '#5f9ea0' } }
+                    onClick={ onReset }
+                    title={ LocalizeText('interface.settings.color.reset') }
+                >
+                    <FaUndo size={ 12 } />
+                    { LocalizeText('interface.settings.color.reset') }
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
+                    style={ { backgroundColor: '#c0392b' } }
+                    onClick={ onDelete }
+                    title={ LocalizeText('interface.settings.color.remove') }
+                >
+                    <FaTrash size={ 12 } />
+                    { LocalizeText('interface.settings.color.remove') }
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
+                    style={ { backgroundColor: '#2980b9' } }
+                    onClick={ onExport }
+                    title={ LocalizeText('interface.settings.color.export') }
+                >
+                    <FaDownload size={ 12 } />
+                    { copyFeedback ? LocalizeText('interface.settings.color.copied') : LocalizeText('interface.settings.color.export') }
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
+                    style={ { backgroundColor: '#27ae60' } }
+                    onClick={ () => setShowImport(!showImport) }
+                    title={ LocalizeText('interface.settings.color.import') }
+                >
+                    <FaUpload size={ 12 } />
+                    { LocalizeText('interface.settings.color.import') }
+                </button>
+            </Flex>
+
+            {/* Import panel */}
+            { showImport && (
+                <Flex gap={ 1 } className="w-full">
+                    <input
+                        className="form-control form-control-sm flex-1"
+                        placeholder={ LocalizeText('interface.settings.color.import.placeholder') }
+                        value={ importValue }
+                        onChange={ e => setImportValue(e.target.value) }
+                    />
+                    <button
+                        className="px-3 py-1 rounded cursor-pointer text-white text-xs"
+                        style={ { backgroundColor: '#27ae60' } }
+                        onClick={ onImport }
+                    >
+                        OK
+                    </button>
+                </Flex>
+            ) }
+        </Flex>
+    );
+};
@@ -0,0 +1,52 @@
+import { FC, useCallback, useMemo } from 'react';
+import { GetConfigurationValue, useUiSettings } from '../../api';
+
+export const InterfaceImageTabView: FC<{}> = () =>
+{
+    const { settings, updateSettings } = useUiSettings();
+
+    const imageCount = useMemo(() =>
+    {
+        return GetConfigurationValue<number>('ui.header.images.count', 30);
+    }, []);
+
+    const baseUrl = useMemo(() =>
+    {
+        return GetConfigurationValue<string>('ui.header.images.url', 'https://image.webbo.city/image/headerImage/image{id}.gif');
+    }, []);
+
+    const images = useMemo(() =>
+    {
+        const result: string[] = [];
+        for(let i = 1; i <= imageCount; i++)
+        {
+            result.push(baseUrl.replace('{id}', String(i)));
+        }
+        return result;
+    }, [ imageCount, baseUrl ]);
+
+    const onImageSelect = useCallback((url: string) =>
+    {
+        updateSettings({
+            colorMode: 'image',
+            headerImageUrl: url
+        });
+    }, [ updateSettings ]);
+
+    return (
+        <div className="grid grid-cols-8 gap-1 p-2 overflow-auto max-h-[400px]">
+            { images.map((url, i) => (
+                <div
+                    key={ i }
+                    className={ `w-[75px] h-[75px] rounded cursor-pointer border-2 transition-all hover:scale-105 ${ (settings.colorMode === 'image' && settings.headerImageUrl === url) ? 'border-white shadow-lg' : 'border-transparent' }` }
+                    style={ {
+                        backgroundImage: `url(${ url })`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center'
+                    } }
+                    onClick={ () => onImageSelect(url) }
+                />
+            )) }
+        </div>
+    );
+};
@@ -45,7 +45,8 @@ const BadgeMiniPicker: FC<{
    return (
        <div
            ref={ ref }
-            className="absolute right-[calc(100%+8px)] top-0 z-50 bg-[rgba(28,28,32,0.97)] border border-white/20 rounded-md p-2 shadow-lg min-w-[160px]"
+            className="absolute right-[calc(100%+8px)] top-0 z-50 border border-white/20 rounded-md p-2 shadow-lg min-w-[160px]"
+            style={ { backgroundColor: 'var(--ui-dark-bg, rgba(28,28,32,0.97))' } }
            onClick={ e => e.stopPropagation() }>
            <input
                autoFocus
@@ -458,7 +458,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props

    return (
        <Column alignItems="end" gap={ 1 }>
-            <Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,28,32,.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded">
+            <Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded" style={ { backgroundColor: 'var(--ui-dark-bg, rgba(28,28,32,.95))' } }>
                <Column className="h-full p-[8px] overflow-auto" gap={ 1 } overflow="visible">
                    <div className="flex flex-col gap-1">
                        <Flex alignItems="center" gap={ 1 } justifyContent="between">
@@ -133,7 +133,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =

  return (
    <>
-      <Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,28,32,0.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded">
+      <Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded" style={ { backgroundColor: 'var(--ui-dark-bg, rgba(28,28,32,0.95))' } }>
        <Column className="h-full p-[8px] overflow-auto" gap={1} overflow="visible">
          <div className="flex flex-col gap-1">
            <div className="flex items-center justify-between">
@@ -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 } />;
 };
@@ -8,7 +8,7 @@ interface ContextMenuListItemViewProps extends FlexProps

 export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =>
 {
-    const { disabled = false, fullWidth = true, justifyContent = 'center', alignItems = 'center', classNames = [], onClick = null, ...rest } = props;
+    const { disabled = false, fullWidth = true, justifyContent = 'center', alignItems = 'center', classNames = [], style = {}, onClick = null, ...rest } = props;

    const handleClick = (event: MouseEvent<HTMLDivElement>) =>
    {
@@ -19,7 +19,7 @@ export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =

    const getClassNames = useMemo(() =>
    {
-        const newClassNames: string[] = [ 'relative mb-[2px] p-[3px] overflow-hidden', 'h-[24px] max-h-[24px] p-[3px] bg-[repeating-linear-gradient(#131e25,#131e25_50%,#0d171d_50%,#0d171d_100%)] cursor-pointer' ];
+        const newClassNames: string[] = [ 'relative mb-[2px] p-[3px] overflow-hidden', 'h-[24px] max-h-[24px] p-[3px] cursor-pointer' ];

        if(disabled) newClassNames.push('disabled');

@@ -28,5 +28,10 @@ export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =
        return newClassNames;
    }, [ disabled, classNames ]);

-    return <Flex alignItems={ alignItems } classNames={ getClassNames } fullWidth={ fullWidth } justifyContent={ justifyContent } onClick={ handleClick } { ...rest } />;
+    const mergedStyle = useMemo(() => ({
+        background: 'repeating-linear-gradient(var(--ui-ctx-item-bg1, #131e25), var(--ui-ctx-item-bg1, #131e25) 50%, var(--ui-ctx-item-bg2, #0d171d) 50%, var(--ui-ctx-item-bg2, #0d171d) 100%)',
+        ...style
+    }), [ style ]);
+
+    return <Flex alignItems={ alignItems } classNames={ getClassNames } fullWidth={ fullWidth } justifyContent={ justifyContent } onClick={ handleClick } style={ mergedStyle } { ...rest } />;
 };
@@ -76,7 +76,6 @@ export const ContextMenuView: FC<ContextMenuViewProps> = ({
  const getClassNames = useMemo(() => {
    const classes = [
      'p-[2px]!',
-      'bg-[#1c323f]',
      'border-2',
      'border-[solid]',
      'border-[rgba(255,255,255,.5)]',
@@ -98,6 +97,7 @@ export const ContextMenuView: FC<ContextMenuViewProps> = ({
      top: pos.y ?? 0,
      transition: isFading ? 'opacity 75ms linear' : undefined,
      opacity,
+      backgroundColor: 'var(--ui-ctx-bg, #1c323f)',
      ...style,
    }),
    [pos, opacity, isFading, style]
@@ -69,7 +69,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
 					<ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
 				</motion.div> )}
 			</AnimatePresence>
-            <Flex alignItems="center" className="absolute bottom-0 left-0 w-full h-[55px] bg-[rgba(28,28,32,.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] py-1 px-3" gap={ 2 }>
+            <Flex alignItems="center" className="absolute bottom-0 left-0 w-full h-[55px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] py-1 px-3" gap={ 2 } style={ { backgroundColor: 'var(--ui-dark-bg, rgba(28,28,32,.95))' } }>
                <Flex alignItems="center" gap={ 2 } className="flex-shrink-0">
                    <Flex center pointer className={ 'relative w-[50px] h-[45px] overflow-hidden ' + (isMeExpanded ? 'active ' : '') } onClick={ event =>
                    {
@@ -24,8 +24,8 @@ input[type=number] {

 .btn-primary {
  color: #fff;
-  background-color: #3c6d82;
-  border: 2px solid #1a617f;
+  background-color: var(--ui-btn-primary-bg, #3c6d82);
+  border: 2px solid var(--ui-btn-primary-border, #1a617f);
  padding: 0.25rem 0.5rem;
  font-size: .7875rem;
  border-radius: 0.5rem;
@@ -33,7 +33,7 @@ input[type=number] {
 }

 .btn-primary:hover {
-  border: 2px solid #1a617f;
+  border: 2px solid var(--ui-btn-primary-border, #1a617f);
  box-shadow: none!important;
 }

@@ -81,16 +81,16 @@ input[type=number] {

 .btn-dark {
  color: #fff;
-  background-color: #212131;
-  border: 2px solid #1c1c2a;
+  background-color: var(--ui-dark-bg, #212131);
+  border: 2px solid var(--ui-dark-border, #1c1c2a);
  box-shadow: none!important;
  border-radius: 8px;
  padding: 4px 11px 4px 11px;
 }

 .btn-dark:hover{
-  background-color: #212131;
-  border: 2px solid #1c1c2a;
+  background-color: var(--ui-dark-bg, #212131);
+  border: 2px solid var(--ui-dark-border, #1c1c2a);
  box-shadow: none!important;
  border-radius: 8px;
  padding: 4px 11px 4px 11px;
@@ -121,6 +121,27 @@ body {
 }

@layer components {
+    @keyframes prefix-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+    }
+
+    @keyframes prefix-rainbow {
+        0% { filter: hue-rotate(0deg); }
+        100% { filter: hue-rotate(360deg); }
+    }
+
+    @keyframes prefix-shake {
+        0%, 100% { transform: translateX(0); }
+        25% { transform: translateX(-1px) rotate(-1deg); }
+        75% { transform: translateX(1px) rotate(1deg); }
+    }
+
+    @keyframes prefix-wave {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-3px); }
+    }
+
    @keyframes blink {

        0%,
@@ -835,7 +856,7 @@ body {
 /* Header and Tab Colors */

 .bg-card-header {
-    background-color: #1e7295; /* e.g., #2c3e50 */
+    background-color: var(--ui-btn-primary-bg, #1e7295); /* e.g., #2c3e50 */
 }

 .bg-card-tabs {
@@ -998,3 +1019,18 @@ body {
        width: 100%;
    }
 }
+
+/* UI Theme transitions */
+.nitro-card-header,
+.bg-card-header,
+.bg-card-tabs,
+.nitro-room-tools,
+.nitro-room-history,
+.nitro-room-tools-info,
+.borderhccontent,
+.nitro-purse-seasonal-currency,
+.nitro-infostand,
+.btn-primary,
+.btn-dark {
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
@@ -12,7 +12,7 @@
        .nitro-card-header {
            min-height: 33px;
            max-height: 33px;
-            background: #1E7295;
+            background: var(--ui-accent-color, #1E7295);

            .nitro-card-header-text {
                color: #FFF;
@@ -22,7 +22,7 @@
 			pointer-events: all;
        }
        .borderhccontent{
-            background-color: #212131;
+            background-color: var(--ui-dark-bg, #212131);
            border-radius: 0.5rem!important;
            border: 2px solid #383853;
            height: calc(100% - 3px);
@@ -46,7 +46,7 @@
    }

    .nitro-purse-seasonal-currency {
-        background-color: #212131;
+        background-color: var(--ui-dark-bg, #212131);
 		background: linear-gradient(to right, #5f5f8d, transparent);
 		height: 30px;
        margin-bottom: 4px;
@@ -27,7 +27,7 @@
  width: clamp(160px, 20vw, 190px); /* Responsive width */
  z-index: 30;
  pointer-events: auto;
-  background: #212131;
+  background: var(--ui-dark-bg, #212131);
  box-shadow: inset 0 5px rgba(38, 38, 57, 0.6), inset 0 -4px rgba(25, 25, 37, 0.6);
  border-radius: 0.5rem;
  padding: 10px;
@@ -4,7 +4,7 @@
    left: 15px;

    .nitro-room-tools {
-        background: #212131;
+        background: var(--ui-dark-bg, #212131);
        box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4);
        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem;
@@ -54,7 +54,7 @@
    }

    .nitro-room-history {
-        background: #212131;
+        background: var(--ui-dark-bg, #212131);
        box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4);
        transition: all .2s ease;
        width: 150px;
@@ -63,7 +63,7 @@
    }

    .nitro-room-tools-info {
-        background: #212131;
+        background: var(--ui-dark-bg, #212131);
        box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4);
        transition: all .2s ease;
        max-width: 250px;
@@ -10,7 +10,7 @@
        overflow: hidden;

        &.track-0 {
-            background-color: #1e7295;
+            background-color: var(--ui-btn-primary-bg, #1e7295);
        }

        &.track-1 {