Version 1.4.0
The SPM Theme and Appearance System gives visitors direct control over how the platform looks, with persistent Light and Dark themes plus an Auto mode that follows the operating system as it changes.
Release Highlights
Three Appearance Modes
Visitors can choose Light, Dark, or Auto without leaving the page or opening browser settings.
Live System Synchronization
Auto mode follows the operating-system appearance and responds when that preference changes.
Appearance Modes
Light Theme
The Light option presents SPM content against a brighter surface while retaining the platform's purple identity, card hierarchy, controls, and readable contrast.
Dark Theme
The Dark option uses SPM's deep background treatment and brighter foreground colors for visitors who prefer a lower-light presentation.
Automatic Theme
Auto reads the visitor's operating-system color-scheme preference and applies the corresponding SPM theme. If the system switches between Light and Dark while the page is open, SPM updates with it.
Consistent Theme Behavior
Persistent Preference
A visitor's selected mode is stored in the browser so the same choice can be restored on later pages and future visits without requiring an account.
Theme Applied Before Rendering
A small initialization script runs in the document head before the page is displayed. It resolves the stored or system preference and sets Bootstrap's data-bs-theme value early, preventing a distracting light-to-dark flash during loading.
Legacy Preference Compatibility
The initializer recognizes the earlier os preference value and maps it to the finalized auto behavior, preserving continuity for visitors who used the earlier setting.
Accessible and Discoverable Controls
Clear Mode Names and Active State
Light, Dark, and Auto are presented as recognizable choices. The current selection is visibly identified and communicated through accessible labels rather than relying on color alone.
Mode-Aware Theme Icon
The appearance control uses an SPM purple icon in Light mode and a gold icon in Dark mode, keeping it visible against each background while reinforcing the selected environment.
Keyboard-Compatible Interaction
The appearance choices remain part of standard interactive controls, supporting keyboard access alongside mouse and touch input.
Streamlined CSS Foundation
145 Redundant Declarations Removed
The SPM stylesheet was audited against Bootstrap 5.3. Redundant framework declarations were removed so Bootstrap can provide its defaults while SPM maintains a smaller, clearer override layer.
Intentional Customization Preserved
The finalized stylesheet contains 414 lines. Twenty-five customized Bootstrap values remain intact, Light and Dark blocks contain no declarations that merely repeat Bootstrap defaults, obsolete --bs-triary-bg usage was removed, and the stylesheet's braces were verified as balanced.
Completion and Testing
The theme-switcher icon and appearance behavior were tested in Light mode, Dark mode, and Auto mode while changing the operating-system theme. The appearance remained consistent, the active mode followed the expected preference, and the completed implementation was approved.
This release established the standalone appearance system later carried into the broader SPM Control Center. The Control Center itself is documented as a separate platform release.
Known Limitations
Preferences are browser-specific
The selected mode is stored in the current browser. It does not automatically follow the visitor to another browser or device and may be removed when site storage is cleared.
Auto depends on the operating system and browser
Auto follows the color-scheme preference reported by the browser. If a device, browser, or embedded environment does not report that preference accurately, SPM cannot determine the intended system theme.
Components must participate in the theme system
SPM components using Bootstrap theme variables and approved SPM tokens can respond consistently. A component with hard-coded foreground or background colors may require its own theme correction.
Third-party widgets may retain their own appearance
External services control their internal styling and may not automatically match the selected SPM mode. Their appearance must be evaluated individually when they are embedded.