Skip to main content
The Style Manager provides complete visual customization of your CDE desktop environment with authentic Motif palettes and original backdrop patterns.

​
Opening Style Manager

Front Panel

Click the Style Manager icon (color palette) in the Front Panel

Keyboard

Press Ctrl+Alt+S from anywhere

Desktop Menu

Right-click desktop → Tools → Style Manager

​
Style Manager Modules

The Style Manager is organized into specialized modules (stylemanager.ts:21-44):
Choose from 76 authentic Motif CDE palettes sourced from historical CDE systems.
Palettes are loaded from cde_palettes.json containing authentic color combinations from the Common Desktop Environment.

​
Color Palettes

​
Understanding CDE Palettes

Each palette contains 8 carefully coordinated colors (theme.ts:40-47): 
// CDE ColorSet mapping:
// 0: Accent/Active (Titlebar)
// 1: Background (Window)  
// 2: Workspace Background
// 3: Secondary Accent
// 4-7: Additional UI variations
LateSummer (Default)
  • Classic CDE appearance
  • Warm neutral tones
  • Excellent readability
Alpine
  • Cool blue-gray palette
  • Professional appearance
  • Easy on eyes
Platinum
  • Classic gray theme
  • Traditional CDE look
  • Timeless design
Coalmine
  • Very dark palette
  • High contrast
  • Excellent for night use
Midnight
  • Dark blue theme
  • Reduced eye strain
  • Modern aesthetic
Charcoal
  • Medium-dark gray
  • Balanced contrast
  • Professional look
Broica
  • Warm brown tones
  • Earthy feel
  • Unique character
Camouflage
  • Earth tone palette
  • Natural colors
  • Subdued but distinctive
SantaFe
  • Southwestern colors
  • Warm terracotta
  • Bold choice

​
Applying a Palette

1

Open Color Module

Click “Color” in the Style Manager main window
2

Browse Palettes

Scroll through the list of 76 available palettes. Use arrow keys for quick navigation.
3

Preview

Click any palette to see an instant preview. Colors update immediately.
4

Apply

Click the “Apply” button to save your choice. The palette is persisted to settings.

​
How Palettes Work

The palette system generates a complete color scheme (theme.ts:26-84): 
const newTheme: Record<string, string> = {
  '--window-color': windowBg,
  '--topbar-color': windowBg,
  '--titlebar-color': titlebarBg,
  '--titlebar-text-color': getContrastColor(titlebarBg),
  '--text-color': getContrastColor(windowBg),
  '--border-light': windowShades.light,
  '--border-dark': windowShades.dark,
  // ... and many more CSS variables
};
Color shades are algorithmically generated using getCdeShades() from colorutils.ts to create authentic 3D beveled effects.

​
Backdrop Patterns

​
Understanding XPM Backdrops

Backdrops are authentic XPM (X PixMap) files that are:
  • Dynamic: Rendered with your current palette colors
  • Scalable: Resolution-independent patterns
  • Authentic: Original CDE backdrop files
  • Cached: Rendered once and cached for performance

​
Categories

Geometric Patterns

  • Afternoon
  • Ankh
  • BrickWall
  • Corduroy
  • Inlay

Textures

  • BrokenIce
  • Canvas
  • Carpet
  • Concave
  • SkyDark

Tech/Circuit

  • CircuitBoards
  • LatticeBig
  • LatticeMed
  • Lattice
  • WaterDrops

Artistic

  • Crochet
  • FlowersVenus
  • Leaves
  • OceanFloor
  • Paver

​
Backdrop Implementation

Backdrops are managed by the BackdropModule (backdrop.ts:24-189): 
private async applyXpm(body: HTMLElement): Promise<void> {
  const path = this.settings.value;

  // Check if this is the default backdrop and preload is available
  if (path === CONFIG.BACKDROP.DEFAULT_BACKDROP) {
    const { getPreloadedBackdrop } = await import('../../boot/backdrop-preloader');
    const preloadedDataUrl = await getPreloadedBackdrop();

    if (preloadedDataUrl) {
      body.style.backgroundImage = `url('${preloadedDataUrl}')`;
      body.style.backgroundRepeat = 'repeat';
      body.style.backgroundSize = 'auto';
      return;
    }
  }

  // Fallback to normal XPM loading
  const dataUrl = await loadXpmBackdropCached(path, true);
}
When you change color palettes, the XPM cache is automatically cleared and backdrops are re-rendered with the new colors. This may take a moment for complex patterns.

​
Applying a Backdrop

1

Open Backdrop Module

Click “Backdrop” in Style Manager
2

Browse Patterns

Scroll through 168 available backdrops with thumbnail previews
3

Preview

Click a backdrop to see it applied to your desktop immediately
4

Apply & Save

Click “Apply” to save your choice permanently
Complex backdrops may take 1-2 seconds to render. The system uses caching to ensure subsequent loads are instant.

​
Font Customization

​
Available Options

The Font module (font.ts) provides control over:
Choose from web-safe font stacks:
  • Sans-serif: Modern, clean (default)
  • Monospace: Code-friendly
  • Serif: Traditional, readable

​
Font Presets

Quick apply font combinations: 
Small & Compact    - 12px, tight spacing
Medium & Balanced  - 14px, normal spacing (default)
Large & Readable   - 16px, comfortable spacing  
XL & Accessible    - 18px, generous spacing

​
Mouse Settings

Adjust the maximum time between clicks for a double-click:
  • Fast: 200ms
  • Medium: 300ms (default)
  • Slow: 500ms
Implementation: mouse.ts
Control mouse sensitivity and speed:
  • None: 1.0x (no acceleration)
  • Low: 1.2x
  • Medium: 1.5x (default)
  • High: 2.0x
Applied to window dragging and icon positioning.
  • Left-handed: Swap primary/secondary buttons
  • Right-handed: Default configuration
Mouse acceleration affects window dragging (windowmanager.ts:258-278) and desktop icon positioning (desktop.ts:267-298).

​
Keyboard Settings

Configure keyboard behavior (keyboard.ts):

​
Key Repeat

  • Repeat Rate: How fast keys repeat when held (chars/sec)
  • Repeat Delay: Delay before repeat starts (milliseconds)
  • Enable/Disable: Toggle key repeat entirely

​
Beep Settings

  • Beep on Error: Audio feedback for errors
  • Beep Volume: Loudness level

​
Window Behavior

Click to Focus (Default)
  • Click window to activate
  • Explicit focus control
  • Familiar behavior
Point to Focus
  • Hover to activate
  • Automatic focus
  • Power user preference
Set via data-focus-mode attribute (windowmanager.ts:403-418)

​
Creating Your Perfect Setup

​
The 3-Step Method

1

Choose Your Base Palette

Select a palette that matches your:
  • Environment: Bright room → light theme, Dark room → dark theme
  • Time of day: Daytime → light, Evening → medium, Night → dark
  • Personal taste: Professional, colorful, minimal
2

Match a Backdrop

Find a backdrop that complements your palette:
  • Subtle patterns: Less distracting (Canvas, Afternoon)
  • Bold patterns: More character (CircuitBoards, BrokenIce)
  • Textures: Natural feel (Carpet, Corduroy)
3

Adjust Typography

Set font size based on:
  • Screen size: Larger screen → smaller font OK
  • Viewing distance: Far away → larger font
  • Eyesight: Adjust for comfort

Classic CDE

  • Palette: LateSummer
  • Backdrop: Afternoon
  • Font: Medium (14px)
  • Feel: Authentic 1990s CDE

Dark Mode Pro

  • Palette: Coalmine
  • Backdrop: BrokenIce
  • Font: Medium (14px)
  • Feel: Modern dark theme

Warm & Cozy

  • Palette: Broica
  • Backdrop: Carpet
  • Font: Medium (14px)
  • Feel: Comfortable earth tones

Tech Aesthetic

  • Palette: Charcoal
  • Backdrop: CircuitBoards
  • Font: Large (16px)
  • Feel: Cyberpunk vibes

Minimal & Clean

  • Palette: Alpine
  • Backdrop: Canvas
  • Font: Medium (14px)
  • Feel: Distraction-free

High Contrast

  • Palette: Midnight
  • Backdrop: SkyDark
  • Font: Large (16px)
  • Feel: Accessibility-focused

​
Sharing Themes

Use the “Share Theme” feature to generate a URL containing your complete customization!
Your theme can be shared via URL parameters including:
  • Selected palette ID
  • Backdrop choice
  • Font settings
  • Other Style Manager options
Implementation: Look for the “Share Theme” icon on desktop or in Style Manager.

​
Persistence & Storage

All Style Manager settings are automatically saved to browser localStorage and restored on next visit.
Settings storage (settingsmanager.ts): 
// Settings structure
theme: {
  colors: Record<string, string>,  // CSS variables
  paletteId: string,                // Current palette ID
  fonts: Record<string, string>,    // Font settings
  backdrop: {
    type: 'xpm',
    value: string                   // Backdrop file path
  }
}

​
Settings Lifecycle

1

Load

Settings loaded from localStorage on init (stylemanager.ts:63-92)
2

Apply

CSS variables set on document root, backdrop rendered
3

Save

Changes persisted immediately to localStorage (stylemanager.ts:357-368)
4

Restore

Settings reloaded on page refresh

​
Advanced Customization

​
Manual Color Editing

Advanced users can manually edit individual color values, but this breaks palette integrity. Custom colors are saved separately from palette ID.
The Color module exposes individual color pickers for all CSS variables:
  • Window backgrounds
  • Titlebar colors
  • Border shades
  • Text colors
  • Active/inactive states

​
Custom Backdrop Rendering

XPM backdrops are rendered with your palette colors using xpm-renderer.ts: 
// Backdrops use palette colors to create dynamic patterns
const colors = {
  background: getComputedStyle(document.documentElement)
    .getPropertyValue('--window-color'),
  foreground: getComputedStyle(document.documentElement)
    .getPropertyValue('--titlebar-color'),
  // ... palette colors mapped to XPM color definitions
}

​
Keyboard Shortcuts

ShortcutAction
Ctrl+Alt+SOpen Style Manager
↑/↓Navigate palettes/backdrops
EnterApply selected option
TabSwitch between sections
EscClose Style Manager

​
Troubleshooting

Symptoms: White or solid color background instead of patternSolutions:
  • Wait 2-3 seconds for complex patterns to render
  • Check browser console for XPM parsing errors
  • Try a different backdrop to isolate issue
  • Clear XPM cache (happens automatically on palette change)
Cause: XPM cache needs clearingSolution: The backdrop module automatically clears cache when palette changes (stylemanager.ts:158-162). Wait a moment for re-render.
Possible causes:
  • Browser in private/incognito mode (localStorage disabled)
  • Browser storage quota exceeded
  • Browser privacy settings blocking storage
Solutions:
  • Use normal browsing mode
  • Clear some browser storage
  • Check browser privacy settings
Cause: Font changes require full UI refreshSolution: Click “Apply” button and wait for changes to propagate through all UI elements.

​
Performance Considerations

The Style Manager is optimized for performance with several caching mechanisms.

​
XPM Rendering Cache

  • Rendered backdrops are cached in memory
  • Cache cleared only when palette changes
  • Reduces re-rendering overhead
  • Implementation: xpm-renderer.ts

​
Backdrop Preloading

Default backdrop is preloaded during boot sequence (backdrop-preloader.ts) to eliminate loading delay on first display.

​
CSS Variable Performance

Color changes use CSS custom properties for instant updates without DOM manipulation: 
document.documentElement.style.setProperty('--window-color', newColor);

​
Technical Architecture

export class StyleManager {
  public theme: ThemeModule;
  public font: FontModule;
  public mouse: MouseModule;
  public keyboard: KeyboardModule;
  public beep: BeepModule;
  public backdrop: BackdropModule;
  public windowBehavior: WindowModule;
  public screen: ScreenModule;
  public startup: StartupModule;

  constructor() {
    this.theme = new ThemeModule();
    this.font = new FontModule();
    this.mouse = new MouseModule();
    // ... initialize all modules
  }
}

Keyboard Shortcuts

Complete shortcuts reference

Tips & Tricks

Customization secrets and workflows

Getting Started

Initial setup guide

Workspaces

Organize with virtual desktops

Accessibility

High contrast and font sizing

PWA Installation

Install as standalone app