docs-infra: theming and dark mode by AleksanderBodurri · Pull Request #41129 · angular/angular

AleksanderBodurri · 2021-03-09T06:06:05Z

Meant to continue the conversation from #40257.

This ~~draft~~ PR is a major refactor of the styles in https://angular.io/ in an effort to make aio themeable (primarily for a long awaited dark mode) and move towards using the sass module system.

The implementation is heavily inspired by the awesome folks who've worked on material.angular.io.

Previously styles were organized like this:

styles
- 1-layout
  - _global_layout.scss
  - ...
- 2-modules
  - _alert.scss
  - ...

This PR changes this structure to:

styles
- 1-layout
  - global_layout
    - _global_layout.scss
    - _global_layout-theme.scss
  - ...
- 2-modules
  - alert
    - _alert.scss
    - _alert-theme.scss
  - ...

Essentially splitting styling related to theming into separate files. Within each theme file is a scss mixin that takes in a material theme configuration and generates the appropriate styling for that theme and component.

Theme configurations are defined in: src/styles/custom-themes

Tooling that has been ported over from material.angular.io allows theme chunks to be lazy loaded.

The advantage of this approach:

Theming is contained to one file per component. Developers need only be aware of the existence of a single file when making theming related changes to a component
Moves away from using sass @imports that are no longer recommended by the sass team
Themes can be lazy loaded at runtime, preventing growth of the default styles chunk every time a new theme is implemented

disadvantages:

Splitting styles into theming files means duplication of some selectors, resulting in an increase of the default styles chunk size (in my testing this increase was about 2.6 KB on a prod build)

I'm opening this as a draft to request further technical review, and to start a conversation around what we want a potential dark mode to look like. This draft provides the tooling to make aio themeable, ~~but does not provide an actual dark mode implementation~~. I didn't want to attempt an implementation without first getting direction from the design team.

EDIT: pushed a prototype dark mode implementation to iterate from.

EDIT: PR is ready to review 🔍

PR Type

What kind of change does this PR introduce?

Feature
Code style update (formatting, local variables)
Refactoring (no functional changes, no api changes)

Does this PR introduce a breaking change?

Yes
No

mary-poppins · 2021-03-10T19:51:48Z

You can preview dd399cf at https://pr41129-dd399cf.ngbuilds.io/.
You can preview e42dbd6 at https://pr41129-e42dbd6.ngbuilds.io/.
You can preview 8cd2a5c at https://pr41129-8cd2a5c.ngbuilds.io/.

mary-poppins · 2021-03-12T19:43:39Z

You can preview 77ab271 at https://pr41129-77ab271.ngbuilds.io/.

AleksanderBodurri · 2021-03-12T20:13:41Z

Implemented a prototype dark mode to iterate from.

Unrelated but is the ";;" at the bottom of the page on https://angular.io/ supposed to be there? Noticed it while working on this.

gkalpak · 2021-03-12T21:15:45Z

The ;; at the end are definitely not supposed to be there 😁
I accidentally introduced them in #41162 😇 They will be fixed by #41183.

mary-poppins · 2021-03-12T21:18:20Z

You can preview cee8e1f at https://pr41129-cee8e1f.ngbuilds.io/.

mary-poppins · 2021-03-13T03:09:50Z

You can preview 4931453 at https://pr41129-4931453.ngbuilds.io/.

mary-poppins · 2021-03-13T03:57:50Z

You can preview f35ca19 at https://pr41129-f35ca19.ngbuilds.io/.

mary-poppins · 2021-03-13T16:28:31Z

You can preview 85b7010 at https://pr41129-85b7010.ngbuilds.io/.

mary-poppins · 2021-03-13T17:16:55Z

You can preview 93c32fc at https://pr41129-93c32fc.ngbuilds.io/.

mary-poppins · 2021-03-13T17:31:01Z

You can preview 083086a at https://pr41129-083086a.ngbuilds.io/.

AleksanderBodurri · 2021-03-13T18:08:06Z

Encountered a weird bug while working on this. When I install aio with the install prompt in the url bar, the installed aio opens as expected but when I click the toggle for dark mode all the content on the screen becomes invisible. On mac os chrome 89.0.4389.90. Confirmed that this does not happen on windows.

Open https://pr41129-93c32fc.ngbuilds.io/
Install with the "install app" prompt in the url bar
Click the dark mode toggle.

Can anyone confirm being able to reproduce this on their end?

mary-poppins · 2021-03-13T18:23:20Z

You can preview 7927057 at https://pr41129-7927057.ngbuilds.io/.

mary-poppins · 2021-05-25T02:39:08Z

You can preview 9d79153 at https://pr41129-9d79153.ngbuilds.io/.

mary-poppins · 2021-05-25T02:54:25Z

You can preview 93bf826 at https://pr41129-93bf826.ngbuilds.io/.

AleksanderBodurri · 2021-05-25T03:18:56Z

@gkalpak I think I've addressed most of your comments. ~~There was one I was uncertain of so I left it open for clarification~~.

Appreciate the review 🙏 Let me know if theres anything else I can do for this PR.

mary-poppins · 2021-05-25T03:20:11Z

You can preview 9a73356 at https://pr41129-9a73356.ngbuilds.io/.

mary-poppins · 2021-05-25T03:36:44Z

You can preview c800bca at https://pr41129-c800bca.ngbuilds.io/.

mary-poppins · 2021-05-25T05:08:27Z

You can preview c918995 at https://pr41129-c918995.ngbuilds.io/.

brings in theming tools from material io into angular io in preparation of implementing darkmode

scss files were forwarded from files that were named without convention, changes these file names to follow conventions

…ad of the global imports move away from using global constants in scss files because @import will be deprecated soon

…f global imports move away from global mixins because @import is going to be deprecated

creates theming files for the aio typography styles; done as part of the effort to make aio themeable

creates theming files for the module styles in aio; done as part of the effor to make aio themeable

defines styles for a first iteration of an aio darkmode

mary-poppins · 2021-05-27T01:28:03Z

You can preview 7ca90ae at https://pr41129-7ca90ae.ngbuilds.io/.

gkalpak

Thank you for addressing all the comments, @AleksanderBodurri ❤️
I don't see anything that should block this PR. Incredible work 💯

I can't tell you how excited I am for this feature 🤤 🚀 🕙

angular-automatic-lock-bot · 2021-06-27T16:06:07Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

google-cla Bot added the cla: yes label Mar 9, 2021

AleksanderBodurri mentioned this pull request Mar 9, 2021

feat(docs-infra): add dark mode to documentation web site #40257

Closed

14 tasks

AleksanderBodurri force-pushed the aio-theming branch 3 times, most recently from e42dbd6 to 8cd2a5c Compare March 10, 2021 03:41

twerske added the aio: preview label Mar 10, 2021

jessicajaniuk added the comp: docs-infra label Mar 11, 2021

ngbot Bot added this to the Backlog milestone Mar 11, 2021

AleksanderBodurri force-pushed the aio-theming branch from 3ceb5ef to 77ab271 Compare March 12, 2021 19:35

AleksanderBodurri force-pushed the aio-theming branch from 77ab271 to cee8e1f Compare March 12, 2021 21:09

AleksanderBodurri force-pushed the aio-theming branch 2 times, most recently from b8a3a7d to 4931453 Compare March 13, 2021 03:00

AleksanderBodurri force-pushed the aio-theming branch from 4931453 to f35ca19 Compare March 13, 2021 03:49

AleksanderBodurri changed the title ~~[RFC] aio Theming~~ aio Theming Mar 13, 2021

AleksanderBodurri force-pushed the aio-theming branch from f35ca19 to 85b7010 Compare March 13, 2021 16:20

AleksanderBodurri force-pushed the aio-theming branch from 85b7010 to 93c32fc Compare March 13, 2021 17:07

AleksanderBodurri force-pushed the aio-theming branch from 93c32fc to 083086a Compare March 13, 2021 17:22

AleksanderBodurri force-pushed the aio-theming branch from 083086a to 7927057 Compare March 13, 2021 18:15

AleksanderBodurri force-pushed the aio-theming branch 3 times, most recently from 66195fa to 9d79153 Compare May 25, 2021 02:24

AleksanderBodurri force-pushed the aio-theming branch from 9d79153 to 93bf826 Compare May 25, 2021 02:44

AleksanderBodurri force-pushed the aio-theming branch from 93bf826 to 9a73356 Compare May 25, 2021 03:11

AleksanderBodurri force-pushed the aio-theming branch from 9a73356 to c800bca Compare May 25, 2021 03:22

AleksanderBodurri force-pushed the aio-theming branch from c800bca to c918995 Compare May 25, 2021 04:59

AleksanderBodurri force-pushed the aio-theming branch from c918995 to 4339e5c Compare May 27, 2021 00:44

AleksanderBodurri added 7 commits May 26, 2021 21:18

feat(docs-infra): port over material io theming logic to angular io

57fc798

brings in theming tools from material io into angular io in preparation of implementing darkmode

refactor(docs-infra): rename namespaced scss to index files

1b8af62

scss files were forwarded from files that were named without convention, changes these file names to follow conventions

refactor(docs-infra): grab scss constants using scss use syntax inste…

38c2503

…ad of the global imports move away from using global constants in scss files because @import will be deprecated soon

refactor(docs-infra): grab scss mixins with scss use syntax instead o…

25cc1be

…f global imports move away from global mixins because @import is going to be deprecated

feat(docs-infra): create typography and layout theme files

eeb653e

creates theming files for the aio typography styles; done as part of the effort to make aio themeable

feat(docs-infra): create module theme files

efbdd63

creates theming files for the module styles in aio; done as part of the effor to make aio themeable

feat(docs-infra): implement dark mode

7ca90ae

defines styles for a first iteration of an aio darkmode

AleksanderBodurri force-pushed the aio-theming branch from 4339e5c to 7ca90ae Compare May 27, 2021 01:18

gkalpak approved these changes May 27, 2021

View reviewed changes

jelbourn added action: merge The PR is ready for merge by the caretaker and removed action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews labels May 27, 2021

This was referenced May 27, 2021

refactor(docs-infra): minor refactorings/style changes #42396

Closed

Add dark mode to angular.io #40102

Closed

ajitsinghkaler mentioned this pull request May 30, 2021

docs: add ability to toggle between dark and light theme #28860

Closed

Conversation

AleksanderBodurri commented Mar 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Type

Does this PR introduce a breaking change?

Uh oh!

mary-poppins commented Mar 10, 2021

Uh oh!

mary-poppins commented Mar 12, 2021

Uh oh!

AleksanderBodurri commented Mar 12, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gkalpak commented Mar 12, 2021

Uh oh!

mary-poppins commented Mar 12, 2021

Uh oh!

mary-poppins commented Mar 13, 2021

Uh oh!

mary-poppins commented Mar 13, 2021

Uh oh!

mary-poppins commented Mar 13, 2021

Uh oh!

mary-poppins commented Mar 13, 2021

Uh oh!

mary-poppins commented Mar 13, 2021

Uh oh!

AleksanderBodurri commented Mar 13, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mary-poppins commented Mar 13, 2021

Uh oh!

mary-poppins commented May 25, 2021

Uh oh!

mary-poppins commented May 25, 2021

Uh oh!

AleksanderBodurri commented May 25, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mary-poppins commented May 25, 2021

Uh oh!

mary-poppins commented May 25, 2021

Uh oh!

mary-poppins commented May 25, 2021

Uh oh!

mary-poppins commented May 27, 2021

Uh oh!

gkalpak left a comment

Choose a reason for hiding this comment

Uh oh!

angular-automatic-lock-bot Bot commented Jun 27, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

AleksanderBodurri commented Mar 9, 2021 •

edited

Loading

AleksanderBodurri commented Mar 12, 2021 •

edited

Loading

AleksanderBodurri commented Mar 13, 2021 •

edited

Loading

AleksanderBodurri commented May 25, 2021 •

edited

Loading