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:

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

2. Add the CSS file:

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

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

"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