it-swarm.com.de

Rufen Sie das Materialschema/die Farbpalette für Material 2 für andere Elemente ab

Ich baue eine Anwendung, möchte aber ein konsistentes Farbschema beibehalten, das mit den Einstellungen geändert werden kann, indem Material (2) mit eckigen (2+) verwendet wird, aber ich bin nicht sicher, wie das Farbschema auf Elemente angewendet wird, die nicht direkt verwendet werden Bieten Sie die Möglichkeit, sie mit color="primary" zu färben, so dass ich mit dem Versuch, herauszufinden, wie Sie das Farb-/Farbschema erhalten, das mein Material 2-Design verwendet, ausfindig machen passen Sie sich an die Änderung des Themas an, da es auf gesetzt ist 

<mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">

Aber ein Rasterelement aus Material 2 nimmt nicht das gleiche Argument an, also habe ich Im versucht zu versuchen, es in einer annähernd ausreichenden Farbe zu gestalten oder es einfach nicht anzupassen (und passt sich nicht an die Änderungen des Designs an).

 enter image description here

Ich möchte, dass die Farbe mit der Designmatte übereinstimmt, die sich hier befindet (und die in den Navbar-Einstellungen ausgewählten Optionen geändert wird).

@import '[email protected]/material/theming';

@include mat-core();



$candy-app-primary: mat-palette($mat-red);
$candy-app-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
.default {
  @include angular-material-theme($candy-app-theme);
}
.light {
  $light-primary: mat-palette($mat-blue, 200,300, 900);
  $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn);
  @include angular-material-theme($light-theme);
}
@include angular-material-theme($candy-app-theme);
11
Cacoon

Ich habe eine großartige Lösung gefunden. Ich bin so aufgeregt, dies zu zeigen, weil es mich schon seit Jahren nervt, wie ich das implementieren kann. So, hier geht es; Ändern Sie zunächst alle Ihre CSS-Dateien scss;

Für bestehende Projekte

  • In der Konsole ausführen ng set defaults.styleExt=scss

  • Benennen Sie alle vorhandenen .css-Dateien in .scss um. 

  • Ändern Sie die Dateierweiterung von styles in .angular-cli.json manuell von .css in .scss.
  • Wenn Sie kein Tool wie WebStorm Refactor zum Umbenennen verwendet haben, ändern Sie manuell alle styleUrls von .css in .scss.

Für zukünftige Projekte

  • Verwenden Sie einfach für Ihr neues Projekt ng new your-project-name --style=scss

  • Für alle neuen Projekte, die scss verwenden, verwenden Sie ng set defaults.styleExt=scss --global

Jetzt benötigen Sie eine theme.scss -Datei in Ihrem App-Root-Verzeichnis:  where themes are

Jetzt möchten Sie in Ihrer style.scss-Datei Folgendes hinzufügen (wie Sie sehen können, ich kann die Hintergrundfarbe aber Sie können dies in ein beliebiges Element ändern, um Ihre Site nach Belieben zu gestalten):

EDIT: Sie müssen dieses benutzerdefinierte @mixin-Element nicht in Ihren styles.scss einfügen. Sie können es in einen beliebigen Ihrer *name*.component.scss-Elemente einfügen und dann einfach importieren und einbinden, wie Sie es in dem angegebenen Beispiel tun!

@import '[email protected]/material/theming';

// Define a custom mixin that takes in the current theme
@mixin theme-color-grabber($theme) {
  // Parse the theme and create variables for each color in the pallete
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  // Create theme specfic styles
  .primaryColorBG {
    background-color: mat-color($primary);
  }
  .accentColorBG {
    background-color: mat-color($accent);
  }
  .warnColorBG {
    background-color: mat-color($warn);
  }
}

Gehen Sie jetzt zu Ihrer theme.scss-Datei, mit der Sie Ihre Artikel zu Thema 2 gestalten. Wenn Sie Hilfe beim Themensuchen benötigen, überprüfen Sie Folgendes: Material 2 Github - Leitfaden zur Themierung

Öffnen Sie nun Ihre theme.scss und importieren Sie Ihre style.scss. Da sich meine theme.scss im Stammverzeichnis des /src/app/theme.scss-Ordners befindet, muss ich zunächst darauf zugreifen, um meine globale /src/styles.scss-Styling-Datei zu referenzieren.

@import '../styles';

Dann müssen wir unseren neuen benutzerdefinierten @mixin, den wir in ALL unserer Designs erstellt haben, einbinden (wenn Sie mehrere wie ich haben, ändert sich die Farbe entsprechend dem aktuell ausgewählten Design).

Fügen Sie es über dem eigentlichen Winkel-Material-Thema ein, wie folgt: 

@include theme-color-grabber($theme);
@include angular-material-theme($theme);

Wenn Sie ein Thema wie ich haben, fügen Sie es an der gleichen Stelle wie folgt hinzu:

.light {
  $light-primary: mat-palette($mat-blue, 200,300, 900);
  $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn);
  @include theme-color-grabber($light-theme);
  @include angular-material-theme($light-theme);

}

Sie können sehen, dass ich meinen theme-color-grabber über dem Include hinzugefügt hat. Es spielt keine Rolle, ob es über oder unter dem eigentlichen Thema liegt, da es die Farben des Themas erhält, was der Hauptpunkt ist.

Mein ganzes themes.scss sieht so aus:

@import '[email protected]/material/theming';
//We import our custom scss component here
@import '../styles';

@include mat-core();

$theme-primary: mat-palette($mat-red);
$theme-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
$theme-warn:    mat-palette($mat-red);
$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
//
@include theme-color-grabber($theme);
@include angular-material-theme($theme);
.light {
  $light-primary: mat-palette($mat-blue, 200,300, 900);
  $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn);
  @include theme-color-grabber($light-theme);
  @include angular-material-theme($light-theme);

}

Und zum Schluss können wir jetzt unsere Hintergrundfarbe für einen Hintergrund ANGEBEN HINZUFÜGEN!, Zum Beispiel gebe ich einen mat-grid-tile der 'primären' Farbe (er nimmt nicht das Argument color = '', wie andere Elemente wie mat-toolbar) an Setzen Sie einfach seine Klasse auf den entsprechenden Klassennamen wie folgt:

EDIT: In jeder Ihrer SCS-Dateien für Komponenten müssen Sie import '<path-to>/theme.scss' eingeben, damit Ihr Design auf diese Komponente angewendet werden kann. Importiere nicht theme.scss in styles.scss, da dies eine Importschleife erzeugt!

<mat-grid-list cols="4" rows="4" rowHeight="100px">
  <mat-grid-tile
    colspan="4"
    rowspan="5"
  class="primaryColorBG">
    <div fxLayout="column" fxLayoutAlign="center center">
      <h1 class="title-font">Callum</h1>
      <h1 class="title-font">Tech</h1>
    </div>
    <p>
      Ambitious and ready to take on the world of Information Technology,<br>
      my love for programming and all things I.T. has not wavered since I first got access<br>
      to my fathers computer at age 9.
    </p>
  </mat-grid-tile>

</mat-grid-list>

Endlich wird unser Ergebnis so aussehen !:

Rotes Thema aktiv Red theme

Blue-Theme aktiv enter image description here

23
Cacoon

Ich persönlich habe diese in css4-Variablen eingefügt, damit ich sie auch ohne Import verwenden kann

background: var(--color-primary)

Und so richten Sie die CSS4-Variablen ein

@import '[email protected]/material/theming';
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$app-primary: mat-palette($mat-blue);
$app-accent:  mat-palette($mat-orange);
$app-warn:    mat-palette($mat-red);
$app-success: mat-palette($mat-light-green);

// Create the theme object (a Sass map containing all of the palettes).
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($app-theme);

$primary: map-get($app-theme, primary);
$accent: map-get($app-theme, accent);

:root {
  --color-primary: #{mat-color($app-primary)};
  --color-accent: #{mat-color($app-accent)};
  --color-warn: #{mat-color($app-warn)};
  --color-success: #{mat-color($app-success)};
}
0
Ced
  1. Setzen Sie die Regel für Anwendungsstile auf SASS:
    Das Aktualisieren eines benutzerdefinierten Komponententhemas zur Laufzeit erfordert die Verwendung von @mixin. Daher sollten Ihre Anwendungsstilregeln SASS (nicht CSS) ..__ sein. Sie können hier lesen, wie Sie Angular-Cli mit SASS konfigurieren : https://scotch.io/tutorials/using-sass-with-the-angular-cli

  2. @Mixin für benutzerdefinierte Komponente definieren:
    Erstellen Sie in jeder Komponente, die Designfarben verwendet, in ihrer .scss-Datei einen @mixin. Extrahieren Sie für diese Komponente die gesamte Farbdefinition. Und verschiebe sie in den @mixin, wie folgt:

// --- file: my-component_1.scss ---
@import '[email protected]/material/theming'; // we need to add this so we could use Material functions
@mixin set-theme-component-1($theme)
{
  // Extract whichever individual palettes you need from the theme.
  $primary-palette: map-get($theme, primary);
  $accent-palette:  map-get($theme, accent);
  $warn-palette:    map-get($theme, warn);

  .component-container
  {
    background-color: mat-color($primary-palette); // use the mat-color function to extract the color from the palette
    border-color: mat-color($warn-palette);
  }
}

// Style rules that aren't theme/color related (size, font, etc)
.component-container
{
  width: 100%;
  ...
}
  1. Definieren Sie eine Themendatei:
    Sie müssen eine Themendatei definieren (wenn Sie dies noch nicht getan haben) und den @mixins aufrufen, den wir in dieser Datei definiert haben, wie folgt:
// --- file: app.theme.scss ---
@import '[email protected]/material/theming';
@include mat-core(); // include this only once in your code!!!

// each custom component that uses theme colors will be imported here - we need there @mixin
@import './some-path/some-folder/my-component_1'; // no need to specify .scss suffix

@mixin set-theme($theme) // define a new @mixin that will be invoked each time the theme is changed
{
  @include set-theme-component-1($theme); // invoke the mixin we defined for component_1
  // repeat this for each component that uses theme colors
}

// define your themes:
.theme-light
{
  $light-primary: mat-palette($mat-Indigo);
  $light-accent:  mat-palette($mat-pink, A200, A100, A400);
  $light-warn:    mat-palette($mat-red);
  $light-theme:   mat-light-theme($light-primary, $light-accent, $light-warn);

  @include angular-material-theme($light-theme);
  @include set-theme($light-theme); // once the theme was set, invoke the mixin
}

.theme-dark
{
  $dark-primary:  mat-palette($mat-teal, A400);
  $dark-accent:   mat-palette($mat-grey, 800);
  $dark-warn:     mat-palette($mat-red, 700);
  $dark-theme:    mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
  @include set-theme($dark-theme); // once the theme was set, invoke the mixin
}

Das ist das :-)

Dies sind einige zusätzliche Schritte, die Sie implementieren müssen, damit Live-Theming funktionieren kann (sie haben nichts mit benutzerdefinierten Komponenten zu tun, daher werde ich sie nur schnell werfen).
- Erstellen Sie einen ThemeService, der das aktuelle Design speichert. Dieser Dienst muss den OverlayContainer aktualisieren (Angular-Material verwendet diesen Container für den Hintergrund von Modalen wie Popups und Dropdown-Listen).
- Fügen Sie die Designklasse (theme-dark oder eine andere) einem der Stammelemente im DOM hinzu.
- Fügen Sie die Klasse mat-app-background zu einem der Stammelemente im DOM hinzu. Dadurch werden die Hintergrundfarbe und die Schriftfarbe je nach Thema geändert.
- Für ein besseres Softwaredesign - Wenn Sie viele Themen haben, kann das Teilen der Themendatei eine gute Idee für Schweinswale sein.

Sie können hier weiterlesen: https://material.angular.io/guide/theming

oder siehe dort Github-Projekt: https://github.com/angular/material2/blob/master/src/lib/core/theming/_theming.scss

0
Gil Epshtain

Ich bin ein absoluter Neuling, und vielleicht handelt es sich dabei um bewährte Verfahren, die für diesen Fall unbrauchbar sind, oder eine ressourcenaufwendige Lösung. Bei myangularthemefile.scss hatte ich diese Klassen erstellt:

@import '[email protected]/material/theming';
@include mat-core();

...

.matcolorprimary{
    color: mat-color($mitjans-primary)
}

.matcoloraccent {
    color: mat-color($mitjans-accent);
}

.matcolorwarn {
    color: mat-color($mitjans-warn);
}

Und ich füge sie zu den HTML-Elementen hinzu, die ich in der Vorlage der Komponente benötige.

Ich denke, es wäre einfach, die gleiche Struktur für Hintergrundfarben zu erstellen ...

Könnte dies eine Alternative zum Einfügen von Sass-Artefakten in jedes Stylesheet für Schattendom-Komponenten für kleine Projekte sein?

0
Josep Alacid