{"id":491,"date":"2021-09-19T19:43:57","date_gmt":"2021-09-19T19:43:57","guid":{"rendered":"https:\/\/erdbeerbeet.com\/?p=491"},"modified":"2021-09-19T19:43:58","modified_gmt":"2021-09-19T19:43:58","slug":"angular-welcome-to-the-dark-mode","status":"publish","type":"post","link":"https:\/\/erdbeerbeet.com\/de\/angular-welcome-to-the-dark-mode","title":{"rendered":"Angular – Der Dunkel-Modus"},"content":{"rendered":"\n

Ich habe hier<\/a> schon einmal einen \u00dcberblick \u00fcber den Dark Mode gegeben. Bei der Umsetzung gibt es wie so h\u00e4ufig mehr als eine M\u00f6glichkeit.
Hier m\u00f6chte ich einmal auf die Ans\u00e4tze im Angular-Kontext eingehen.<\/p>\n\n\n\n

Dark Mode erkennen<\/strong><\/h2>\n\n\n\n

Die Umsetzung einer dunklen Farbgebung setzt zun\u00e4chst voraus, dass die Einstellung von System oder Browser erkannt wird. Inzwischen unterst\u00fctzen die meisten Browser prefers-color-scheme<\/a> (au\u00dfer dem Internet Explorer). Diese CSS-Media-Query fragt die vom Nutzer pr\u00e4ferierte Einstellung ab, um eine einheitliche Helligkeit aller Anwendungen und Webseiten zu gew\u00e4hrleisten.<\/p>\n\n\n\n

Dark Mode class<\/strong><\/h2>\n\n\n\n

The implementation of dark or light mode is attached to a css class at the central element. Der dunkle oder helle Modus h\u00e4ngt meist an einer CSS-Klasse eines zentralen Elements. Jede Unterkomponente erbt entsprechend.<\/p>\n\n\n\n

Eine wichtige Anmerkung: Diese Klasse geh\u00f6rt an den Body-Tag<\/strong> in der index.html. Nutzt man sie stattdessen in der app.component.html, so werden Dialoge und andere schwebende Elemente au\u00dferhalb des App-Component-Kontext nicht mit einbezogen.<\/p>\n\n\n\n

Angular Theming<\/strong><\/h2>\n\n\n\n

Angular Material<\/strong> hat seine eigene Theming-Logik. Die vorgegebenen Themes sind bereits in hell und dunkel eingeteilt. Wenn man nun aber einen dunklen Modus f\u00fcr sein helles Theme anbieten m\u00f6chte, muss dies selbst angegangen werden. Im Code unten sind vor allem ‘define-light-theme’ und ‘define-dark-theme’ wichtig, da sie die nicht-farbigen Elemente setzen.<\/p>\n\n\n\n

Nutzt man wirklich die vorgefertigten Themes, dann hat man hiermit den geringsten Aufwand zur Umsetzung eines automatischen Dark Mode (deswegen habe ich mich auch daf\u00fcr entschieden).<\/p>\n\n\n\n

@use '~@angular\/material' as mat;\n@import '~@angular\/material\/theming';\n@include mat.core();\n\n$angular-primary: mat.define-palette(mat.$deep-purple-palette);\n$angular-accent: mat.define-palette(mat.$amber-palette);\n$angular-warn: mat.define-palette(mat.$red-palette);\n\n$angular-default-theme: mat.define-light-theme(\n    (\n      color: (\n        primary: $angular-primary,\n        accent: $angular-accent,\n        warn: $angular-warn,\n      )\n    )\n);\n\n$angular-dark-theme: mat.define-dark-theme(\n    (\n      color: (\n        primary: $angular-accent,\n        accent: mat.define-palette(mat.$light-blue-palette),\n        warn: $angular-warn,\n      )\n    )\n);\n@media (prefers-color-scheme: light) {\n  @include mat.all-component-colors($angular-default-theme);\n}\n\n@media (prefers-color-scheme: dark) {\n  @include mat.all-component-colors($angular-dark-theme);\n}\n<\/code><\/pre>\n\n\n\n
Und noch einmal; die ‘mat-app-background’ Klasse geh\u00f6rt ans Body-Tag<\/strong> in der index.html<\/strong>, damit das Theming korrekt angewendet wird.<\/p>\n\n\n\n
Package<\/strong><\/h2>\n\n\n\n
The npm package angular-dark-mode<\/a> is dependency free and lets you insert the Das npm-Package angular-dark-mode<\/a> ist frei von Dependencies und erm\u00f6glicht das Einf\u00fcgen eines Observables in den Light-Switch (s.u.). Alles was man tun muss ist, die verschiedenen Styles zu definieren. Eine automatische Modus-Erkennung scheint noch nicht eingebaut zu sein, es wird eine entsprechende CSS-Klasse ausgetauscht..<\/p>\n\n\n\n
Reines CSS<\/strong><\/h2>\n\n\n\n
Die Media-Query prefers-color-scheme<\/a> (nicht f\u00fcr ie) l\u00e4sst einen die Styles definieren, die man f\u00fcr den hellen bzw. dunklen Modus ben\u00f6tigt.
Das hier ist \u00e4hnlich zur Material-L\u00f6sung, aber anstatt Farb-Themes zu nutzen, m\u00fcssen alles Styles f\u00fcr hell und dunkel verschieden definiert werden. Das beinhaltet mehr Tipparbeit, aber man kann auch spezifischer vorgehen, es m\u00fcssen nur eben alle Sonderf\u00e4lle bedacht werden.<\/p>\n\n\n\n
media (prefers-color-scheme: light) {\n  body {\n      color: rgb(28, 0, 0);\n  }\n\n  .content {\n    background-color: rgba(253, 250, 241, 0.8);\n  }\n\n  .content__title {\n    color: darkred;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  body {\n      color: rgb(253, 250, 241);\n  }\n\n\n  .content {\n    background-color: rgba(38, 0, 13, 0.8);\n  }\n\n  .content__title {\n    color: rgb(191, 7, 4);\n  }\n}\n<\/code><\/pre>\n\n\n\n
Alternativ k\u00f6nnen css custom properties<\/a> genutzt werden.
Die funktionieren \u00fcbrigens nicht im Internet Explorer…<\/p>\n\n\n\n
@media (prefers-color-scheme: light) {\n  --main-bg-color: lightgrey;\n  --main-color: black;\n}\n\n@media (prefers-color-scheme: dark) {\n  --main-bg-color: darkgrey;\n  --main-color: white;\n}\n\n.content {\n  color: var(--main-color);\n  background-color: var(--main-bg-color);\n}\n<\/code><\/pre>\n\n\n\n
Lichtschalter<\/strong><\/h2>\n\n\n\n
Hier werde ich sp\u00e4ter erg\u00e4nzen, wie man mit einem Modus-Switch und einem ThemeService den Modus f\u00fcr den Nutzer individuell einstellen kann.<\/p>\n","protected":false},"excerpt":{"rendered":"
In Angular gibt es mehrere M\u00f6glichkeiten, den Dark Mode umzusetzen. Material, Theming und reines CSS.<\/p>\n","protected":false},"author":1,"featured_media":384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41,12,36,49],"tags":[44,31],"class_list":["post-491","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-programming","category-web-programming","category-word_progressor","tag-angular","tag-dark-mode"],"translation":{"provider":"WPGlobus","version":"3.0.0","language":"de","enabled_languages":["en","de"],"languages":{"en":{"title":true,"content":true,"excerpt":true},"de":{"title":true,"content":true,"excerpt":true}}},"_links":{"self":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/comments?post=491"}],"version-history":[{"count":8,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/491\/revisions"}],"predecessor-version":[{"id":499,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/491\/revisions\/499"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media\/384"}],"wp:attachment":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media?parent=491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/categories?post=491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/tags?post=491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}