Themes — Interplanetary UI

Architecture

Interplanetary UI uses two independent axes. Mix any combination.

Axis	Options	Controls
Theme	planetary, industrial, military, royal	Colors (primary, secondary, accent) for light/dark
Font	terminal, industrial	Font families + size scale

Available Themes

Name	Accent	Aesthetic
Planetary	Amber	Corporate sci-fi, warm terminals
Industrial	Blue	Corporate sterile, clinical
Military	Olive	Tactical operations, rugged
Royal	Gold	Dune imperial, luxury

Light/Dark Mode

Each theme includes light and dark palettes. Control via JavaScript or data attribute.

// JavaScript API
themeManager.set('dark');
themeManager.set('light');
themeManager.set('system');
themeManager.toggle();
themeManager.getResolved(); // returns 'light' or 'dark'

// Or set via HTML attribute
<html data-theme="dark">

Integration

@import "tailwindcss";

/* Core */
@import "./interplanetary-ui/css/tokens.css";
@import "./interplanetary-ui/css/base.css";
@import "./interplanetary-ui/css/components/index.css";

/* Theme (pick one) */
@import "./interplanetary-ui/css/themes/planetary.css";

/* Font (pick one) */
@import "./interplanetary-ui/css/fonts/terminal.css";

/* Containers */
@import "./interplanetary-ui/css/windows/window.css";
@import "./interplanetary-ui/css/windows/panel.css";
@import "./interplanetary-ui/css/windows/frame.css";
@import "./interplanetary-ui/css/windows/section.css";
@import "./interplanetary-ui/css/windows/modal.css";
@import "./interplanetary-ui/css/windows/utilities.css";

Creating a Theme

:root {
  /* Dark mode colors */
  --theme-primary-dark: #0a0a0a;
  --theme-secondary-dark: #cccccc;
  
  /* Light mode colors */
  --theme-primary-light: #fafafa;
  --theme-secondary-light: #1a1a1a;
  
  /* Accent (same for both modes) */
  --theme-accent: #ff6600;
  
  /* Status colors */
  --color-success: #00c853;
  --color-error: #ff1744;
  --color-warning: #ffd600;
  --color-info: #00b8d4;
}