Theme colors

Every plugin module runs inside the Mixlar desktop app with a small set of color constants already sitting in its global namespace — ACCENT, CARD2, WHITE, and so on. That’s why the shipped example plugins can reference ACCENT or GREEN in a draw call without ever writing an import. This page lists the exact values and shows how to get proper autocomplete and type-checking for them while you write.

Why you’d still import them

The injection happens at runtime, which means your editor and any static type checker have no idea ACCENT exists until the app actually loads your plugin. If you write code without an import, it’ll run fine on-device but your IDE will flag every color name as undefined.

The SDK ships the same values as a real module, mixlar.colors, so you can import what you need and get full IDE support:

from mixlar.colors import CARD2, WHITE, SEP

def draw(surface, w, h):
    surface.fill(CARD2)
    surface.text((8, 8), "Hello", color=WHITE)

The palette

These are the exact hex values as of this SDK release. ACCENT is the Mixlar brand orange used across mixlar.net.

Name	Value	Swatch	Typical use
`ACCENT`	`#ff4d14`	🟧	Mixlar brand orange — primary highlight, active states
`GREEN`	`#30d158`	🟢	Success / positive status
`ORANGE`	`#ff9f0a`	🟠	Warning / caution status
`RED`	`#ff453a`	🔴	Error / destructive status
`PURPLE`	`#bf5af2`	🟣	Secondary accent
`WHITE`	`#ffffff`	⬜	Primary text on dark surfaces
`GRAY`	`#98989e`	⬛	Secondary / dimmed text
`SEP`	`#38383a`	▪️	Hairline separators and dividers
`CARD`	`#2c2c2e`	▪️	Base card / panel background
`CARD2`	`#3a3a3c`	▪️	Elevated card / nested surface background

FONT is also injected — it’s not a color but the UI font family the app uses, resolved per platform: Segoe UI on Windows, SF Pro Display on macOS, and Ubuntu everywhere else.

Every injected name

mixlar.colors.NAMES lists every constant the app guarantees to inject into your plugin module’s namespace, in this exact order:

NAMES = (
    "ACCENT", "GREEN", "ORANGE", "PURPLE", "WHITE", "GRAY",
    "SEP", "CARD", "CARD2", "RED", "FONT",
)

If you’re writing a plugin and rely on these being present without importing them (matching how the bundled examples are written), stick to names in this list — anything else won’t be there at runtime.

The palette on this page is for plugins — the Python modules the desktop app loads. Widgets, the on-device elements rendered on the ESP32 hardware, use their own theme system (themeBg(), themePanelBg(), themeText(), and friends) with Dark, Light, and Pink modes. That system isn’t part of mixlar.colors. See Widget elements and the widget spec if you’re building a widget rather than a plugin.

Plugin API — the full plugin module contract, including where draw() fits in
Packages — how plugin files are laid out and packaged
Bundled libraries — other modules preloaded for plugin authors

Theme colors

Why you’d still import them

The palette

Every injected name

Widget-side colors are separate

Related