Theme Settings

The Settings module provides comprehensive theme management, UI customization, and user preference systems for B2Lib. It offers sophisticated visual theme switching, persistent configuration storage, advanced layout positioning, real-time preview capabilities, and extensive customization options for creating personalized user experiences with seamless integration across all UI components.

setTheme

Set the current theme mode for all B2Lib UI components with advanced options and validation.

-- Client-side
B2Lib.UI.setTheme(mode, options)

-- Server-side (via exports)
exports.b2lib:setPlayerTheme(playerId, mode, options)

Parameters:

mode (string, required): Theme mode - 'light', 'dark', 'transparent', or 'custom'
options (table, optional): Advanced theme configuration options
playerId (number, server-side only): Player server ID to set theme for

Configuration Options:

persist (boolean, optional): Save theme preference to server (default: true)
animate (boolean, optional): Animate theme transition (default: true)
duration (number, optional): Animation duration in milliseconds (default: 300)
customColors (table, optional): Custom color overrides for theme
components (table, optional): Component-specific theme overrides
accessibility (table, optional): Accessibility-specific theme adjustments
preview (boolean, optional): Preview mode without saving (default: false)

Returns: boolean - Success status indicating theme application completion

Example:

-- Basic theme setting
local success = B2Lib.UI.setTheme('dark')

-- Advanced theme setting with options
B2Lib.UI.setTheme('dark', {
    persist = true,
    animate = true,
    duration = 500,
    customColors = {
        primary = '#1e293b',
        accent = '#3b82f6',
        success = '#10b981',
        warning = '#f59e0b',
        error = '#ef4444'
    },
    components = {
        notifications = { opacity = 0.95 },
        menus = { borderRadius = '12px' }
    },
    accessibility = {
        highContrast = false,
        reducedMotion = false
    }
})

-- Custom theme with comprehensive configuration
B2Lib.UI.setTheme('custom', {
    customColors = {
        primary = '#0f172a',
        secondary = '#1e293b',
        tertiary = '#334155',
        accent = '#6366f1',
        success = '#059669',
        warning = '#d97706',
        error = '#dc2626',
        text = '#f8fafc',
        textSecondary = '#cbd5e1',
        border = '#475569',
        shadow = 'rgba(0,0,0,0.25)'
    },
    components = {
        notifications = {
            borderRadius = '8px',
            backdropBlur = '12px',
            shadow = '0 10px 25px rgba(0,0,0,0.3)'
        },
        progress = {
            height = '6px',
            borderRadius = '3px',
            glowEffect = true
        }
    }
})

-- Server-side theme setting
exports.b2lib:setPlayerTheme(playerId, 'dark', {
    persist = true,
    customColors = {
        accent = '#8b5cf6'
    }
})

-- Preview theme without saving
B2Lib.UI.setTheme('light', {
    preview = true,
    duration = 200
})

getTheme

Get comprehensive information about the currently active theme including mode, colors, and configuration.

B2Lib.UI.getTheme(detailed)

Parameters:

detailed (boolean, optional): Return detailed theme information including colors and settings (default: false)

Returns: string|table - Current theme mode or detailed theme information object

mode (string): Current theme mode ('dark', 'light', 'transparent', 'custom')
colors (table): Current color palette with all theme colors
settings (table): Current theme settings and configuration
customizations (table): User customizations and overrides
accessibility (table): Accessibility settings and adjustments

Example:

-- Get current theme mode
local currentTheme = B2Lib.UI.getTheme()
print('Current theme:', currentTheme) -- 'dark', 'light', 'transparent', or 'custom'

-- Get detailed theme information
local themeInfo = B2Lib.UI.getTheme(true)
print('Theme mode:', themeInfo.mode)
print('Primary color:', themeInfo.colors.primary)
print('Accent color:', themeInfo.colors.accent)
print('Animation duration:', themeInfo.settings.animationDuration)

-- Use theme in conditional logic
if B2Lib.UI.getTheme() == 'dark' then
    -- Dark theme specific logic
    print('Using dark theme')
    applyDarkThemeLogic()
elseif B2Lib.UI.getTheme() == 'custom' then
    -- Custom theme logic
    local colors = B2Lib.UI.getTheme(true).colors
    applyCustomThemeLogic(colors)
end

-- Check for accessibility features
local themeDetails = B2Lib.UI.getTheme(true)
if themeDetails.accessibility.highContrast then
    enableHighContrastMode()
end

openThemeSettings

Open the comprehensive theme settings interface with advanced customization options and real-time preview.

-- Client-side
B2Lib.UI.openThemeSettings(options)

-- Server-side (via exports)
exports.b2lib:openPlayerThemeSettings(playerId, options)

Parameters:

options (table, optional): Settings interface configuration options
playerId (number, server-side only): Player server ID to open settings for

Configuration Options:

tab (string, optional): Initial tab to open ('themes', 'colors', 'layout', 'components', 'accessibility') (default: 'themes')
component (string, optional): Focus on specific component settings
readonly (boolean, optional): Open in read-only mode for viewing (default: false)
adminMode (boolean, optional): Enable admin-only settings and options (default: false)
presets (table, optional): Custom preset themes to include
restrictions (table, optional): Restrict access to certain settings categories
callbacks (table, optional): Custom callback functions for settings events

Returns: boolean - Success status indicating settings interface opening

Features:

Theme Modes: Switch between light, dark, transparent, and custom themes with live preview
Color Customization: Advanced color picker with HSL controls, palette management, and accessibility validation
Typography Settings: Font family selection, size scaling, weight adjustment, and text rendering options
Layout Positioning: Drag-and-drop positioning for UI elements with grid snapping and alignment guides
Animation Controls: Configure animation speeds, easing functions, and transition effects with performance optimization
Component Styling: Individual customization for each UI component with advanced styling options and presets
Accessibility Options: High contrast modes, reduced motion, screen reader support, and visual accommodations
Import/Export: Settings backup, sharing, and restoration with version compatibility and validation
Real-Time Preview: Instant visual feedback for all customization changes with live component updates
Preset Management: Save, load, and share custom theme presets with community integration

Example:

-- Basic theme settings
local success = B2Lib.UI.openThemeSettings()

-- Open specific tab
B2Lib.UI.openThemeSettings({
    tab = 'colors'
})

-- Focus on specific component
B2Lib.UI.openThemeSettings({
    tab = 'components',
    component = 'notifications'
})

-- Admin mode with full access
B2Lib.UI.openThemeSettings({
    adminMode = true,
    tab = 'themes',
    presets = {
        {
            name = 'Server Theme',
            mode = 'custom',
            colors = getServerThemeColors(),
            locked = true
        }
    }
})

-- Restricted settings for specific users
B2Lib.UI.openThemeSettings({
    restrictions = {
        colors = false,        -- Disable color customization
        layout = true,         -- Allow layout changes
        components = false     -- Disable component styling
    },
    callbacks = {
        onSave = function(settings)
            print('Settings saved:', json.encode(settings))
            logUserSettingsChange(PlayerId(), settings)
        end,
        onReset = function()
            print('Settings reset to defaults')
            notifyAdmins('User reset theme settings: ' .. GetPlayerName(PlayerId()))
        end
    }
})

-- Server-side settings opening
exports.b2lib:openPlayerThemeSettings(playerId, {
    tab = 'accessibility',
    readonly = false,
    adminMode = isPlayerAdmin(playerId)
})

-- Bind to command
RegisterCommand('themesettings', function()
    B2Lib.UI.openThemeSettings()
end)

-- Bind to key
RegisterKeyMapping('themesettings', 'Open Theme Settings', 'keyboard', 'F7')

saveSettings

Save current theme and UI settings to server with validation and backup functionality.

-- Client-side
B2Lib.UI.saveSettings(settings, options)

-- Server-side (via exports)
exports.b2lib:savePlayerSettings(playerId, settings, options)

Parameters:

settings (table, optional): Specific settings to save (default: current settings)
options (table, optional): Save operation configuration
playerId (number, server-side only): Player server ID to save settings for

Configuration Options:

backup (boolean, optional): Create backup before saving (default: true)
validate (boolean, optional): Validate settings before saving (default: true)
notify (boolean, optional): Show save confirmation notification (default: true)
sync (boolean, optional): Synchronize with other connected clients (default: false)

Returns: boolean - Success status indicating settings save completion

Example:

-- Save current settings
local success = B2Lib.UI.saveSettings()

-- Save specific settings with options
B2Lib.UI.saveSettings({
    theme = 'dark',
    colors = {
        accent = '#3b82f6'
    },
    layout = {
        notifications = 'top-right'
    }
}, {
    backup = true,
    notify = true
})

-- Server-side save
exports.b2lib:savePlayerSettings(playerId, playerSettings, {
    validate = true,
    backup = true
})

loadSettings

Load saved theme and UI settings from server with fallback and migration support.

-- Client-side
B2Lib.UI.loadSettings(options)

-- Server-side (via exports)
exports.b2lib:loadPlayerSettings(playerId, options)

Parameters:

options (table, optional): Load operation configuration
playerId (number, server-side only): Player server ID to load settings for

Configuration Options:

fallback (table, optional): Fallback settings if load fails
migrate (boolean, optional): Migrate old settings format (default: true)
apply (boolean, optional): Automatically apply loaded settings (default: true)
notify (boolean, optional): Show load status notification (default: false)

Returns: table|boolean - Loaded settings object or false if failed

Example:

-- Load settings with auto-apply
local settings = B2Lib.UI.loadSettings()

-- Load with custom options
local settings = B2Lib.UI.loadSettings({
    fallback = {
        theme = 'dark',
        layout = getDefaultLayout()
    },
    migrate = true,
    apply = true,
    notify = true
})

-- Server-side load
local playerSettings = exports.b2lib:loadPlayerSettings(playerId, {
    migrate = true
})

resetSettings

Reset theme and UI settings to default values with selective reset options.

-- Client-side
B2Lib.UI.resetSettings(options)

-- Server-side (via exports)
exports.b2lib:resetPlayerSettings(playerId, options)

Parameters:

options (table, optional): Reset operation configuration
playerId (number, server-side only): Player server ID to reset settings for

Configuration Options:

categories (table, optional): Specific categories to reset ('theme', 'colors', 'layout', 'components')
confirm (boolean, optional): Show confirmation dialog (default: true)
backup (boolean, optional): Create backup before reset (default: true)
apply (boolean, optional): Automatically apply reset settings (default: true)

Returns: boolean - Success status indicating settings reset completion

Example:

-- Reset all settings with confirmation
local success = B2Lib.UI.resetSettings()

-- Reset specific categories
B2Lib.UI.resetSettings({
    categories = { 'theme', 'colors' },
    confirm = true,
    backup = true
})

-- Silent reset without confirmation
B2Lib.UI.resetSettings({
    confirm = false,
    backup = false
})

-- Server-side reset
exports.b2lib:resetPlayerSettings(playerId, {
    categories = { 'layout' },
    backup = true
})

exportSettings

Export current settings to shareable format with encryption and validation.

B2Lib.UI.exportSettings(options)

Parameters:

options (table, optional): Export operation configuration

Configuration Options:

format (string, optional): Export format ('json', 'base64', 'encrypted') (default: 'json')
categories (table, optional): Specific categories to export
compress (boolean, optional): Compress exported data (default: true)
metadata (boolean, optional): Include metadata and version info (default: true)

Returns: string - Exported settings data in specified format

Example:

-- Basic export
local exportData = B2Lib.UI.exportSettings()

-- Export specific categories
local themeExport = B2Lib.UI.exportSettings({
    categories = { 'theme', 'colors' },
    format = 'base64',
    compress = true
})

-- Export for sharing
local shareData = B2Lib.UI.exportSettings({
    format = 'encrypted',
    metadata = true
})

importSettings

Import settings from exported data with validation and conflict resolution.

B2Lib.UI.importSettings(data, options)

Parameters:

data (string, required): Exported settings data to import
options (table, optional): Import operation configuration

Configuration Options:

merge (boolean, optional): Merge with existing settings (default: false)
validate (boolean, optional): Validate imported data (default: true)
apply (boolean, optional): Automatically apply imported settings (default: true)
backup (boolean, optional): Create backup before import (default: true)
conflicts (string, optional): Conflict resolution strategy ('overwrite', 'merge', 'skip') (default: 'overwrite')

Returns: boolean - Success status indicating settings import completion

Example:

-- Basic import
local success = B2Lib.UI.importSettings(exportedData)

-- Import with merge
B2Lib.UI.importSettings(exportedData, {
    merge = true,
    conflicts = 'merge',
    backup = true
})

-- Import with validation
B2Lib.UI.importSettings(sharedSettings, {
    validate = true,
    apply = false,  -- Don't auto-apply, let user review
    backup = true
})

Theme Modes

Dark Theme

The default theme with dark backgrounds and light text, optimized for low-light environments.

B2Lib.UI.setTheme('dark')

Characteristics:

Dark backgrounds (#1a1a1a, #2d2d2d)
Light text (#ffffff, #e5e5e5)
Subtle borders and shadows
Reduced eye strain in dark environments
Professional appearance

Light Theme

A bright theme with light backgrounds and dark text, suitable for well-lit environments.

B2Lib.UI.setTheme('light')

Characteristics:

Light backgrounds (#ffffff, #f5f5f5)
Dark text (#1a1a1a, #333333)
Clean, modern appearance
High contrast for readability
Suitable for daytime use

Transparent Theme

A semi-transparent theme that blends with the game environment.

B2Lib.UI.setTheme('transparent')

Characteristics:

Semi-transparent backgrounds
Subtle borders and effects
Minimal visual interference
Immersive gaming experience
Maintains readability

Events

The Settings system triggers events for theme changes and settings updates:

b2lib:theme-changed

Triggered when the theme is changed.

AddEventHandler('b2lib:theme-changed', function(newTheme)
    print('Theme changed to:', newTheme)
    
    -- Update your script's UI based on theme
    if newTheme == 'dark' then
        -- Apply dark theme styles to custom UI
        updateCustomUITheme('dark')
    elseif newTheme == 'light' then
        -- Apply light theme styles to custom UI
        updateCustomUITheme('light')
    elseif newTheme == 'transparent' then
        -- Apply transparent theme styles to custom UI
        updateCustomUITheme('transparent')
    end
end)

b2lib:theme-settings-opened

Triggered when the theme settings interface is opened.

AddEventHandler('b2lib:theme-settings-opened', function()
    print('Theme settings opened')
    
    -- Pause certain game functions while settings are open
    pauseGameFeatures()
end)

b2lib:theme-settings-closed

Triggered when the theme settings interface is closed.

AddEventHandler('b2lib:theme-settings-closed', function()
    print('Theme settings closed')
    
    -- Resume game functions
    resumeGameFeatures()
end)

b2lib:theme-settings-saved

Triggered when theme settings are successfully saved.

AddEventHandler('b2lib:theme-settings-saved', function(settings)
    print('Theme settings saved:', json.encode(settings))
    
    -- Apply any custom logic based on saved settings
    applyCustomSettings(settings)
end)

b2lib:theme-settings-loaded

Triggered when theme settings are loaded from the server.

AddEventHandler('b2lib:theme-settings-loaded', function(settings)
    print('Theme settings loaded:', json.encode(settings))
    
    -- Initialize your script with loaded settings
    initializeWithSettings(settings)
end)

b2lib:theme-settings-reset

Triggered when theme settings are reset to defaults.

AddEventHandler('b2lib:theme-settings-reset', function()
    print('Theme settings reset to defaults')
    
    -- Reinitialize with default settings
    initializeWithDefaults()
end)

Component Styling

The theme settings interface provides comprehensive styling options for each UI component:

Available Components

Notifications: Toast-style notification styling
Progress: Progress bar appearance and animations
Menus: Menu layout, colors, and typography
TextUI: Contextual text display styling
Input: Input dialog appearance and validation styling
Alert: Alert dialog colors and layout
Context Menu: Right-click menu styling
Skillcheck: Minigame colors, sizes, and animations
Lockpicking: Lock interface styling and feedback
Hacking: Terminal interface appearance
Radial Menu: Circular menu styling and animations

Styling Categories

Each component offers styling options in two categories:

Basic Settings

Colors: Primary, background, text, and accent colors
Sizes: Width, height, padding, and spacing
Typography: Font size, weight, and line height
Borders: Border radius, width, and style
Shadows: Drop shadow intensity and blur

Advanced Settings

Animations: Duration, easing, and transition effects
Opacity: Transparency levels for different states
Positioning: Precise positioning and alignment
Interactive States: Hover, active, and disabled styling
Custom Properties: Component-specific advanced options

Live Preview

All styling changes include live preview functionality:

-- Component styling changes trigger preview updates
AddEventHandler('b2lib:component-style-changed', function(component, property, value)
    print(string.format('Component %s property %s changed to %s', component, property, value))
    
    -- Update your custom UI to match
    updateCustomComponentStyle(component, property, value)
end)

Slider Controls

Advanced settings use slider controls for precise value adjustment:

Size Controls: Pixel values with appropriate min/max ranges
Opacity Controls: 0-100% with real-time preview
Animation Speed: Millisecond precision for timing
Color Intensity: HSL adjustments for fine-tuning
Spacing Values: Consistent spacing scale

Reset and Export

Individual Reset: Reset specific component styling to defaults
Global Reset: Reset all components to default styling
Export Settings: Export current theme configuration
Import Settings: Import previously saved theme configurations

AddEventHandler('b2lib:theme-settings-reset', function()
    print('Theme settings reset to defaults')
    
    -- Reset any custom configurations
    resetCustomSettings()
end)

b2lib:layout-mode-started

Triggered when layout positioning mode is started.

AddEventHandler('b2lib:layout-mode-started', function(elementType, currentPosition)
    print('Layout mode started for:', elementType)
    print('Current position:', currentPosition)
    
    -- Show helpful instructions
    B2Lib.UI.notify({
        type = 'info',
        title = 'Layout Mode',
        message = 'Click on the grid to position ' .. elementType,
        duration = 5000
    })
end)

Configuration

Theme settings are configured in Config.lua:

-- Theme configuration - Simplified
Config.Theme = {
    mode = 'dark',                      -- Default theme mode
    allowUserCustomization = true,     -- Allow users to change themes
    persistSettings = true,            -- Save settings server-side
    
    -- Theme definitions
    themes = {
        dark = {
            primary = '#1a1a1a',       -- Primary background
            secondary = '#2d2d2d',     -- Secondary background
            accent = '#3b82f6',        -- Accent color
            text = '#ffffff',          -- Primary text
            textSecondary = '#e5e5e5', -- Secondary text
            border = '#404040',        -- Border color
            shadow = 'rgba(0,0,0,0.5)' -- Shadow color
        },
        light = {
            primary = '#ffffff',       -- Primary background
            secondary = '#f5f5f5',     -- Secondary background
            accent = '#3b82f6',        -- Accent color
            text = '#1a1a1a',          -- Primary text
            textSecondary = '#333333', -- Secondary text
            border = '#e5e5e5',        -- Border color
            shadow = 'rgba(0,0,0,0.1)' -- Shadow color
        },
        transparent = {
            primary = 'rgba(26,26,26,0.8)',     -- Primary background
            secondary = 'rgba(45,45,45,0.8)',   -- Secondary background
            accent = '#3b82f6',                  -- Accent color
            text = '#ffffff',                    -- Primary text
            textSecondary = '#e5e5e5',           -- Secondary text
            border = 'rgba(64,64,64,0.8)',      -- Border color
            shadow = 'rgba(0,0,0,0.3)'          -- Shadow color
        }
    },
    
    -- Animation settings
    animations = {
        duration = 200,                 -- Default animation duration
        easing = 'ease-in-out',        -- Default easing function
        enableTransitions = true        -- Enable smooth transitions
    },
    
    -- Layout grid settings
    layoutGrid = {
        enabled = true,                 -- Enable layout positioning
        gridSize = 12,                  -- Grid columns/rows
        snapToGrid = true,              -- Snap elements to grid
        showGrid = true,                -- Show grid in layout mode
        previewElements = true          -- Show preview elements
    }
}

-- Component positioning defaults
Config.ComponentPositions = {
    notifications = 'top-right',       -- Default notification position
    progress = 'bottom',                -- Default progress bar position
    textUI = 'bottom-center',          -- Default text UI position
    input = 'center',                  -- Default input dialog position
    alert = 'center',                  -- Default alert dialog position
    menu = 'center-left',              -- Default menu position
    contextMenu = 'mouse',             -- Default context menu position
    radialMenu = 'center'              -- Default radial menu position
}

Advanced Examples

Theme-Aware Custom UI

-- Create a custom UI that adapts to theme changes
local function createThemeAwareUI()
    local currentTheme = B2Lib.UI.getTheme()
    
    -- Define theme-specific styles
    local themeStyles = {
        dark = {
            backgroundColor = '#1a1a1a',
            textColor = '#ffffff',
            borderColor = '#404040'
        },
        light = {
            backgroundColor = '#ffffff',
            textColor = '#1a1a1a',
            borderColor = '#e5e5e5'
        },
        transparent = {
            backgroundColor = 'rgba(26,26,26,0.8)',
            textColor = '#ffffff',
            borderColor = 'rgba(64,64,64,0.8)'
        }
    }
    
    local styles = themeStyles[currentTheme] or themeStyles.dark
    
    -- Apply styles to your custom UI
    SendNUIMessage({
        type = 'updateCustomUITheme',
        data = {
            styles = styles,
            theme = currentTheme
        }
    })
    
    -- Listen for theme changes
    AddEventHandler('b2lib:theme-changed', function(newTheme)
        local newStyles = themeStyles[newTheme] or themeStyles.dark
        
        SendNUIMessage({
            type = 'updateCustomUITheme',
            data = {
                styles = newStyles,
                theme = newTheme
            }
        })
    end)
end

Settings Management System

-- Create a comprehensive settings management system
local playerSettings = {}

local function initializeSettings()
    -- Load settings when player joins
    AddEventHandler('b2lib:theme-settings-loaded', function(settings)
        playerSettings = settings or {}
        
        -- Apply loaded settings
        if playerSettings.theme then
            B2Lib.UI.setTheme(playerSettings.theme)
        end
        
        if playerSettings.notifications then
            applyNotificationSettings(playerSettings.notifications)
        end
        
        if playerSettings.ui then
            applyUISettings(playerSettings.ui)
        end
    end)
    
    -- Save settings when changed
    AddEventHandler('b2lib:theme-settings-saved', function(settings)
        playerSettings = settings
        print('Settings saved successfully')
    end)
    
    -- Handle theme changes
    AddEventHandler('b2lib:theme-changed', function(newTheme)
        playerSettings.theme = newTheme
        
        -- Auto-save theme changes
        TriggerServerEvent('b2lib:savePlayerSettings', playerSettings)
    end)
end

local function applyNotificationSettings(notifSettings)
    -- Apply notification-specific settings
    if notifSettings.position then
        Config.ComponentPositions.notifications = notifSettings.position
    end
    
    if notifSettings.duration then
        Config.Notifications.duration = notifSettings.duration
    end
    
    if notifSettings.sound then
        Config.Notifications.enableSound = notifSettings.sound
    end
end

local function applyUISettings(uiSettings)
    -- Apply UI-specific settings
    if uiSettings.animations then
        Config.Theme.animations.enableTransitions = uiSettings.animations
    end
    
    if uiSettings.scale then
        -- Apply UI scaling
        SendNUIMessage({
            type = 'setUIScale',
            data = { scale = uiSettings.scale }
        })
    end
end

-- Initialize on resource start
CreateThread(function()
    Wait(1000) -- Wait for B2Lib to initialize
    initializeSettings()
end)

Theme Switcher Command

-- Create a command to quickly switch themes
RegisterCommand('theme', function(source, args)
    local theme = args[1]
    
    if not theme then
        local currentTheme = B2Lib.UI.getTheme()
        B2Lib.UI.notify({
            type = 'info',
            title = 'Current Theme',
            message = 'Current theme: ' .. currentTheme .. '\nAvailable: dark, light, transparent'
        })
        return
    end
    
    if theme ~= 'dark' and theme ~= 'light' and theme ~= 'transparent' then
        B2Lib.UI.notify({
            type = 'error',
            title = 'Invalid Theme',
            message = 'Valid themes: dark, light, transparent'
        })
        return
    end
    
    local success = B2Lib.UI.setTheme(theme)
    
    if success then
        B2Lib.UI.notify({
            type = 'success',
            title = 'Theme Changed',
            message = 'Theme changed to: ' .. theme
        })
    else
        B2Lib.UI.notify({
            type = 'error',
            title = 'Theme Error',
            message = 'Failed to change theme'
        })
    end
end)

-- Add suggestions for the command
TriggerEvent('chat:addSuggestion', '/theme', 'Change B2Lib theme', {
    { name = 'mode', help = 'Theme mode: dark, light, transparent' }
})

-- Integrate theme settings into a custom settings menu
local function createSettingsMenu()
    local currentTheme = B2Lib.UI.getTheme()
    
    B2Lib.UI.registerMenu('game_settings', {
        title = 'Game Settings',
        subtitle = 'Configure your preferences',
        items = {
            {
                label = 'Theme',
                value = 'theme_submenu',
                submenu = 'theme_settings',
                description = 'Current: ' .. currentTheme,
                icon = 'palette'
            },
            {
                label = 'UI Layout',
                value = 'layout',
                description = 'Customize UI element positions',
                icon = 'layout'
            },
            {
                label = 'Notifications',
                value = 'notifications_submenu',
                submenu = 'notification_settings',
                icon = 'bell'
            },
            {
                label = 'Advanced Settings',
                value = 'advanced',
                description = 'Open advanced theme settings',
                icon = 'settings'
            }
        ]
    })
    
    B2Lib.UI.registerMenu('theme_settings', {
        title = 'Theme Settings',
        subtitle = 'Choose your preferred theme',
        items = {
            {
                label = 'Dark Theme',
                value = 'dark',
                description = 'Dark backgrounds, light text',
                icon = 'moon',
                type = 'radio',
                checked = currentTheme == 'dark'
            },
            {
                label = 'Light Theme',
                value = 'light',
                description = 'Light backgrounds, dark text',
                icon = 'sun',
                type = 'radio',
                checked = currentTheme == 'light'
            },
            {
                label = 'Transparent Theme',
                value = 'transparent',
                description = 'Semi-transparent, immersive',
                icon = 'eye',
                type = 'radio',
                checked = currentTheme == 'transparent'
            }
        ]
    })
    
    -- Handle theme selection
    AddEventHandler('b2lib:menu-item-selected', function(data)
        if data.menuId == 'theme_settings' then
            B2Lib.UI.setTheme(data.value)
            B2Lib.UI.hideMenu()
            
            B2Lib.UI.notify({
                type = 'success',
                message = 'Theme changed to: ' .. data.value
            })
        elseif data.menuId == 'game_settings' then
            if data.value == 'layout' then
                B2Lib.UI.openThemeSettings()
            elseif data.value == 'advanced' then
                B2Lib.UI.openThemeSettings()
            end
        end
    end)
    
    B2Lib.UI.showMenu('game_settings')
end

-- Bind to command
RegisterCommand('settings', function()
    createSettingsMenu()
end)

Best Practices

Initialize early - Set up theme event handlers during resource startup
Respect user preferences - Load and apply saved theme settings
Provide feedback - Show notifications when themes change
Test all themes - Ensure your UI works with all theme modes
Use theme events - React to theme changes in your custom UI
Save settings - Persist user preferences across sessions
Provide defaults - Have fallback values for missing settings
Handle errors gracefully - Check for valid theme modes before applying

Troubleshooting

Theme Not Changing

Check that the theme mode is valid ('dark', 'light', 'transparent')
Verify B2Lib is properly initialized
Check console for error messages from B2Lib.Debug
Ensure no other scripts are overriding theme settings

Settings Not Saving

Verify server-side callback functions are working
Check that the player has permission to save settings
Ensure database/file storage is properly configured
Check server console for save errors

Theme Settings UI Not Opening

Check that no other modal dialogs are active
Verify NUI focus is not blocked by other scripts
Ensure the theme settings resource files are present
Check for JavaScript errors in browser console

Custom UI Not Updating

Verify theme change event handlers are registered
Check that your custom UI is listening for theme updates
Ensure theme styles are properly applied to custom elements
Test theme changes with simple UI elements first

PreviousText UI NextModules

Last updated 1 month ago

setTheme

getTheme

openThemeSettings

saveSettings

loadSettings

resetSettings

exportSettings

importSettings

Theme Modes

Dark Theme

Light Theme

Transparent Theme

Events

b2lib:theme-changed

b2lib:theme-settings-opened

b2lib:theme-settings-closed

b2lib:theme-settings-saved

b2lib:theme-settings-loaded

b2lib:theme-settings-reset

Component Styling

Available Components

Styling Categories

Live Preview

Slider Controls

Reset and Export

b2lib:layout-mode-started

Configuration

Advanced Examples

Theme-Aware Custom UI

Settings Management System

Theme Switcher Command

Settings Menu Integration

Best Practices

Troubleshooting

Theme Not Changing

Settings Not Saving

Theme Settings UI Not Opening

Custom UI Not Updating