Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[admin] dark mode #5511

Merged
merged 9 commits into from
Nov 15, 2023
Merged

[admin] dark mode #5511

merged 9 commits into from
Nov 15, 2023

Conversation

elia
Copy link
Member

@elia elia commented Nov 14, 2023

Summary

This PR goes in pair with #4999

The information about which theme to use is stored separately for when the system is in dark mode or otherwise, and can be mixed in any way (e.g. using a dark theme with the system in light mode).

System in dark mode System in light mode
image image
image image
image image

Checklist

Check out our PR guidelines for more details.

The following are mandatory for all PRs:

The following are not always needed:

  • 📖 I have updated the README to account for my changes.
  • 📑 I have documented new code with YARD.
  • 🛣️ I have opened a PR to update the guides.
  • ✅ I have added automated tests to cover my changes.
  • 📸 I have attached screenshots to demo visual changes.

@elia elia self-assigned this Nov 14, 2023
@github-actions github-actions bot added changelog:solidus_backend Changes to the solidus_backend gem changelog:solidus_core Changes to the solidus_core gem labels Nov 14, 2023
@elia elia mentioned this pull request Nov 14, 2023
Merged
3 tasks
@codecov Codecov
Copy link

codecov bot commented Nov 14, 2023 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (193ac59) 88.59% compared to head (b94c635) 88.62%.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main    #5511      +/-   ##
==========================================
+ Coverage   88.59%   88.62%   +0.02%     
==========================================
  Files         630      631       +1     
  Lines       15078    15108      +30     
==========================================
+ Hits        13359    13389      +30     
  Misses       1719     1719

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@elia
Add missing closed parenthesis
dbae91f
@elia
Add a missing translation to the orders/show component
04c4cf3
@elia
Let clicks go through the ui/toast component container
9296111 
Otherwise the transparent element would have captured some of them.
@elia
Fallback to the default locale if the selected one is unsupported
b3ea5e9 
This can happen if the list of available locales changes and an old
value is stored in the session.
@elia
Add a stimulus controller for closing details when clicking outside
5a22b14
@elia
Extract a locales helper in the nav account component
0b6faea
@elia
Extract the SolidusAdmin locale change autoselect
fe6da39
@elia
Keep the account navigation menu open when changing the locale
74efa66
@elia
Add theme support to the SolidusAdmin UI with dark and dimmed variants
b94c635 
- Save the user preference alongside the system preference so that
  when the system switches the UI will follow along.
- Use the session to store preferences so that we start the page
  with the correct theme(s).
- Keep the current theme in the select tag up to date at page load
  and whenever the system changes.

Add dark and dimmed theme variants

dark:
  Full black background with no alteration on images.

dimmed:
  Dark gray background with dimmed images, easier on the eyes but
  less accurate colors.
@github-actions github-actions bot removed changelog:solidus_backend Changes to the solidus_backend gem changelog:solidus_core Changes to the solidus_core gem labels Nov 15, 2023
@elia elia marked this pull request as ready for review November 15, 2023 13:02
@elia elia requested a review from a team as a code owner November 15, 2023 13:02
@elia elia requested review from rainerdema and removed request for a team November 15, 2023 13:02
@elia elia merged commit 29d130a into main Nov 15, 2023
10 checks passed
@elia elia deleted the elia/admin/dark-mode branch November 15, 2023 15:52
@victorth
Copy link

Would it be an idea to increase the contrast? With everything being black it is still quite hard on the eyes.
Grey tone on the backdrop for points of interest. Like the cart widget or customer widget, and a different grey on the font.

@elia
Copy link
Member Author

elia commented Nov 17, 2023

@victorth yes, ideally we should take the time to refine the values in every TW variable and even have a separate build for each theme. For now the intent was to give a couple of options to avoid a blinding flash of white when the whole system is in dark mode.

I'd be happy to review and help merging refinements on the current themes or welcome additional ones if you want to give it a crack 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rainerdema rainerdema rainerdema approved these changes

Assignees

@elia elia

Labels
changelog:solidus_admin
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@elia @victorth @rainerdema