# Creating Your First Theme

Themes in BDUK define the overall look and feel of your UI — including fonts, colors, borders, gradients, and effects.\
You can create your own themes by editing a simple CSS file and registering it in the system config.

***

## Step 1: Copy the Default Theme

Start with the default theme located at:

```
/ui/css/themes/default.css
```

Make a copy, give it a name like:

```
/ui/css/themes/mytheme.css
```

> **Keep the credit line at the top** — support honest development. don't be that guy...\
> Don't forget to add your own credit note below. 

***

## Step 2: Edit Your Theme

Open your new CSS file and change any of the variables inside the `body.YOUR_THEME_NAME` block.

Below is a complete list of available CSS variables you can use when customizing your theme:

| **Category**       | **Variable**                              | **Description**                              |
| ------------------ | ----------------------------------------- | -------------------------------------------- |
| **Fonts**          | `--header_font`                           | Font used in headers                         |
|                    | `--text_font`                             | Font used for regular text                   |
| **Border Radius**  | `--border_radius_outer`                   | Radius for card/panel corners                |
|                    | `--border_radius_inner`                   | Radius for inner elements like inputs        |
| **Backgrounds**    | `--background_main`                       | Main background color                        |
|                    | `--background_panel`                      | Panels/containers background                 |
|                    | `--background_hover`                      | Background when hovered                      |
|                    | `--background_overlay`                    | Overlay background for modals/tooltips       |
| **Text Colors**    | `--text_primary`                          | Main text color                              |
|                    | `--text_secondary`                        | Subtext or secondary UI text                 |
|                    | `--text_tertiary`                         | Placeholder or hint text                     |
| **Accents**        | `--accent`                                | Primary accent color                         |
|                    | `--accent2`                               | Secondary accent                             |
|                    | `--accent3`                               | Used for alerts/danger zones                 |
|                    | `--accent4`                               | Extra accent (often for icons or details)    |
| **Borders**        | `--border_dark`                           | Dark border (used for cards/panels)          |
|                    | `--border_light`                          | Light border (used for separation lines)     |
|                    | `--border_dashed`                         | Dashed border for debugging/separators       |
| **Shadows**        | `--shadow_soft`                           | Soft drop shadow                             |
|                    | `--shadow_medium`                         | Medium drop shadow                           |
|                    | `--shadow_large`                          | Large drop shadow                            |
|                    | `--inset_shadow_large`                    | Large inset shadow for panels/inputs         |
|                    | `--inset_shadow_small`                    | Small inset shadow for inputs                |
|                    | `--text_shadow_hard`                      | Strong black outline around text             |
| **Gradients**      | `--gradient_fade_left`                    | Fade from left                               |
|                    | `--gradient_fade_right`                   | Fade from right                              |
|                    | `--gradient_fade_both`                    | Symmetrical fade in from both sides          |
| **Buttons**        | `--button_padding`                        | Padding inside buttons                       |
| **Scrollbars**     | `--scrollbar_track`                       | Background of scrollbars                     |
|                    | `--scrollbar_thumb`                       | Scrollbar draggable section                  |
| **Icons**          | `--icon_primary`                          | Color for primary icons                      |
|                    | `--icon_secondary`                        | Color for secondary icons                    |
| **Tooltips**       | `--tooltip_title`                         | Background/text color for tooltip title      |
|                    | `--tooltip_rarity_badge`                  | Background color for rarity badge in tooltip |
| **Namecard Ranks** | `--rank_bronze` to `--rank_legend`        | Rank color coding on namecards               |
| **Item Rarity**    | `--rarity_common` to `--rarity_legendary` | Color overlays for item rarity               |
| **Notifications**  | `--notify_success`                        | Color for success notifications              |
|                    | `--notify_error`                          | Color for error notifications                |
|                    | `--notify_info`                           | Color for info notifications                 |
|                    | `--notify_warning`                        | Color for warning notifications              |
|                    | `--notify_primary`                        | Used for general or system notices           |

***

## Step 3: Register Your Theme

Open `manifest.json` and make sure your theme is properly registered.

#### 1. Add your theme to the list:

```json
"themes": ["dark", "light", "mytheme"]
```

#### 2. Add the CSS file:

```json
"css": [
  ...
  "/ui/css/themes/mytheme.css"
]
```

#### 3. Set it as the default if you want it active:

```json
"default_theme": "mytheme"
```

> **Note:** Theme switching is not supported live yet — only the **default** theme is applied on load.

***

## That's It!

Your theme will now be used automatically when the UI loads.\
You can build as many themes as you want and change the default in the manifest to test each.

***

##  Coming Soon

* Support for dynamic theme switching in the builder
* Theme preview and selection components
* Theme-specific overrides for cards, modals, namecards, and more


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.boii.dev/fivem-free-resources/bduk/guides/creating-your-first-theme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.