Theme

The Theme API allows mods to create and register custom themes, change the active theme at runtime, and inject custom CSS into the game.

Importing

import { Theme } from "@hotbunny/hackhub-content-sdk";

Registering a Theme

Create a custom theme by providing a partial configuration. Any property you don't specify will automatically inherit from the Default (Bear OS) theme.

Theme.register("my-dark-theme", {
    name: "My Dark Theme",
    colors: {
        taskbarBg: "#0a0a0f",
        accentColor: "#e94560",
        windowTitlebar: "#1a1a2e",
        windowBg: "#16213e",
    },
    taskbar: {
        position: "floating",
        borderRadius: "1rem",
        blur: true,
    },
    windows: {
        controlsStyle: "traffic-light",
        controlsPosition: "left",
        borderRadius: "0.75rem",
    },
});

Activating a Theme

Theme.setActive("my-dark-theme");

Getting the Active Theme

const current = Theme.getActive();
console.log(current.id); // "my-dark-theme"
console.log(current.colors.accentColor); // "#e94560"

Listing All Themes

const themes = Theme.getAll();
themes.forEach(t => console.log(t.id, t.name));

Injecting Custom CSS

For advanced customization beyond the config, you can inject raw CSS:

const cssId = Theme.injectCSS(`
    .my-custom-widget {
        background: rgba(0, 0, 0, 0.8);
        border-radius: 12px;
        backdrop-filter: blur(10px);
    }
`);

// Later, remove the injected CSS
Theme.removeCSS(cssId);

ThemeConfig Reference

Section	Property	Type	Description
colors	taskbarBg	string	Taskbar background color/gradient
	controlBarBg	string	Top control bar background
	windowTitlebar	string	Window titlebar background
	windowBg	string	Window content background
	accentColor	string	Accent color for highlights
	desktopIconText	string	Desktop icon label color
	startMenuBg	string	Start menu background
	startMenuText	string	Start menu text color
	windowControlsColor	string	Window control buttons color
	terminalBg	string	Terminal background color
taskbar	position	"bottom" | "floating"	Taskbar layout mode
	height	string	Taskbar height (CSS value)
	width	"full" | "auto"	Full width or auto (for floating)
	borderRadius	string	Border radius
	blur	boolean	Enable backdrop blur
	transparency	number	Background opacity (0-1)
	showSearch	boolean	Show search bar in taskbar
	showAppNames	boolean	Show app names in taskbar
	gap	string	Gap between taskbar items
	padding	string	Taskbar padding
controlBar	height	string	Top bar height
	blur	boolean	Enable backdrop blur
	transparency	number	Background opacity
	hasStartMenu	boolean	Render start menu in control bar
startMenu	host	"taskbar" | "controlbar"	Where start menu is rendered
	borderRadius	string	Start menu border radius
	offset	number	Position offset in pixels
windows	titlebarHeight	string	Window titlebar height
	controlsPosition	"left" | "right"	Window buttons position
	controlsStyle	"default" | "traffic-light" | "flat"	Window button style
	showControlsOnHover	boolean	Show controls only on hover
	borderRadius	string	Window corner radius
	blur	boolean	Enable window blur effect
desktop	iconSize	string	Desktop icon size
	iconGap	string	Gap between desktop icons

Notes

• Theme registration should be done in your Bootstrap.OnModPackageLoaded() method.
• The player can always switch back to built-in themes from Settings.
• Mod themes appear alongside built-in themes in the Settings panel.
• Use injectCSS sparingly - prefer the config properties for most customizations.