Sunshine icon indicating copy to clipboard operation
Sunshine copied to clipboard

feat(ui): Dark Mode

Open Hazer opened this issue 9 months ago • 9 comments

Description

Includes dark mode, auto selects and allows for manually overriding with user preference

Screenshot

Screenshot 2024-05-02 at 09 30 50 Screenshot 2024-05-02 at 09 31 48 Screenshot 2024-05-02 at 09 32 04 Screenshot 2024-05-02 at 09 32 15 Screenshot 2024-05-02 at 09 31 23 Screenshot 2024-05-02 at 09 31 33

Depends on:

  • Merging #2491

Type of Change

  • [x] New feature (non-breaking change which adds functionality)
  • [ ] Dependency update (updates to dependencies)
  • [ ] Documentation update (changes to documentation)
  • [ ] Repository update (changes to repository files, e.g. .github/...)

Checklist

  • [x] My code follows the style guidelines of this project
  • [x] I have performed a self-review of my own code
  • [ ] I have commented my code, particularly in hard-to-understand areas
  • [ ] I have added or updated the in code docstring/documentation-blocks for new or existing methods/components

Branch Updates

LizardByte requires that branches be up-to-date before merging. This means that after any PR is merged, this branch must be updated before it can be merged. You must also Allow edits from maintainers.

  • [x] I want maintainers to keep my branch updated

Hazer avatar May 02 '24 12:05 Hazer

I didn't ask before, but any considerations regarding colors? Specially with the NavBar colors?

Hazer avatar May 07 '24 06:05 Hazer

I didn't ask before, but any considerations regarding colors? Specially with the NavBar colors?

The white(ish) on yellow(ish) is probably going to be difficult to read. I think I'd prefer the same navbar colors for both, e.g. the original. But everywhere else seems to look okay from your screenshots.

Also, I apologize for the delays on getting all these reviewed and in, I'm a bit overwhelmed with this project at the moment, having 50 open PRs. Are you on our discord? If so it would probably easier to communicate about any of these and get them across the goal line.

ReenigneArcher avatar May 07 '24 13:05 ReenigneArcher

The white(ish) on yellow(ish) is probably going to be difficult to read. I think I'd prefer the same navbar colors for both, e.g. the original. But everywhere else seems to look okay from your screenshots.

Fair, will do.

Also, I apologize for the delays on getting all these reviewed and in, I'm a bit overwhelmed with this project at the moment, having 50 open PRs. Are you on our discord? If so it would probably easier to communicate about any of these and get them across the goal line.

I can totally understand, no problem. I wasn't, but I just got there, I've sent you a DM. Thanks!

Hazer avatar May 07 '24 14:05 Hazer

Draft until #2491 is merged.

Hazer avatar May 07 '24 15:05 Hazer

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 6.96%. Comparing base (2b18e4c) to head (4a2a791). Report is 159 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff            @@
##           master   #2493      +/-   ##
=========================================
- Coverage    7.03%   6.96%   -0.08%     
=========================================
  Files          87      87              
  Lines       17697   17691       -6     
  Branches     8406    8406              
=========================================
- Hits         1245    1232      -13     
- Misses      13716   13754      +38     
+ Partials     2736    2705      -31     
Flag Coverage Δ
Linux 5.35% <ø> (ø)
Windows 2.56% <ø> (ø)
macOS-12 ?
macOS-13 ?
macOS-14 8.27% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

see 22 files with indirect coverage changes

codecov[bot] avatar May 13 '24 15:05 codecov[bot]

Screenshot 2024-05-13 at 15 40 31 Screenshot 2024-05-13 at 15 40 43

Dark mode navbar colors updated

Hazer avatar May 13 '24 18:05 Hazer

I don't know why, but the toggle drop down doesn't work on the "Applications" tab.

ReenigneArcher avatar May 14 '24 23:05 ReenigneArcher

I don't know why, but the toggle drop down doesn't work on the "Applications" tab.

That's odd. I have really no idea why too, there's no obvious reason for it, I'll need to debug later

Hazer avatar May 15 '24 13:05 Hazer

I don't know why, but the toggle drop down doesn't work on the "Applications" tab.

That's odd. I have really no idea why too, there's no obvious reason for it, I'll need to debug later

@TheElixZammuto any idea what could cause this?

The "button" works on every other navbar page, and there are no errors in the browser console.

ReenigneArcher avatar May 15 '24 15:05 ReenigneArcher

The "button" works on every other navbar page, and there are no errors in the browser console.

Fixed. It had to do with bootstrap module bundling being implicitly duplicated. It'll probably be a good idea to revamp the vite configs in the future, for now I just removed the duplication.

ref: https://github.com/aurelia/skeleton-navigation/issues/894 https://discourse.aurelia.io/t/bootstrap-import-bootstrap-breaks-dropdown-menu-in-navbar/641/9

Hazer avatar May 22 '24 17:05 Hazer