feat: add webgui theme switcher component #1304
Conversation
- Introduced a new `UnraidThemeSwitcher` component to allow users to change themes dynamically. - Updated `nuxt.config.ts` to register the new component. - Created `ThemeSwitcher.ce.vue` with functionality to handle theme changes and update the UI accordingly.
WalkthroughThis pull request introduces a new Vue component, ThemeSwitcher, to facilitate dynamic theme switching in the application. The component employs TypeScript, the Vue Composition API, and Pinia for managing reactive states, including theme lists and a submission flag. The Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
web/components/ThemeSwitcher.ce.vue (1)
28-28: Consider making the theme list dynamicThe theme array is currently hard-coded with four themes. If themes are added or removed in the future, this component will need to be updated.
-const themes = ref<string[]>(['azure', 'black', 'gray', 'white']); +// Consider fetching from an API or configuration +const themes = ref<string[]>(['azure', 'black', 'gray', 'white']);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
web/components/ThemeSwitcher.ce.vue(1 hunks)web/nuxt.config.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Build Web App
- GitHub Check: Build API
- GitHub Check: Cloudflare Pages
🔇 Additional comments (5)
web/nuxt.config.ts (1)
141-144: Proper registration of new ThemeSwitcher componentThe custom element registration follows the existing pattern and naming conventions. This will make the theme switcher available as a custom element in the application.
web/components/ThemeSwitcher.ce.vue (4)
2-16: Clear integration instructions providedThe comment block provides clear instructions on how to integrate this component into the webGUI by modifying the PHP footer code. This is helpful for developers who need to implement the component.
31-61: Theme change handler implementation looks goodThe handler properly checks if the theme has changed, manages submission state, and uses the WebguiUpdate service to apply the change. The error handling is implemented correctly.
One minor consideration: The page reload after theme change might interrupt user work. Is this the only way to apply theme changes, or could a less disruptive approach be considered?
65-79: Component is correctly hidden in productionGood job conditional rendering the component based on development mode. This ensures it's only visible when needed for testing.
82-86: Style imports follow application conventionsThe component correctly imports the global UI styles and the main CSS file following the established pattern.
|
This plugin has been deployed to Cloudflare R2 and is available for testing. |
- Added computed property `computedThemes` to dynamically handle theme options based on props. - Updated template to use `computedThemes` instead of a static themes array. - Removed unnecessary ref for `devModeEnabled` to simplify the code.
|
Flaky test killed this. Just ignore and merge with it failing |
🤖 I have created a release *beep* *boop* --- ## [4.5.0](v4.4.1...v4.5.0) (2025-04-02) ### Features * add webgui theme switcher component ([#1304](#1304)) ([e2d00dc](e2d00dc)) * api plugin system & offline versioned dependency vendoring ([#1252](#1252)) ([9f492bf](9f492bf)) * **api:** add `unraid-api --delete` command ([#1289](#1289)) ([2f09445](2f09445)) * basic array controls ([#1291](#1291)) ([61fe696](61fe696)) * basic docker controls ([#1292](#1292)) ([12eddf8](12eddf8)) * copy to webgui repo script docs + wc build options ([#1285](#1285)) ([e54f189](e54f189)) ### Bug Fixes * additional url fixes ([4b2763c](4b2763c)) * **api:** redirect benign pnpm postinstall warning to log file ([#1290](#1290)) ([7fb7849](7fb7849)) * **deps:** update dependency chalk to v5 ([#1296](#1296)) ([6bed638](6bed638)) * **deps:** update dependency diff to v7 ([#1297](#1297)) ([3c6683c](3c6683c)) * disable all config watchers ([#1306](#1306)) ([5c1b435](5c1b435)) * extract callbacks to library ([#1280](#1280)) ([2266139](2266139)) * OEM plugin issues ([#1288](#1288)) ([d5a3d0d](d5a3d0d)) * replace files lost during pruning ([d0d2ff6](d0d2ff6)) --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
For now just used in Dev Mode to help assist in testing webgui CSS changes.
UnraidThemeSwitchercomponent to allow users to change themes dynamically.nuxt.config.tsto register the new component.ThemeSwitcher.ce.vuewith functionality to handle theme changes and update the UI accordingly.Summary by CodeRabbit