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

Improve app contrast in dark mode #2721

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

haticekaratay
Copy link
Contributor

@haticekaratay haticekaratay commented Feb 22, 2024

Description

This pull request is to address the need for improved color contrast in the application's dark mode.

Before:
image
After:
image image image
image

Fixes #

Change log entry

  • Is a change log needed? If yes, is it added to CHANGES.rst? If you want to avoid merge conflicts,
    list the proposed change log here for review and add to CHANGES.rst before merge. If no, maintainer
    should add a no-changelog-entry-needed label.

Checklist for package maintainer(s)

This checklist is meant to remind the package maintainer(s) who will review this pull request of some common things to look for. This list is not exhaustive.

  • Are two approvals required? Branch protection rule does not check for the second approval. If a second approval is not necessary, please apply the trivial label.
  • Do the proposed changes actually accomplish desired goals? Also manually run the affected example notebooks, if necessary.
  • Do the proposed changes follow the STScI Style Guides?
  • Are tests added/updated as required? If so, do they follow the STScI Style Guides?
  • Are docs added/updated as required? If so, do they follow the STScI Style Guides?
  • Did the CI pass? If not, are the failures related?
  • Is a milestone set? Set this to bugfix milestone if this is a bug fix and needs to be released ASAP; otherwise, set this to the next major release milestone. Bugfix milestone also needs an accompanying backport label.
  • After merge, any internal documentations need updating (e.g., JIRA, Innerspace)?

@github-actions github-actions bot added the embed Regarding issues with front-end embedding label Feb 22, 2024
@pllim pllim added this to the 3.9 milestone Feb 22, 2024
@pllim pllim added the no-changelog-entry-needed changelog bot directive label Feb 22, 2024
@pllim
Copy link
Contributor

pllim commented Feb 22, 2024

Would be nice if you can post a before and after screenshots (in dark mode) for comparison. Thanks!

Copy link

codecov bot commented Feb 22, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.68%. Comparing base (9515b7a) to head (58623ca).
Report is 5 commits behind head on main.

❗ Current head 58623ca differs from pull request most recent head 6f33aa7. Consider uploading reports for the commit 6f33aa7 to get more accurate results

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #2721   +/-   ##
=======================================
  Coverage   88.68%   88.68%           
=======================================
  Files         108      108           
  Lines       16214    16214           
=======================================
  Hits        14379    14379           
  Misses       1835     1835           

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

@pllim
Copy link
Contributor

pllim commented Feb 22, 2024

Thanks for the screenshots but which is before and which is after?

@kecnry
Copy link
Member

kecnry commented Feb 22, 2024

which is before and which is after?

Before is right (oranger and darker blue), after left (yellower, lighter blue - with increased contrast)

Copy link
Contributor

@pllim pllim left a comment

Choose a reason for hiding this comment

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

FWIW, does look better. Thanks!

@kecnry
Copy link
Member

kecnry commented Feb 22, 2024

There are other places that are hardcoded to use the "active" orange (for example: learn more links, slice indicator, active toolbar buttons, sidebar button, etc). Can those be updated to read from here as well or is that included in a planned follow-up effort?

Screen Shot 2024-02-22 at 2 01 22 PM

Comment on lines 2 to 5
<div :class="active ? 'strike strike-active text--secondary': 'strike text--secondary'">
<div :class="[
'strike',
active ? ($vuetify.theme.dark ? 'strike-active-dark' : 'strike-active-light') : ''
]">
Copy link
Member

Choose a reason for hiding this comment

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

does this still need text--secondary or does that not add anything necessary?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, It doesn't add anything I can see. Do you recall why you removed it 🙏 , as I built the styles on top of your last changes to the section header?

Copy link
Member

Choose a reason for hiding this comment

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

those styles may have been absorbed into strike, so its probably ok to get rid of, I'll double check when reviewing 🤞

@haticekaratay haticekaratay changed the title Improve button contrast in dark mode Improve app contrast in dark mode Mar 13, 2024
@kecnry
Copy link
Member

kecnry commented Mar 14, 2024

Is there anything we can do about plugin marks (Markers, live-previews in any plugin)?

@kecnry
Copy link
Member

kecnry commented Mar 14, 2024

and does white icons/text on this new yellow work or do we need to switch those to black in dark mode?

Before:
Screen Shot 2024-03-14 at 4 09 26 PM

After:
Screen Shot 2024-03-14 at 4 09 07 PM

@gibsongreen gibsongreen modified the milestones: 3.9, 3.10 Apr 5, 2024
@bmorris3 bmorris3 modified the milestones: 3.10, 3.11 May 3, 2024
@rosteen rosteen modified the milestones: 3.11, 4.0, 4.1 Oct 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
embed Regarding issues with front-end embedding no-changelog-entry-needed changelog bot directive Ready for final review UI/UX😍
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants