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.

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

Add dark themes to the backend and a theme switching support #4999

Merged
merged 3 commits into from
Nov 15, 2023

Conversation

MassimilianoLattanzio
Copy link
Contributor

@MassimilianoLattanzio MassimilianoLattanzio commented Mar 29, 2023

Summary

Incorporates #5113

Compation SolidusAdmin PR #5511

This PR aims to add a dark theme switcher for the Solidus backend. The theme can be switched using a new select added in the left sidebar, and the choice is saved in local-storage.

System in dark mode System in light mode
image image
image image
image image
System in dark mode (new navbar) System in light mode (new navbar)
image image
image image
image image

This is just an easy way to invert theme colors as suggested by @elia following this StackOverflow example.

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.

@MassimilianoLattanzio MassimilianoLattanzio requested a review from a team as a code owner March 29, 2023 13:57
@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 Mar 29, 2023
@MassimilianoLattanzio
Copy link
Contributor Author

Some additional notes:

  • There is an issue with the images using the dark theme that look darker than the relative ones in the default theme.
  • The user preference can be saved in the DB instead of the cookie. Otherwise, whenever the user logs out will have to switch the theme again.
  • Probably, the best way to add a new theme is to create a new bootstrap _variables_overrides file, but it will take a lot of time. We can use this way if the solution in this PR needs to be better.

@codecov
Copy link

codecov bot commented Apr 3, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (9ed9a07) 91.57% compared to head (36c1acb) 88.60%.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4999      +/-   ##
==========================================
- Coverage   91.57%   88.60%   -2.98%     
==========================================
  Files         188      630     +442     
  Lines        4415    15081   +10666     
==========================================
+ Hits         4043    13362    +9319     
- Misses        372     1719    +1347     

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

@elia

This comment was marked as outdated.

@elia elia force-pushed the backend-dark-mode branch 2 times, most recently from de5b55c to cff67ff Compare April 4, 2023 12:29
elia
elia previously approved these changes Apr 4, 2023
@kennyadsl

This comment was marked as resolved.

@MassimilianoLattanzio

This comment was marked as resolved.

@MassimilianoLattanzio

This comment was marked as resolved.

@kennyadsl

This comment was marked as resolved.

@MassimilianoLattanzio

This comment was marked as resolved.

@kennyadsl
Copy link
Member

@MassimilianoLattanzio thanks for you contributions here, but I think we are not going to merge this right now. We are in the process of starting a complete redesign of the admin, and adding Dark Mode now would influence design processes and decisions that we don't want to anticipate now.

We will keep this on hold and use as a reference when it will be a good time to add this to the new admin. I hope this makes sense fo you as well, and in the meantime thanks again for your great work!

@MassimilianoLattanzio
Copy link
Contributor Author

@MassimilianoLattanzio thanks for you contributions here, but I think we are not going to merge this right now. We are in the process of starting a complete redesign of the admin, and adding Dark Mode now would influence design processes and decisions that we don't want to anticipate now.

We will keep this on hold and use as a reference when it will be a good time to add this to the new admin. I hope this makes sense fo you as well, and in the meantime thanks again for your great work!

Sure! No problem at all! Makes sense to me.

Hope this can help other people and also for future updates of the admin UI.

@github-actions github-actions bot removed the changelog:solidus_core Changes to the solidus_core gem label May 30, 2023
@elia elia dismissed their stale review May 31, 2023 11:06

I self assigned this review, so not considering my approval anymore

@elia elia force-pushed the backend-dark-mode branch 3 times, most recently from 52ab498 to 709436f Compare May 31, 2023 14:03
@elia elia force-pushed the backend-dark-mode branch 2 times, most recently from 92bfed4 to 4591402 Compare June 1, 2023 15:12
Copy link
Contributor

@waiting-for-dev waiting-for-dev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🌃

@elia elia changed the title Add dark mode to the backend UI [backend] Add dark mode to the backend UI Jun 12, 2023
@elia
Copy link
Member

elia commented Jun 13, 2023

In order to avoid having to support changes after the release this is on hold until the new admin UI and dark-mode implementation will be defined (e.g. cookie vs session vs db).

@waiting-for-dev waiting-for-dev added the hold On hold for a reason different from a breaking change label Jun 14, 2023
@elia elia force-pushed the backend-dark-mode branch 2 times, most recently from 0aa9e82 to 5925d58 Compare June 16, 2023 11:55
@elia elia removed the hold On hold for a reason different from a breaking change label Nov 14, 2023
@elia elia mentioned this pull request Nov 14, 2023
3 tasks
@elia elia requested review from rainerdema and removed request for kennyadsl and rainerdema November 14, 2023 10:16
- 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.

Co-Authored-By: piyushswain <[email protected]>
Co-Authored-By: Elia Schito <[email protected]>
Co-Authored-By: Massimiliano Lattanzio <[email protected]>
@elia elia merged commit 193ac59 into solidusio:main Nov 15, 2023
9 of 10 checks passed
@MassimilianoLattanzio MassimilianoLattanzio deleted the backend-dark-mode branch November 15, 2023 10:59
@elia elia changed the title [backend] Add dark mode to the backend UI Add dark mode to the backend UI Dec 21, 2023
@elia elia changed the title Add dark mode to the backend UI Add dark themes to the backend and a theme switching support Dec 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
changelog:solidus_backend Changes to the solidus_backend gem changelog:solidus_core Changes to the solidus_core gem
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants