# 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