Premade Themes#

The Asset Store version of OneJS is the same package as the free one, plus a Premade folder under Assets/Singtaa/: three complete onejs-ui themes (Pixel, Kawaii, Sketch) and three sample apps, each packaged as a UI Cartridge. This page walks through using them in your own project.

A premade theme is pure data: one TypeScript file that registers a ThemeTokens object by name, plus sprites and a font in a Resources folder. There is no separate runtime and nothing to configure. Once registered, "pixel" works anywhere "dark" does. See all three in motion on the themes page, or follow the Theming tutorial for a guided walkthrough that ends with them.

For the fastest first look, open the demo scene that ships in the package: Assets/Singtaa/Premade/Demo/PremadeDemo.unity. It renders with zero setup (no Node.js required), Play mode gives you a live theme switcher across all six themes, and on a machine with Node.js the first Play scaffolds it into a full editable OneJS project.

Use a theme#

Starting from a working JSRunner project:

1. Select your JSRunner, open the Cartridges tab, click +, and assign the theme's cartridge asset, for example Assets/Singtaa/Premade/Themes/Kawaii/Kawaii.asset. Assigning it extracts the theme's source into your working directory at ~/@cartridges/@singtaa/kawaii/ right away (on OneJS 3.1.3 and older, press the E button or enter Play mode once).
2. Add one import to your entry file and apply the theme by name:

import { render } from "onejs-react"
import { ThemeProvider } from "onejs-ui"
import "onejs:themes" // registers every extracted cartridge theme

render(
    <ThemeProvider theme="kawaii">
        <App />
    </ThemeProvider>,
    __root,
)

That is the whole integration. At build time, import "onejs:themes" scans @cartridges/ for theme modules (*Theme.ts) and registers each one, so the same line keeps working as you add or remove theme cartridges, and lint autofixes cannot break it. It needs onejs-unity 0.2.19 or newer with themesPlugin() in esbuild.config.mjs; freshly scaffolded projects have both. Two notes for older projects:

• Older esbuild config: add themesPlugin() (from onejs-unity/esbuild) to the plugins array, next to tailwindPlugin().
• onejs-ui missing from package.json: run npm install onejs-ui in the working directory. Projects scaffolded before OneJS 3.1.2 lack it, and the Cartridges tab shows a warning when a cartridge needs it.

To register a single theme explicitly instead, the direct import still works: import "./@cartridges/@singtaa/kawaii/kawaiiTheme". It is side-effect only (an unused-import lint fix will strip it) and the path is relative to the importing file.

The three themes#

Assign as many as you like; import "onejs:themes" registers each one alongside the built-ins, so a theme switcher is just a list of names:

import { useTheme, Button } from "onejs-ui"
import "onejs:themes"

function ThemeMenu() {
    const { setTheme } = useTheme()
    return ["dark", "light", "pixel", "kawaii", "sketch"].map((name) => (
        <Button key={name} onClick={() => setTheme(name)}>{name}</Button>
    ))
}

Customizing#

Each module also exports its tokens (pixelTheme, kawaiiTheme, sketchTheme), so the recommended way to tweak a theme is to spread it into your own:

import { registerTheme } from "onejs-ui"
import { kawaiiTheme } from "./@cartridges/@singtaa/kawaii/kawaiiTheme"

registerTheme("mygame", {
    ...kawaiiTheme,
    primary: "#7c5cff",
    primaryHover: "#6a47f0",
})

Every token is listed in the theming reference. Editing the extracted kawaiiTheme.ts in place works too, but treat it as generated output: player builds re-extract every cartridge, overwriting the folder, so in-place edits do not survive a build. Keep your changes in your own files.

Updating#

During normal editor use, extraction never overwrites an existing folder, so updating the Asset Store package does not touch an already-extracted theme. The Cartridges tab shows Outdated next to a theme whose extracted copy no longer matches the asset's version (and a console warning points the same way on the next run). To pick up the new version, press D (delete the extracted files), then E (extract again).

Art, fonts, and licensing#

The sprites and fonts are not inside the cartridge: they live in Assets/Singtaa/Premade/Themes/{Theme}/Resources/ and load at runtime via resource(), which works in player builds on every platform. Two rules follow:

• Leave the Resources folders in place, names included. Moving or renaming Resources/Singtaa.KawaiiTheme/ (or the Premade folder above it) breaks nothing at compile time; the UI simply renders unskinned.
• Keep OFL.txt with any redistribution. The fonts (Fredoka, Pixelify Sans, Patrick Hand) are licensed under the SIL Open Font License; each theme ships the license file next to its art.

Sample cartridges#

The Premade folder also ships three sample apps as cartridges: GameHUD (event-driven HUD with 2D particles), Inventory (loot grid with rarity auras), and ShaderEffects (custom shaders on UI elements). Same flow: add the asset to the Cartridges tab, extract, and import. Samples export components rather than registering a theme:

import { render } from "onejs-react"
import { Inventory } from "./@cartridges/@singtaa/inventory/inventory"

render(<Inventory />, __root)

Each sample's README in the Premade folder lists its minimum OneJS and onejs-react versions.