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

The Dark Mode - Color #69

Open
yakkowu opened this issue Jul 20, 2021 · 10 comments
Open

The Dark Mode - Color #69

yakkowu opened this issue Jul 20, 2021 · 10 comments
Assignees
@cwpeng @nizniz187 @yakkowu
Labels
enhancement New feature or request ui/ux UI/UX design
Milestone
Version 1.0 - Piz...

Comments

@yakkowu
Copy link
Contributor

yakkowu commented Jul 20, 2021

No description provided.

@yakkowu yakkowu added the enhancement New feature or request label Jul 20, 2021
@yakkowu yakkowu added this to the UI/UX Design milestone Jul 20, 2021
@nizniz187 nizniz187 added the ui/ux UI/UX design label Oct 2, 2021
@nizniz187 nizniz187 modified the milestones: UI/UX Design, Next Stage Oct 2, 2021
@yakkowu yakkowu changed the title Consummate Dark Mode - Color The Dark Mode - Color Apr 11, 2022
@yakkowu
Copy link
Contributor Author

yakkowu commented Apr 11, 2022 •
edited
Loading

TASK COMPLETE!

image

The completed version of the current dark mode is as follows:

  • Dark Mode

    • Added all color set
    • Before & After preview

  • Light Mode

    • Adjust all the warning color level
    • And, was initially defined as 30 as the standard warning color, and now it is unified to 60
    • You can also check more information below ↓

⤷ Here's the currently file in Figma

Before
image
After
image

@yakkowu
Copy link
Contributor Author

yakkowu commented Apr 11, 2022

BTW, also needs to add shadows for dark theme, so another new issue is opened #147, I will handle this at next time.

@yakkowu
Copy link
Contributor Author

yakkowu commented May 8, 2022 •
edited
Loading

INFORMATION UPDATE

image Before image After

Resolutions at the last meeting, we needed "special treatment" for the filled-button (named the Regular Button) in dark theme, replacing the text color from Grayscale 0 (#0F1B26) to 100 ( #E5F2FF), when it's on the Regular Button. The text seen on a filled-button will be a whiter color rather than a darker color.

As a reminder, please remember to include this "special treatment" when you develop this part and deal with regular button. Thanks!

⤷ Here's the currently file in Figma

@nizniz187
Copy link
Contributor

Confirmed. This task will be taken over by developers to implement.

cwpeng added a commit that referenced this issue Jun 9, 2022
@cwpeng
Update colors in dark mode css #69
358cdf5
nizniz187 added a commit that referenced this issue Aug 14, 2022
@nizniz187
#69: Add theme switch function for homepage.
2c481b2
@nizniz187
Copy link
Contributor

We have some customization issues for dark theme mainly caused by execution order. In short: we cannot get the current theme config on component constructor phase, which makes the following implementation difficult:

  • Customizing button color for dark theme.
  • Changing code highlight palette for dark theme.

nizniz187 added a commit that referenced this issue Sep 3, 2022
@nizniz187
#69: Add custom CSS variable for button color.
0dc82a3
nizniz187 added a commit that referenced this issue Sep 3, 2022
@nizniz187
#69: Add observer for detecting head attribute mutation.
21e5aef
@nizniz187
Copy link
Contributor

Code theme change issue has been resolved by implementing a mutation observer.

Key changes:

  1. Extract a theme object utility for theme change controlling (see https://github.com/Padax/w-components/blob/master/packages/w-components/util/Theme.js).
  2. Bind current theme name on <head> as an attribute.
  3. Implement a MutationObserver for <head> theme attribute change.
  4. Trigger Code theme stylesheet switch on this theme attribute changed.

!! I AM SUCH A GENIUS !!

@cwpeng
Copy link
Member

cwpeng commented Sep 3, 2022

GENIUS!!

@yakkowu
Copy link
Contributor Author

yakkowu commented Sep 3, 2022

YES, YOU ARE!!

@cwpeng
Copy link
Member

cwpeng commented Sep 3, 2022

But w-code highlight in reference page is broken. Check it by visiting https://padax.github.io/w-components/ and click 元件.

@yakkowu
Copy link
Contributor Author

yakkowu commented Oct 14, 2022

According to @nizniz187 report, there're still some style details about this dark mode that need to be reviewed later, I comment here first and open this issue #158 .

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

@cwpeng cwpeng

@nizniz187 nizniz187

@yakkowu yakkowu

Labels
enhancement New feature or request ui/ux UI/UX design
Projects
None yet
Milestone
Version 1.0 - Pizza 🍕 - Development
Development

No branches or pull requests
3 participants
@cwpeng @nizniz187 @yakkowu