Themes — Interplanetary UI

Architecture

Interplanetary UI uses two independent axes. Mix any combination.

Axis	Options	Controls
Theme	planetary, industrial, corporate, military, royal	Colors (bg, text, accent, status) for light/dark
Font	terminal, cyber, sterile	Font families + size scale

Available Themes

Name	Accent	Aesthetic
Planetary	Amber	Sci-Fi Terminal, warm terminals
Industrial	Red	Tokyo Megacorp, cyberpunk dark
Corporate	Blue	Basic, boring, professional
Military	Green	Army/Air Force, high contrast
Royal	Gold	High contrast imperial

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 {
  /* Backgrounds */
  --theme-bg-dark: #0a0a0a;
  --theme-bg-light: #fafafa;
  --theme-bg-off-dark: #1a1a1a;
  --theme-bg-off-light: #f0f0f0;
  
  /* Text */
  --theme-text-dark: #cccccc;
  --theme-text-light: #1a1a1a;
  --theme-text-off-dark: #888888;
  --theme-text-off-light: #666666;
  
  /* Accent */
  --theme-accent-dark: #ff6600;
  --theme-accent-light: #cc5200;
  
  /* Status colors */
  --color-success: #00c853;
  --color-error: #ff1744;
  --color-warning: #ffd600;
  --color-info: #00b8d4;
}