Add dark mode support 🌗 #199

seifsay3d-zz · 2020-06-01T21:12:31Z

Brief description

This PR addressed issue #187 and adds support to dark mode by adding .dark to the <html> tag.
...

Developer Certificate of Origin

I certify that these changes according to the Developer Certificate of Origin 1.1 as described at https://developercertificate.org/.

Sample pictures

...

Further details

This PR is not ready for merge as I assume I have missed some variable references, I opened it so that we can have a point of discussion as I need some guidance to make sure I'm on the right track.

The goal is to support dark mode using CSS variables and at the same time keep supporting IE 'light mode only' using this mixin.

@mixin color($property, $varName) {
  // IE falls back to light theme always
  #{$property}: #{map-get(map-get($theme-map, 'light'), 'primary')};
  #{$property}: var(--#{$varName});
}

I have some concerns that I'm not sure how to deal with.

1 - this mixin allows for typos that are not spotted by the linter
2- this mixin has a limitation as it requires property and color name, thus struggles when trying to be used in gradients for example

I would love to hear your opinion on these.

...

…itor.. next time will less commits.

Outline buttons

Switch components

…irefox Navbar fix for FireFox

Feature Breadcrumb

tomByrer · 2020-07-13T15:49:33Z

Looks really nice!
Is it easy to switch between the 2?

rhyneav · 2020-08-16T14:53:22Z

Sounds great, @seifsay3d! Thank you for all of your work on this, and please let me know if I can help out in any way!

seifsay3d-zz · 2020-08-25T22:54:07Z

Hi @rhyneav, I've finally managed to fix the remaining issues, it looks good to me, but I would love to have a second eye just in case something slipped.

rhyneav · 2020-09-06T18:06:10Z

Awesome! Thank you for taking care of those!

I went through each page to see the changes and double check that there were not any styles that changed using light mode (since it should all be the same after the refactor) and found a couple of minor issues. Totally to be expected with such a major change, I'm impressed that this was all I found!

Please let me know if you need any assistance with getting these last updates!

Alert text

To keep backward compatibility we'll want to keep the text the same dark color.

before:

after:

Card borders

Similar to the alert text, but the border colors changed. I do like the dark borders, but think that we'll want to keep the old colors for now.

before:

after:

Code Styles

It looks like some of the code styles were lost

before:

after:

Input Focus

It looks like we lost colors on the input focus

before:

after:

Link Underline

In some places (but not all for some reason) we lost the link underline

before:

after:

Popover borders

Border styles on the popover appear to be less papery, maybe it's the border color?

before:

after:

seifsay3d-zz · 2020-09-07T00:32:02Z

Thanks for not only noticing these but also for the great report and your very supportive attitude. I've added all the necessary changes to address these.

I've kept the blue in links to secondary to support a better contrast ratio on dark-theme, if you don't like that change then I can introduce another variable with the default chrome blue.

Other than that, I hope we have everything fixed 🤞🏽

rhyneav · 2020-09-13T15:38:56Z

This is fantastic, thank you again for all of your work in making this happen! I'm personally really excited to see dark mode in PaperCSS! I'm going to merge this in to develop, add some documentation around adding the .dark class, and release this in v1.9.0. I'll try to get that release out today or tomorrow!

rhyneav · 2020-09-14T13:05:45Z

Misspoke in my last comment. This was released yesterday in v1.8.0!

Phreshhh and others added 27 commits January 29, 2019 14:58

Navbar fix for FireFox

c9ea3a8

margin-top stylelint fix

6bc209e

margin-top removed

72ac948

burger borderfix

fad6659

Outline buttons

70b2a14

Outline buttons - stylelint fix

01f267f

'paper-btn' class added to linkbutton example. Sorry I left it 1st time.

a03b8db

Switch components

44f413b

Switch components - stylelint fix 1 :)

df8e6b6

Switch components - stylelint fix 2 :)

8be95f8

Switch components - stylelint fix 3 :)

608b93f

Switch components - stylelint fix 4 :) OMG alphabetical.. - Why?! lol

78a677b

Switch components - stylelint fix 5 :) I installed stylelint to my ed…

c0d9eb1

…itor.. next time will less commits.

Switch components - stylelint fix 6 :)

2e22ed4

Switch components - stylelint fix 7 :) - last

aab82aa

Switch components - stylelint fix 8 :) - realy last XD

923133c

outline colormap removed

9f6be35

bg and shadow color changed to variable colors

f9001e7

Merge pull request papercss#180 from Phreshhh/feature-outline-buttons

de9fd41

Outline buttons

Merge pull request papercss#181 from Phreshhh/feture-switch-component

2bf563c

Switch components

button fix for backward compatibility

12af59b

Feature Breadcrumb

e9351b6

Feature Breadcrumb

95c7de0

Merge pull request papercss#179 from Phreshhh/feature-navbar-fix-in-f…

84dde0d

…irefox Navbar fix for FireFox

Merge pull request papercss#184 from Phreshhh/feature-breadcrumb

e0b7a74

Feature Breadcrumb

chore: (editorconfig) add quote_type

36fcab8

feat: add dark mode

a7e0990

seifsay3d-zz changed the base branch from master to develop June 1, 2020 21:15

chore: add comments for theme colors

1ee089b

seifsay3d added 14 commits August 26, 2020 00:35

chore: use color mixin in alerts

415dca3

chore: use color mixin in badges

97cc2f3

chore: fix typo

de8cbd3

chore: use color mixin in borders

5fb6062

fix: (docs) borders to use same markup

b9af460

chore : use color mixin in popover

4a27b7c

chore: use color mixin in buttons

63bba4d

chore: use color mixin in navbar

a2fad6e

chore: use color mixin in progress

7119487

chore: use color mixin in modals

63c7e1d

chore: use color mixin in forms

24981e9

fix: linting issues

a7c72c9

chore: use color mixin in cards

36afea4

feat: add more color vars

22ce468

chore: remove comments

1198a32

seifsay3d added 7 commits September 6, 2020 20:22

fix: update alerts and badges text

e604927

fix: cards border color

2c2edba

fix: code styling

496409f

fix: form focus styles

a810ac7

fix: border styles

ac67209

fix: code for dark-theme

493d673

feat: change links color to secondary

6f166e5

rhyneav approved these changes Sep 13, 2020

View reviewed changes

rhyneav merged commit 11ea531 into papercss:develop Sep 13, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add dark mode support 🌗 #199

Add dark mode support 🌗 #199

Uh oh!

seifsay3d-zz commented Jun 1, 2020 •

edited

Loading

Uh oh!

tomByrer commented Jul 13, 2020

Uh oh!

rhyneav commented Aug 16, 2020

Uh oh!

seifsay3d-zz commented Aug 25, 2020 •

edited

Loading

Uh oh!

rhyneav commented Sep 6, 2020

Uh oh!

seifsay3d-zz commented Sep 7, 2020

Uh oh!

rhyneav commented Sep 13, 2020

Uh oh!

rhyneav commented Sep 14, 2020

Uh oh!

Uh oh!

Add dark mode support 🌗 #199

Add dark mode support 🌗 #199

Uh oh!

Conversation

seifsay3d-zz commented Jun 1, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Brief description

Developer Certificate of Origin

Sample pictures

Further details

Uh oh!

tomByrer commented Jul 13, 2020

Uh oh!

rhyneav commented Aug 16, 2020

Uh oh!

seifsay3d-zz commented Aug 25, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rhyneav commented Sep 6, 2020

Alert text

Card borders

Code Styles

Input Focus

Link Underline

Popover borders

Uh oh!

seifsay3d-zz commented Sep 7, 2020

Uh oh!

rhyneav commented Sep 13, 2020

Uh oh!

rhyneav commented Sep 14, 2020

Uh oh!

Uh oh!

seifsay3d-zz commented Jun 1, 2020 •

edited

Loading

seifsay3d-zz commented Aug 25, 2020 •

edited

Loading