feat(web-ui): UI consistency / layout uplifts by Noklef · Pull Request #5225 · LizardByte/Sunshine

Noklef · 2026-05-31T02:00:09Z

Description

Originally this was just a branch to make styling work, but expanded out a bit 😅

General

Updated styling across the whole UI to use theme styling instead of bootstrap defaults
Moved sunshine.css out of public/assets/css to reliably override the bootstrap defaults for theming correctly

Themes

Created new themes drop-down selector, splitting out dark / light themes into 2 columns
Added new themes: Dracula, Alucard, Catppuccin Mocha / Latte, Ember Light, Rose Pine / Dawn
Updated Nord / Ember theme styling to conform to their online style guide
Added a Random theme button
Updated themes to use linear gradients across the navbar backgrounds for consistency
Added -color-on-XXXX to allow for changing text colour for buttons (contrast fixing)

Page updates

Apps: Added a background to the toolbar for the apps page
Featured Apps: Added the toolbar to the All / Clients / Tools buttons
Logout: Themed the logout page to match the the selected theme
Password: Added a description for the password page

Configuration Page

Redesigned the configuration page to convert the settings tabs from horizontally wrapping, to a vertical sidebar
Moved Save / apply into this vertical sidebar as well
Added a page description under the title (for consistency across the pages)

Screenshot

Themes

Dracula / Alucard themes - TwinLens
Catppuccin Mocha / Latte themes - TwinLens
Ember / Ember Light themes - TwinLens
Rose Pine / Rose Pine Dawn themes - TwinLens

Apps page

Featured Apps page

Logout page

Configuration page

Issues Fixed or Closed

Roadmap Issues

Type of Change

Checklist

Code follows the style guidelines of this project
Code has been self-reviewed
Code has been commented, particularly in hard-to-understand areas
Code docstring/documentation-blocks for new or existing methods/components have been added or updated
Unit tests have been added or updated for any new or modified functionality

AI Usage

None: No AI tools were used in creating this PR
Light: AI provided minor assistance (formatting, simple suggestions)
Moderate: AI helped with code generation or debugging specific parts
Heavy: AI generated most or all of the code changes

Noklef · 2026-05-31T02:45:25Z

Don't think the security hotspot SonarQube issue is valid tbh, it's literally just flagging Math.random().
Makes sense if it's used for anything sensitive, but this is just for picking a random theme...

ReenigneArcher

I haven't done a full review yet, but wanted to address your comment.

codecov · 2026-06-02T12:45:23Z

Bundle Report

Changes will increase total bundle size by 54.99kB (2.31%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
sunshine-esm	852.53kB	54.99kB (6.9%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: sunshine-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`assets/createLucideIcon-*.js`	531 bytes	357.83kB	0.15%
`assets/createLucideIcon-*.css`	48.47kB	279.62kB	20.97% ⚠️
`assets/config-*.js`	198 bytes	69.68kB	0.28%
`assets/index-*.js`	28 bytes	45.94kB	0.06%
`assets/featured-*.js`	28 bytes	29.68kB	0.09%
`assets/Navbar-*.js`	3.57kB	23.18kB	18.19% ⚠️
`assets/apps-*.js`	28 bytes	13.42kB	0.21%
`assets/troubleshooting-*.js`	28 bytes	9.07kB	0.31%
*`assets/theme-.js`** (New)	2.01kB	2.01kB	100.0% 🚀
`assets/pin-*.js`	28 bytes	1.73kB	1.64%
`assets/password-*.js`	28 bytes	780 bytes	3.72%
`assets/logout-*.js`	50 bytes	490 bytes	11.36% ⚠️

Files in assets/createLucideIcon-*.js:

./src_assets/common/assets/web/public/assets/locale/en.json → Total Size: 40.7kB
./src_assets/common/assets/web/sunshine.css → Total Size: 0 bytes
./src_assets/common/assets/web/init.js → Total Size: 209 bytes

Files in assets/config-*.js:

./src_assets/common/assets/web/config.html → Total Size: 0 bytes

Files in assets/featured-*.js:

./src_assets/common/assets/web/featured.html → Total Size: 0 bytes

Files in assets/Navbar-*.js:

./src_assets/common/assets/web/ThemeToggle.vue → Total Size: 11.34kB

Files in assets/apps-*.js:

./src_assets/common/assets/web/apps.html → Total Size: 0 bytes

Files in assets/theme-*.js:

./src_assets/common/assets/web/theme.js → Total Size: 4.17kB

Files in assets/password-*.js:

./src_assets/common/assets/web/password.html → Total Size: 0 bytes

Files in assets/logout-*.js:

./src_assets/common/assets/web/logout.html → Total Size: 0 bytes

codecov · 2026-06-02T18:46:14Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 17.82%. Comparing base (ea88d71) to head (7e6fce7).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5225      +/-   ##
==========================================
- Coverage   17.82%   17.82%   -0.01%     
==========================================
  Files         111      111              
  Lines       24185    24185              
  Branches    10700    10700              
==========================================
- Hits         4312     4310       -2     
+ Misses      17561    17403     -158     
- Partials     2312     2472     +160

Flag	Coverage Δ
Archlinux	`11.21% <ø> (ø)`
FreeBSD-aarch64	`?`
FreeBSD-amd64	`13.33% <ø> (-0.02%)`	⬇️
Homebrew-ubuntu-24.04	`13.24% <ø> (ø)`
Linux-AppImage	`12.14% <ø> (ø)`
Windows-AMD64	`14.85% <ø> (ø)`
Windows-ARM64	`13.19% <ø> (-0.01%)`	⬇️
macOS-arm64	`18.86% <ø> (ø)`
macOS-x86_64	`18.34% <ø> (+0.02%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.
see 62 files with indirect coverage changes

Continue to review full report in Codecov by Harness.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ea88d71...7e6fce7. Read the comment docs.

… / loading - Moved `sunshine.css` from `src_assets/common/assets/web/public/assets/css/sunshine.cs` to `src_assets/common/assets/web/sunshine.css` - MOved link refeences for styles from `template_header` to `init.js`

- Fixed `.btn-info` / `.btn-outline-primary` to use theme styling - Fixed `.btn-primary` being blue when clicking in (now themed)

- Updated the hover for dropdown items to actually style properly - Updated `ThemeToggle.vue` to implement it as a 2-column wide dropdown (left dark, right light) - Added translation for `theme_group_light` and `theme_group_dark` - Dropdown arrow rotates now + button is highlighted when open

…input group text colouring

- Allowing for overrides when themes are not contrasting enough between bg and text

…lours instead of `surface`

…ppuccin Mocha` (dark)

…oper palette from `ember` - Moved some of the theme buttons to be in-line with eachother

- Apparently `color-mix` is widely available to use now, so used this instead of setting keyframes

- Felt odd not having any text on this page like the others...

…tead of headers - Created column-based layout, including a split out for General / Encoder tabs - Shortened in-line search to display count

- Prefer `.dataset` over `getAttribute(…)` - `ENCODER_TAB_IDS` should be a `Set`, and use `ENCODER_TAB_IDS.has()` to check existence or non-existence.

Co-authored-by: David Lane <42013603+ReenigneArcher@users.noreply.github.com>

sonarqubecloud · 2026-06-12T01:45:04Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Noklef marked this pull request as ready for review May 31, 2026 02:41

ReenigneArcher reviewed May 31, 2026

View reviewed changes

Comment thread src_assets/common/assets/web/theme.js Outdated

Noklef requested a review from ReenigneArcher June 8, 2026 01:16

Noklef and others added 24 commits June 11, 2026 21:40

fix(web-ui): Updated Nord theme stylig with proper theme HEX codes

2ebdc22

feat(web-ui): Added Dracula / Alucard themes

380c6f9

fix(web-ui): Updated button styling

f442a60

- Fixed `.btn-info` / `.btn-outline-primary` to use theme styling - Fixed `.btn-primary` being blue when clicking in (now themed)

fix(web-ui): Bootstrap override for secondary outline button + fixed …

3776c60

…input group text colouring

fix(web-ui): Themed the logout page

d261758

fix(web-ui): Added color-on-XXX css variables to set text colour

d7ca55c

- Allowing for overrides when themes are not contrasting enough between bg and text

fix(web-ui): updated the background of input group texts to use bg co…

8483595

…lours instead of `surface`

fix(web-ui): Fixed missing color-on-warning for dracula theme

835075d

feat(web-ui): added 2 new themes, Catppuccin Latte (light) and `Cat…

69450ef

…ppuccin Mocha` (dark)

feat(web-ui): Added Rose themes and updated Ember theme to use pr…

5e181e2

…oper palette from `ember` - Moved some of the theme buttons to be in-line with eachother

fix(web-ui): Added linear gradient for Dracula / Alucard

36ead5e

fix(web-ui): Add navbar gradients to new themes + default

7eff3d1

fix(web-ui): replaced pulse animation with colour-mix

0377c93

- Apparently `color-mix` is widely available to use now, so used this instead of setting keyframes

feat(web-ui): Added a Random button to select a random theme

bd8ed29

fix(web-ui): Added badge theme overriding

921ba32

fix(web-ui): Created toolbar styling for apps / featured pages

8a494cb

feat(web-ui): Added description to configuration (WIP)

1ad5aa7

- Felt odd not having any text on this page like the others...

feat(web-ui): Re-styled the settings tabs to be a vertical column ins…

8af48dd

…tead of headers - Created column-based layout, including a split out for General / Encoder tabs - Shortened in-line search to display count

fix(web-ui): Fixed sonarqube issues

732499e

- Prefer `.dataset` over `getAttribute(…)` - `ENCODER_TAB_IDS` should be a `Set`, and use `ENCODER_TAB_IDS.has()` to check existence or non-existence.

fix(web-ui): Added description to password page

f647001

fix(web-ui): added color-on-xxx for latte and rose pine dawn

f978708

fix(web-ui): Added NONSONAR comment to unflag SonarQube

04bb742

Co-authored-by: David Lane <42013603+ReenigneArcher@users.noreply.github.com>

fix(web-ui): NON -> NO

7e6fce7

ReenigneArcher force-pushed the ui-style-consistency branch from 1d129f3 to 7e6fce7 Compare June 12, 2026 01:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(web-ui): UI consistency / layout uplifts#5225

feat(web-ui): UI consistency / layout uplifts#5225
Noklef wants to merge 25 commits into
LizardByte:masterfrom
Noklef:ui-style-consistency

Noklef commented May 31, 2026 •

edited

Loading

Uh oh!

Noklef commented May 31, 2026 •

edited

Loading

Uh oh!

ReenigneArcher left a comment

Uh oh!

Uh oh!

codecov Bot commented Jun 2, 2026 •

edited

Loading

Assets Changed:

Uh oh!

codecov Bot commented Jun 2, 2026 •

edited

Loading

Uh oh!

sonarqubecloud Bot commented Jun 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Noklef commented May 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

General

Themes

Page updates

Configuration Page

Screenshot

Themes

Apps page

Featured Apps page

Logout page

Configuration page

Issues Fixed or Closed

Roadmap Issues

Type of Change

Checklist

AI Usage

Uh oh!

Noklef commented May 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ReenigneArcher left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

codecov Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

sonarqubecloud Bot commented Jun 12, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Noklef commented May 31, 2026 •

edited

Loading

Noklef commented May 31, 2026 •

edited

Loading

codecov Bot commented Jun 2, 2026 •

edited

Loading

codecov Bot commented Jun 2, 2026 •

edited

Loading