UI Customization Guide

Table of Contents

• File Structure
• CSS Variables
• Quick Color Changes
• Color Palette
• Typography
• Glassmorphism Effects
• Animations
• Chat Type Styling
• Settings Modal
• Advanced Customization

---

File Structure

CSS files are organized in html/css/:

html/
├── css/
│   ├── variables.css   # Design tokens & color palette
│   ├── animations.css  # Keyframe animations
│   ├── main.css        # Core chat styles
│   └── settings.css    # Settings modal styles
└── js/
    ├── app.js          # Main Vue application
    └── composables/    # Vue 3 composables

File	Purpose
variables.css	Colors, typography, spacing - the design system
animations.css	Message fade, slide-in animations
main.css	Chat container, messages, input styling
settings.css	Settings modal and form controls

---

CSS Variables

Oxide Chat uses CSS custom properties for consistent theming.

Viewing Current Variables

Open html/css/variables.css to see all available variables:

• Backgrounds (--bg-*)
• Text colors (--text-*)
• Brand colors (--oxide-*, --signal-*, etc.)
• Typography (--font-*)
• Spacing (--space-*)
• Shadows (--shadow-*)

---

Quick Color Changes

Changing the Primary Accent

The accent color (emerald green) is used for interactive elements:

:root {
    --oxide-accent: #10b981;
    --oxide-accent-light: #34d399;
    --oxide-accent-dark: #059669;
}

Change to blue:

:root {
    --oxide-accent: #3b82f6;
    --oxide-accent-light: #60a5fa;
    --oxide-accent-dark: #2563eb;
}

Changing Background Opacity

Adjust the glassmorphic transparency:

:root {
    /* More transparent */
    --bg-opacity: 0.75;

    /* More opaque */
    --bg-opacity: 0.95;

    /* Solid (no transparency) */
    --bg-opacity: 1.0;
}

---

Color Palette

Brand Colors

The Oxide brand palette:

:root {
    /* Core brand */
    --oxide-accent: #10b981;      /* Emerald accent */
    --forged-white: #F4F5F7;      /* Primary text */
    --iron-gray: #1A1C20;         /* Dark backgrounds */
    --steel-gray: #5F6670;        /* Secondary text */
    --carbon-black: #0D0E10;      /* Darkest background */

    /* Signal colors */
    --signal-amber: #C47A2C;      /* Warnings, OOC */
    --rust-red: #9B2C2C;          /* Errors, announcements */
}

Semantic Colors

:root {
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
}

Chat Type Colors

Customize colors for each message type:

/* In variables.css or via Config */
--chat-color-default: #F4F5F7;
--chat-color-ooc: #C47A2C;
--chat-color-me: #F4F5F7;
--chat-color-do: #5F6670;
--chat-color-whisper: #C47A2C;
--chat-color-shout: #9B2C2C;
--chat-color-system: #5F6670;
--chat-color-announcement: #9B2C2C;
--chat-color-police: #3b82f6;
--chat-color-ambulance: #ef4444;
--chat-color-mechanic: #f97316;

---

Typography

Font Family

:root {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

To change fonts:

1. Add font import to html/index.html:

   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&display=swap" rel="stylesheet">

2. Update the variable:

   :root {
       --font-family: 'Roboto', sans-serif;
   }

Font Sizes

:root {
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
}

Font Weights

:root {
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
}

---

Glassmorphism Effects

Background Blur

.chat-container {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

Increase/decrease blur:

/* Subtle blur */
backdrop-filter: blur(4px);

/* Heavy blur */
backdrop-filter: blur(16px);

/* No blur */
backdrop-filter: none;

Background Opacity

.chat-container {
    background: rgba(13, 14, 16, 0.75);
}

Border Styling

.chat-container {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

Removing Glassmorphism

For a solid, non-transparent chat:

.chat-container {
    backdrop-filter: none;
    background: #1a1c20;
    border: 1px solid #2a2c30;
}

---

Animations

Message Fade Animation

In animations.css:

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-enter {
    animation: messageSlideIn 0.2s ease-out;
}

Disabling Animations

Via player settings (most user-friendly):

• Settings > Appearance > Animations: Off

Via CSS:

.message-enter {
    animation: none !important;
}

Custom Animation

Add a bounce effect:

@keyframes messageBounce {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-enter {
    animation: messageBounce 0.3s ease-out;
}

---

Chat Type Styling

Styling in Lua Config

The primary way to customize chat types is via config/main.lua:

Config.ChatTypes = {
    custom = {
        color = '#FF00FF',      -- Hex color
        prefix = 'CUSTOM',      -- Prefix text
        italic = true,          -- Italic styling
    }
}

Styling in CSS

For more advanced styling, use CSS:

/* Target specific chat type */
.message[data-type="announcement"] {
    background: rgba(155, 44, 44, 0.1);
    border-left: 3px solid #9B2C2C;
    padding-left: 12px;
}

/* Prefix styling */
.message-prefix {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
}

/* Author name styling */
.message-author {
    font-weight: 500;
}

---

Settings Modal

Modal Styling

The settings modal uses settings.css:

.settings-modal {
    background: rgba(13, 14, 16, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    max-width: 480px;
}

Form Controls

/* Input fields */
.settings-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

/* Sliders */
.settings-slider {
    accent-color: var(--oxide-accent);
}

/* Buttons */
.settings-button {
    background: var(--oxide-accent);
    color: white;
    border-radius: 8px;
}

Tab Styling

.settings-tab {
    padding: 8px 16px;
    border-radius: 8px;
}

.settings-tab.active {
    background: var(--oxide-accent);
}

---

Advanced Customization

Custom Scrollbar

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

Input Field Styling

.chat-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
}

.chat-input:focus {
    border-color: var(--oxide-accent);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

Suggestion Dropdown

.suggestions-container {
    background: rgba(13, 14, 16, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.suggestion-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.suggestion-item.selected {
    background: var(--oxide-accent);
}

Message Density

/* Compact */
.density-compact .message {
    padding: 4px 0;
}

/* Comfortable (default) */
.density-comfortable .message {
    padding: 6px 0;
}

/* Spacious */
.density-spacious .message {
    padding: 10px 0;
}

---

Tips

1. Test all changes - Check with different message types
2. Check contrast - Ensure text is readable on backgrounds
3. Test animations - Verify smooth performance
4. Clear cache - FiveM caches NUI assets aggressively

Clearing FiveM Cache

%localappdata%/FiveM/FiveM.app/data/cache/

Delete contents of this folder to see CSS changes.

Development Workflow

1. Make CSS changes
2. Clear FiveM cache
3. Reconnect to server
4. Test changes

Or use the NUI Developer Tools:

1. Press F8 in-game
2. Type nui_devtools oxide-chat
3. Use browser DevTools to test CSS live