Add UI Customization Panel with full color theming

- 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
2026-06-19 15:06:20 +00:00 · 2026-03-18 20:11:40 +01:00
parent ae4ecc42f0
commit ea35f19940
25 changed files with 3192 additions and 97 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';
@@ -89,11 +89,13 @@ export const App: FC<{}> = props =>
    }, []);

    return (
-        <Base fit overflow="hidden" className={ !(window.devicePixelRatio % 1) && 'image-rendering-pixelated' }>
-            { !isReady &&
-                <LoadingView /> }
-            { isReady && <MainView /> }
-            <Base id="draggable-windows-container" />
-        </Base>
+        <UiSettingsProvider>
+            <Base fit overflow="hidden" className={ !(window.devicePixelRatio % 1) && 'image-rendering-pixelated' }>
+                { !isReady &&
+                    <LoadingView /> }
+                { isReady && <MainView /> }
+                <Base id="draggable-windows-container" />
+            </Base>
+        </UiSettingsProvider>
    );
 };
@@ -0,0 +1,21 @@
+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'
+];
@@ -0,0 +1,164 @@
+import { createContext, FC, PropsWithChildren, useCallback, useContext, useEffect, 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) {}
+};
+
+export const UiSettingsProvider: FC<PropsWithChildren> = ({ children }) =>
+{
+    const [ settings, setSettings ] = useState<IUiSettings>(loadSettings);
+
+    const updateSettings = useCallback((partial: Partial<IUiSettings>) =>
+    {
+        setSettings(prev =>
+        {
+            const updated = { ...prev, ...partial };
+            saveSettings(updated);
+            return updated;
+        });
+    }, []);
+
+    const resetSettings = useCallback(() =>
+    {
+        setSettings({ ...DEFAULT_UI_SETTINGS });
+        saveSettings(DEFAULT_UI_SETTINGS);
+    }, []);
+
+    const getHeaderStyle = useCallback((): React.CSSProperties =>
+    {
+        if(settings.colorMode === 'color')
+        {
+            return { backgroundColor: settings.headerColor };
+        }
+
+        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,11 +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');
        }

        if(size)
@@ -67,5 +62,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,5 +1,6 @@
 import { FC, MouseEvent } from 'react';
 import { FaFlag } from 'react-icons/fa';
+import { useUiSettings } from '../../api';
 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';
 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>
    );
@@ -9,6 +9,7 @@ import { CampaignView } from './campaign/CampaignView';
 import { CatalogView } from './catalog/CatalogView';
 import { ChatHistoryView } from './chat-history/ChatHistoryView';
 import { FloorplanEditorView } from './floorplan-editor/FloorplanEditorView';
+import { FurniEditorView } from './furni-editor/FurniEditorView';
 import { FriendsView } from './friends/FriendsView';
 import { GameCenterView } from './game-center/GameCenterView';
 import { GroupsView } from './groups/GroupsView';
@@ -21,10 +22,12 @@ import { ModToolsView } from './mod-tools/ModToolsView';
 import { NavigatorView } from './navigator/NavigatorView';
 import { NitrobubbleHiddenView } from './nitrobubblehidden/NitrobubbleHiddenView';
 import { NitropediaView } from './nitropedia/NitropediaView';
+import { ExternalPluginLoader } from './plugins/ExternalPluginLoader';
 import { RightSideView } from './right-side/RightSideView';
 import { RoomView } from './room/RoomView';
 import { ToolbarView } from './toolbar/ToolbarView';
 import { UserProfileView } from './user-profile/UserProfileView';
+import { InterfaceSettingsView } from './interface-settings/InterfaceSettingsView';
 import { UserSettingsView } from './user-settings/UserSettingsView';
 import { WiredView } from './wired/WiredView';
 import { YoutubeTvView } from './youtube-tv/YoutubeTvView';
@@ -85,6 +88,7 @@ export const MainView: FC<{}> = props =>
            <AnimatePresence>
                { landingViewVisible &&
                    <motion.div
+                        className="w-full h-full"
                        initial={ { opacity: 0 }}
                        animate={ { opacity: 1 }}
                        exit={ { opacity: 0 }}>
@@ -105,6 +109,7 @@ export const MainView: FC<{}> = props =>
            <FriendsView />
            <RightSideView />
            <UserSettingsView />
+            <InterfaceSettingsView />
            <UserProfileView />
            <GroupsView />
            <CameraWidgetView />
@@ -115,7 +120,9 @@ export const MainView: FC<{}> = props =>
            <CampaignView />
            <GameCenterView />
            <FloorplanEditorView />
+            <FurniEditorView />
            <YoutubeTvView />
+            <ExternalPluginLoader />
        </>
    );
 };
@@ -0,0 +1,179 @@
+import { RgbaColorPicker, RgbaColor } from 'react-colorful';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { FaUndo, FaTrash, FaPen, FaFillDrip, FaSave } from 'react-icons/fa';
+import { PRESET_COLORS, 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 hexColor = useMemo(() => rgbaToHex(color), [ color ]);
+    const alphaPercent = useMemo(() => Math.round((color.a ?? 1) * 100), [ color ]);
+
+    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 onSave = useCallback(() =>
+    {
+        updateSettings({
+            colorMode: 'color',
+            headerColor: hexColor,
+            headerAlpha: alphaPercent
+        });
+    }, [ updateSettings, hexColor, alphaPercent ]);
+
+    const onReset = useCallback(() =>
+    {
+        resetSettings();
+        setColor(hexToRgba('#1E7295', 1));
+    }, [ resetSettings ]);
+
+    const onDelete = useCallback(() =>
+    {
+        updateSettings({ colorMode: 'default' });
+        setColor(hexToRgba('#1E7295', 1));
+    }, [ updateSettings ]);
+
+    return (
+        <Flex column gap={ 2 } className="items-center p-2">
+            <div className="w-[280px]">
+                <RgbaColorPicker color={ color } onChange={ setColor } style={ { width: '100%', height: '180px' } } />
+            </div>
+            <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>
+            <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 border-black/20 hover:scale-110 transition-transform"
+                        style={ { backgroundColor: presetHex } }
+                        onClick={ () => onPresetClick(presetHex) }
+                    />
+                )) }
+            </div>
+            <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"
+                    style={ { backgroundColor: '#5f9ea0' } }
+                    onClick={ onReset }
+                >
+                    <FaUndo size={ 14 } />
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white"
+                    style={ { backgroundColor: '#5f9ea0' } }
+                    onClick={ onDelete }
+                >
+                    <FaTrash size={ 14 } />
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white"
+                    style={ { backgroundColor: '#b0b0b0' } }
+                >
+                    <FaPen size={ 14 } />
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white"
+                    style={ { backgroundColor: '#5f9ea0' } }
+                    onClick={ onSave }
+                >
+                    <FaFillDrip size={ 14 } />
+                </button>
+            </Flex>
+            <button
+                className="w-full py-2 rounded cursor-pointer text-white font-bold flex items-center justify-center gap-2"
+                style={ { backgroundColor: '#008000' } }
+                onClick={ onSave }
+            >
+                <FaSave size={ 14 } />
+                Salva colore
+            </button>
+        </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>
+    );
+};
@@ -0,0 +1,107 @@
+import { GetSessionDataManager, HabboClubLevelEnum } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { GetClubMemberLevel, GetConfigurationValue } from '../../api';
+import { Base, Flex, Grid, LayoutCurrencyIcon, NitroCardTabsItemView, NitroCardTabsView, Text } from '../../common';
+import { useRoom } from '../../hooks';
+
+interface ItemData
+{
+    id: number;
+    isHcOnly: boolean;
+    minRank: number;
+    isAmbassadorOnly: boolean;
+    selectable: boolean;
+}
+
+const SUB_TABS = [ 'backgrounds', 'stands', 'overlays' ] as const;
+type SubTabType = typeof SUB_TABS[number];
+
+const SUB_TAB_LABELS: Record<SubTabType, string> = {
+    backgrounds: 'Sfondi',
+    stands: 'Basi',
+    overlays: 'Overlay'
+};
+
+export const InterfaceProfileTabView: FC<{}> = () =>
+{
+    const [ activeSubTab, setActiveSubTab ] = useState<SubTabType>('backgrounds');
+    const [ selectedBackground, setSelectedBackground ] = useState<number>(0);
+    const [ selectedStand, setSelectedStand ] = useState<number>(0);
+    const [ selectedOverlay, setSelectedOverlay ] = useState<number>(0);
+    const { roomSession } = useRoom();
+
+    const userData = useMemo(() => ({
+        isHcMember: GetClubMemberLevel() >= HabboClubLevelEnum.CLUB,
+        securityLevel: GetSessionDataManager().canChangeName,
+        isAmbassador: GetSessionDataManager().isAmbassador
+    }), []);
+
+    const processData = useCallback((configData: any[], dataType: string): ItemData[] =>
+    {
+        if(!configData?.length) return [];
+
+        return configData
+            .filter(item =>
+            {
+                const meetsRank = userData.securityLevel >= item.minRank;
+                const ambassadorEligible = !item.isAmbassadorOnly || userData.isAmbassador;
+                return item.isHcOnly || (meetsRank && ambassadorEligible);
+            })
+            .map(item => ({ id: item[`${ dataType }Id`], ...item, selectable: !item.isHcOnly || userData.isHcMember }));
+    }, [ userData ]);
+
+    const allData = useMemo(() => ({
+        backgrounds: processData(GetConfigurationValue('backgrounds.data'), 'background'),
+        stands: processData(GetConfigurationValue('stands.data'), 'stand'),
+        overlays: processData(GetConfigurationValue('overlays.data'), 'overlay')
+    }), [ processData ]);
+
+    const handleSelection = useCallback((id: number) =>
+    {
+        if(!roomSession) return;
+
+        const setters = { backgrounds: setSelectedBackground, stands: setSelectedStand, overlays: setSelectedOverlay };
+        const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay };
+
+        setters[activeSubTab](id);
+        const newValues = { ...currentValues, [activeSubTab]: id };
+        roomSession.sendBackgroundMessage(newValues.backgrounds, newValues.stands, newValues.overlays);
+    }, [ activeSubTab, roomSession, selectedBackground, selectedStand, selectedOverlay ]);
+
+    const renderItem = useCallback((item: ItemData, type: string) => (
+        <Flex
+            pointer
+            position="relative"
+            key={ item.id }
+            onClick={ () => item.selectable && handleSelection(item.id) }
+            className={ item.selectable ? '' : 'non-selectable' }
+        >
+            <Base className={ `profile-${ type } ${ type }-${ item.id }` } />
+            { item.isHcOnly && <LayoutCurrencyIcon position="absolute" className="top-1 inset-e-1" type="hc" /> }
+        </Flex>
+    ), [ handleSelection ]);
+
+    return (
+        <Flex column gap={ 1 }>
+            <Flex gap={ 1 } className="justify-center">
+                { SUB_TABS.map(tab => (
+                    <button
+                        key={ tab }
+                        className={ `px-3 py-1 rounded text-sm cursor-pointer transition-colors ${ activeSubTab === tab ? 'bg-primary text-white' : 'bg-card-grid-item text-black hover:bg-card-grid-item-active' }` }
+                        onClick={ () => setActiveSubTab(tab) }
+                    >
+                        { SUB_TAB_LABELS[tab] }
+                    </button>
+                )) }
+            </Flex>
+            { !roomSession && (
+                <Text bold center className="text-black py-4">Entra in una stanza per modificare il profilo</Text>
+            ) }
+            { roomSession && (
+                <Grid gap={ 1 } columnCount={ 7 } overflow="auto" className="max-h-[300px]">
+                    { allData[activeSubTab].map(item => renderItem(item, activeSubTab.slice(0, -1))) }
+                </Grid>
+            ) }
+        </Flex>
+    );
+};
@@ -0,0 +1,74 @@
+import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsView, NitroCardTabsItemView, NitroCardView } from '../../common';
+import { InterfaceColorTabView } from './InterfaceColorTabView';
+import { InterfaceProfileTabView } from './InterfaceProfileTabView';
+
+const TABS = [ 'color', 'profile' ] as const;
+type TabType = typeof TABS[number];
+
+const TAB_LABELS: Record<TabType, string> = {
+    color: 'Colore',
+    profile: 'Sfondo profilo'
+};
+
+export const InterfaceSettingsView: FC<{}> = () =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+    const [ currentTab, setCurrentTab ] = useState<TabType>('color');
+
+    useEffect(() =>
+    {
+        const linkTracker: ILinkEventTracker = {
+            linkReceived: (url: string) =>
+            {
+                const parts = url.split('/');
+                if(parts.length < 2) return;
+
+                switch(parts[1])
+                {
+                    case 'show':
+                        setIsVisible(true);
+                        return;
+                    case 'hide':
+                        setIsVisible(false);
+                        return;
+                    case 'toggle':
+                        setIsVisible(prev => !prev);
+                        return;
+                    case 'profile':
+                        setCurrentTab('profile');
+                        setIsVisible(true);
+                        return;
+                }
+            },
+            eventUrlPrefix: 'interface-settings/'
+        };
+
+        AddLinkEventTracker(linkTracker);
+        return () => RemoveLinkEventTracker(linkTracker);
+    }, []);
+
+    if(!isVisible) return null;
+
+    return (
+        <NitroCardView uniqueKey="interface-settings" className="min-w-[535px] max-w-[700px]">
+            <NitroCardHeaderView headerText="Interfaccia" onCloseClick={ () => setIsVisible(false) } />
+            <NitroCardTabsView>
+                { TABS.map(tab => (
+                    <NitroCardTabsItemView
+                        key={ tab }
+                        isActive={ currentTab === tab }
+                        onClick={ () => setCurrentTab(tab) }
+                    >
+                        { TAB_LABELS[tab] }
+                    </NitroCardTabsItemView>
+                )) }
+            </NitroCardTabsView>
+            <NitroCardContentView>
+                { currentTab === 'color' && <InterfaceColorTabView /> }
+                { currentTab === 'profile' && <InterfaceProfileTabView /> }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+};
@@ -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
@@ -220,8 +220,8 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props

                canUse = true;
                isCrackable = true;
-                crackableHits = stuffData.hits;
-                crackableTarget = stuffData.target;
+                crackableHits = stuffData?.hits ?? 0;
+                crackableTarget = stuffData?.target ?? 0;
            }

            else if(avatarInfo.extraParam === RoomWidgetEnumItemExtradataParameter.JUKEBOX)
@@ -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">
@@ -527,7 +527,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                        { isCrackable &&
                            <>
                                <hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
-                                <Text small wrap variant="white">{ LocalizeText('infostand.crackable_furni.hits_remaining', [ 'hits', 'target' ], [ crackableHits.toString(), crackableTarget.toString() ]) }</Text>
+                                <Text small wrap variant="white">{ LocalizeText('infostand.crackable_furni.hits_remaining', [ 'hits', 'target' ], [ (crackableHits ?? 0).toString(), (crackableTarget ?? 0).toString() ]) }</Text>
                            </> }
                        { avatarInfo.groupId > 0 &&
                            <>
@@ -552,7 +552,21 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                        { godMode &&
                            <>
                                <hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
-                                { canSeeFurniId && <Text small wrap variant="white">ID: { avatarInfo.id }</Text> }
+                                { canSeeFurniId &&
+                                    <div className="flex items-center gap-3">
+                                        <div className="flex items-center gap-1">
+                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-3 h-3 text-[#7ec8e3]">
+                                                <path fillRule="evenodd" d="M4.93 1.31a41.401 41.401 0 0 1 10.14 0C16.194 1.45 17 2.414 17 3.517V18.25a.75.75 0 0 1-1.075.676l-2.8-1.344-2.8 1.344a.75.75 0 0 1-.65 0l-2.8-1.344-2.8 1.344A.75.75 0 0 1 3 18.25V3.517c0-1.103.806-2.068 1.93-2.207Z" clipRule="evenodd" />
+                                            </svg>
+                                            <Text small wrap variant="white">ID: { avatarInfo.id }</Text>
+                                        </div>
+                                        <div className="flex items-center gap-1">
+                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-3 h-3 text-[#7ec8e3]">
+                                                <path d="M5.127 3.502 5.25 3.5h9.5c.041 0 .082 0 .123.002A2.251 2.251 0 0 0 12.75 2h-5.5a2.25 2.25 0 0 0-2.123 1.502ZM1 10.25A2.25 2.25 0 0 1 3.25 8h13.5A2.25 2.25 0 0 1 19 10.25v5.5A2.25 2.25 0 0 1 16.75 18H3.25A2.25 2.25 0 0 1 1 15.75v-5.5ZM3.25 6.5c-.04 0-.082 0-.123.002A2.25 2.25 0 0 1 5.25 5h9.5c.98 0 1.814.627 2.123 1.502a3.819 3.819 0 0 0-.123-.002H3.25Z" />
+                                            </svg>
+                                            <Text small wrap variant="white">Sprite: { (() => { const ro = GetRoomEngine().getRoomObject(roomSession.roomId, avatarInfo.id, avatarInfo.isWallItem ? RoomObjectCategory.WALL : RoomObjectCategory.FLOOR); return ro?.model?.getValue(RoomObjectVariable.FURNITURE_TYPE_ID) ?? '?'; })() }</Text>
+                                        </div>
+                                    </div> }
                                { (!avatarInfo.isWallItem && canMove) &&
                                    <>
                                        <button
@@ -560,6 +574,19 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                                            onClick={ () => setDropdownOpen(!dropdownOpen) }>
                                            { dropdownOpen ? `${LocalizeText('widget.furni.present.close')} Buildtools` : `${LocalizeText('navigator.roomsettings.doormode.open')} Buildtools` }
                                        </button>
+                                        <button
+                                            className="w-full text-white text-xs bg-[#1e7295] hover:bg-[#1a617f] border border-[#ffffff33] rounded px-2 py-1 cursor-pointer transition-colors"
+                                            onClick={ () =>
+                                            {
+                                                const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, avatarInfo.id, avatarInfo.isWallItem ? RoomObjectCategory.WALL : RoomObjectCategory.FLOOR);
+                                                const typeId = roomObject?.model?.getValue(RoomObjectVariable.FURNITURE_TYPE_ID);
+
+                                                CreateLinkEvent('furni-editor/show');
+
+                                                if(typeId) window.dispatchEvent(new CustomEvent('furni-editor:open', { detail: { spriteId: typeId } }));
+                                            } }>
+                                            Edit Furni
+                                        </button>
                                        { dropdownOpen &&
                                            <div className="flex gap-[4px] w-full">
                                                { /* Left panel: position + rotation */ }
@@ -1,4 +1,4 @@
-import { GetSessionDataManager, RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionFavoriteGroupUpdateEvent, RoomSessionUserBadgesEvent, RoomSessionUserFigureUpdateEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
+import { CreateLinkEvent, GetSessionDataManager, RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionFavoriteGroupUpdateEvent, RoomSessionUserBadgesEvent, RoomSessionUserFigureUpdateEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, FocusEvent, KeyboardEvent, SetStateAction, useCallback, useEffect, useState } from 'react';
 import { FaPencilAlt, FaTimes } from 'react-icons/fa';
 import { AvatarInfoUser, CloneObject, GetConfigurationValue, GetGroupInformation, GetUserProfile, LocalizeText, SendMessageComposer } from '../../../../../api';
@@ -7,7 +7,6 @@ import { useMessageEvent, useNitroEvent, useRoom } from '../../../../../hooks';
 import { InfoStandBadgeSlotView } from './InfoStandBadgeSlotView';
 import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelationshipsView';
 import { InfoStandWidgetUserTagsView } from './InfoStandWidgetUserTagsView';
-import { BackgroundsView } from '../../../../backgrounds/BackgroundsView';

 interface InfoStandWidgetUserViewProps {
  avatarInfo: AvatarInfoUser;
@@ -32,7 +31,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =

  const handleProfileClick = useCallback(() => { GetUserProfile(avatarInfo.webID); }, [avatarInfo.webID]);

-  const handleEditClick = useCallback((event: React.MouseEvent) => { event.stopPropagation(); setIsVisible(prev => !prev); }, []);
+  const handleEditClick = useCallback((event: React.MouseEvent) => { event.stopPropagation(); CreateLinkEvent('interface-settings/profile'); }, []);

  const saveMotto = (motto: string) => {
    if (!isEditingMotto || motto.length > GetConfigurationValue<number>('motto.max.length', 38) || !roomSession) return;
@@ -127,7 +126,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">
@@ -257,19 +256,6 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
          )}
        </Column>
      </Column>
-      {isVisible && avatarInfo.type === AvatarInfoUser.OWN_USER && (
-        <div className="backgrounds-view-container">
-          <BackgroundsView
-            setIsVisible={setIsVisible}
-            selectedBackground={backgroundId}
-            setSelectedBackground={setBackgroundId}
-            selectedStand={standId}
-            setSelectedStand={setStandId}
-            selectedOverlay={overlayId}
-            setSelectedOverlay={setOverlayId}
-          />
-        </div>
-      )}
    </>
  );
 };
@@ -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,38 +69,38 @@ 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 } justifyContent="between">
-                <Flex alignItems="center" gap={ 2 }>
-                    <Flex alignItems="center" gap={ 2 }>
-                        <Flex center pointer className={ 'relative w-[50px] h-[45px] overflow-hidden ' + (isMeExpanded ? 'active ' : '') } onClick={ event =>
-                        {
-                            setMeExpanded(!isMeExpanded);
-                            event.stopPropagation();
-                        } }>
-                            <LayoutAvatarImageView className="-ml-[5px] mt-[25px]" direction={ 2 } figure={ userFigure } position="absolute" />
-                            { (getTotalUnseen > 0) &&
-                                <LayoutItemCountView count={ getTotalUnseen } /> }
-                        </Flex>
-                        { isInRoom &&
-                            <ToolbarItemView icon="habbo" onClick={ event => VisitDesktop() } /> }
-                        { !isInRoom &&
-                            <ToolbarItemView icon="house" onClick={ event => CreateLinkEvent('navigator/goto/home') } /> }
-                        <ToolbarItemView icon="rooms" onClick={ event => CreateLinkEvent('navigator/toggle') } />
-                        { GetConfigurationValue('game.center.enabled') &&
-                            <ToolbarItemView icon="game" onClick={ event => CreateLinkEvent('games/toggle') } /> }
-                        <ToolbarItemView icon="catalog" onClick={ event => CreateLinkEvent('catalog/toggle') } />
-                        <ToolbarItemView icon="inventory" onClick={ event => CreateLinkEvent('inventory/toggle') }>
-                            { (getFullCount > 0) &&
-                                <LayoutItemCountView count={ getFullCount } /> }
-                        </ToolbarItemView>
-                        { isInRoom &&
-                            <ToolbarItemView icon="camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
-                        { isMod &&
-                            <ToolbarItemView icon="modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
+            <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 =>
+                    {
+                        setMeExpanded(!isMeExpanded);
+                        event.stopPropagation();
+                    } }>
+                        <LayoutAvatarImageView className="-ml-[5px] mt-[25px]" direction={ 2 } figure={ userFigure } position="absolute" />
+                        { (getTotalUnseen > 0) &&
+                            <LayoutItemCountView count={ getTotalUnseen } /> }
                    </Flex>
-                    <Flex alignItems="center" id="toolbar-chat-input-container" />
+                    { isInRoom &&
+                        <ToolbarItemView icon="habbo" onClick={ event => VisitDesktop() } /> }
+                    { !isInRoom &&
+                        <ToolbarItemView icon="house" onClick={ event => CreateLinkEvent('navigator/goto/home') } /> }
+                    <ToolbarItemView icon="rooms" onClick={ event => CreateLinkEvent('navigator/toggle') } />
+                    { GetConfigurationValue('game.center.enabled') &&
+                        <ToolbarItemView icon="game" onClick={ event => CreateLinkEvent('games/toggle') } /> }
+                    <ToolbarItemView icon="catalog" onClick={ event => CreateLinkEvent('catalog/toggle') } />
+                    <ToolbarItemView icon="inventory" onClick={ event => CreateLinkEvent('inventory/toggle') }>
+                        { (getFullCount > 0) &&
+                            <LayoutItemCountView count={ getFullCount } /> }
+                    </ToolbarItemView>
+                    { isInRoom &&
+                        <ToolbarItemView icon="camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
+                    { isMod &&
+                        <ToolbarItemView icon="modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
+                    { isMod &&
+                        <ToolbarItemView icon="catalog" onClick={ event => CreateLinkEvent('furni-editor/toggle') } /> }
                </Flex>
-                <Flex alignItems="center" gap={ 2 }>
+                <Flex alignItems="center" justifyContent="center" className="flex-1 min-w-0 max-w-[600px] mx-auto" id="toolbar-chat-input-container" />
+                <Flex alignItems="center" gap={ 2 } className="flex-shrink-0">
                    <Flex gap={ 2 }>
                        <ToolbarItemView icon="friendall" onClick={ event => CreateLinkEvent('friends/toggle') }>
                            { (requests.length > 0) &&
@@ -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;
@@ -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;