I'd like to introduce another feature added to Ascender: a theme selector that lets each user choose how the interface looks. The PR is up and will be available in the next release.
What Is the Theme Selector?
Until now, Ascender offered a simple dark/light mode toggle with no further customization. If you wanted a different look, or missed the original AWX styling, there was no way to get it.
This feature replaces that toggle with a full theme selector, available in two places: a palette icon dropdown in the header toolbar for quick switching, and a Preferred Theme field in your user profile for a choice that sticks across sessions.
Themes
Four themes ship out of the box:
- AWX (Classic): reproduces the original AWX/PatternFly 4 look
- Dark: a modern dark interface
- Default: the standard Ascender look
- Light: a modern light interface
You set it from either the header dropdown or your User profile: open Edit, pick a theme from the Preferred Theme field, and Save. The interface switches immediately, no reload needed.
What's Included
- A theme switcher dropdown in the header toolbar (palette icon) for quick switching during a session
- A "Preferred Theme" field in the user profile editor (only visible when editing your own profile),
- Three behaviors depending on user action in the profile editor:
- Save: persists the theme to localStorage, survives logout/login
- Cancel: reverts to the previously saved theme immediately
- Navigate away (no Save or Cancel): the previewed theme stays for the rest of the session, reverts on next login
- The header dropdown persists the selection immediately (no save step needed).
- The login page always renders in the Default theme, regardless of what was previously selected.
- The header dropdown and profile editor stay in sync via a custom themechange event.
- Legacy darkMode localStorage values from the old toggle are automatically migrated to the new system.
- Themes are listed alphabetically in both the dropdown and the profile editor.
Under the Hood
New files:
- awx/ui/src/themes/default.css, dark.css, light.css, awx.css: one file per theme
- awx/ui/src/themeRegistry.js: theme discovery, storage, and the applyTheme() API
- awx/ui/config/themeMetaLoader.js: a webpack loader that extracts the theme name from a CSS comment
Adding New Themes
To add a new theme: drop a .css file in awx/ui/src/themes/ with a /* Name: My Theme */ comment at the top and the appropriate html[data-theme="mytheme"] root selector. The registry picks it up automatically, no code changes needed.
