it-swarm-eu.dev

Získejte barevnou schému barev 2/paleta pro ostatní prvky

Stavím aplikaci, ale chci si zachovat konzistentní barevné schéma, které lze měnit pomocí nastavení tak, aby im pomocí materiálu (2) s hranatými (2+) změnila nastavení, ale nejsem si jistá, jak získat barevné schéma na prvcích, které dont přímo nabídnout možnost barevně je s color="primary", takže im vlevo se snaží přijít na to, jak získat barevné/barevné schéma, které moje téma Materiál 2 používá. A chci, aby se změnilo, když se téma změní, například můj navbar se přizpůsobí změně motivu, protože je nastaven na 

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

Element mřížky z materiálu 2 však nemá stejný argument, takže jsem ho nechal, aby se pokusil o jeho úpravu v dostatečně blízké barvě, nebo se s ním vůbec neshodoval (a to se nezměnilo na změny motivů), jak je vidět zde:

 enter image description here

Chci, aby odpovídal barvě s motivem, který je zde (a mění se v možnostech vybraných v nastaveních navbar)

@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

Našel jsem úžasné řešení !!!! Jsem tak nadšený, že to můžu ukázat, protože mě to odradilo od toho, jak to provádět po celé věky. Tak tady jde, změnit všechny vaše css soubory na scss;

Pro stávající projekty

  • Spustit v konzole ng set defaults.styleExt=scss

  • Přejmenovat všechny existující .css soubory na .scss 

  • Manuálně změňte příponu souboru styles v .angular-cli.json z .css na .scss
  • Pokud jste k přejmenování nepoužili nástroj jako je WebStorm Refactor, změňte ručně všechny styleUrls z .css na .scss

Pro budoucí projekty

  • Pro nový projekt stačí použít ng new your-project-name --style=scss

  • Pro všechny nové projekty, které používají scss, použijte ng set defaults.styleExt=scss --global

Nyní budete potřebovat soubor theme.scss ve vašem kořenovém adresáři aplikace:  where themes are

Nyní ve vašem souboru style.scss chcete přidat následující (jak vidíte, že odkazuji na barvu pozadí, ale můžete ji změnit na libovolný prvek, na který chcete stránku libovolně motivovat):

EDIT: Nepotřebujete dát tento vlastní prvek @mixin do vašeho styles.scss, můžete ho umístit do některého z vašich *name*.component.scss a pak ho jednoduše importovat a zahrnout stejným způsobem jako v daném příkladu!

@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);
  }
}

Nyní přejděte do svého souboru theme.scss, který používáte k motivování položek Materiál 2, pokud potřebujete pomoc s tématem zkontrolovat toto: Materiál 2 Github - Theming guide

Nyní otevřete theme.scss a naimportujte svůj style.scss, protože moje theme.scss je v kořenovém adresáři /src/app/theme.scss. Musím nejdřív odejít, abych odkazoval na můj /src/styles.scss globální soubor stylingu takhle;

@import '../styles';

Pak musíme vlastně zahrnout náš nový vlastní @mixin, který jsme vytvořili v V&SCARON;ECH našich tématech (pokud máte více, jako já, tak to změní barvu podle aktuálního vybraného tématu).

Zahrnout to nad skutečný hranatý materiál-téma zahrnovat, jako takový:\t 

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

Pokud máte nějaká témata jako já, přidejte je do stejné polohy jako:

.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);

}

Můžete vidět, že jsem přidal mé theme-color-grabber nad zahrnout, to opravdu nezáleží na tom, zda jeho nad nebo pod skutečným tématem, protože jeho získání barvy témat, které je hlavním bodem.

Můj celý theme.scss vypadá takto:

@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);

}

A konečně můžeme nyní zavolat na naši barvu motivu na pozadí ANYWHERE !, například dávám mat-grid-tile 'primární' barvu (nebere argument color = '', podobně jako ostatní prvky, jako je například panel nástrojů mat). jednoduchým nastavením třídy na odpovídající název třídy:

EDIT: V každém z vašich komponent scss soubory, budete muset import '<path-to>/theme.scss', aby se vaše téma použít na tuto komponentu. Neimportujte theme.scss v styles.scss, protože to vytvoří importní smyčku!

<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>

Konečně náš výsledek bude vypadat takto!

Červené téma aktivní Red theme

Modrý motiv aktivní enter image description here

23
Cacoon

Já osobně dávám ty v css4 proměnných, takže mohu použít ty, bez dovozu, jako je tomu tak

background: var(--color-primary)

Zde je návod, jak nastavit proměnné css4

@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. Nastavit pravidlo stylů aplikace na SASS:
    Aktualizace tématu Vlastní komponenty v době běhu vyžadují použití @mixin, proto by měla být vaše pravidla stylu aplikace SASS (nikoli CSS). -Cli se SASS: https://scotch.io/tutorials/using-sass-s-the-angular-cli

  2. Definujte @mixin pro vlastní komponentu:
    V každé složce, která používá barvy motivu, vytvořte soubor @mixin ve svém souboru .scss. Pro tuto komponentu extrahujte všechny definice barev. A přesuňte je do @mixin takto:

// --- 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. Definujte soubor motivů:
    Budete muset definovat soubor motivů (pokud jste tak ještě neučinili) a vyvolat soubor @mixins, který jsme definovali v tomto souboru:
// --- 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
}

To je ono :-)

Jedná se o několik dalších kroků, které musíte realizovat v pořadí, v jakém je živý motiv k práci (nejsou spojeny s vlastními komponenty, takže je budu jen rychle házet).
- Vytvořit ThemeService, která uloží aktuální téma. Tato služba bude muset aktualizovat OverlayContainer (Úhlový materiál používá tento kontejner pro pozadí modalů, jako jsou vyskakovací okna a rozevírací seznamy).
- Přidání třídy motivu (theme-dark nebo jiné) do jednoho z kořenových prvků v DOM.
- Přidejte třídu mat-app-background do jednoho z kořenových prvků v DOM. Tím se změní barva pozadí a barva písma podle motivu.
- Pro lepší návrh softwaru - pokud máte spoustu témat, může být rozdělení souboru motivů dobrým nápadem pro sviňuchy údržby.

Můžete pokračovat v čtení zde: https://material.angular.io/guide/theming

nebo viz projekt Github: https://github.com/angular/material2/blob/master/src/lib/core/theming/_theming.scss

0
Gil Epshtain

Jsem absolutní nováček a možná je to z dobrých postupů, zbytečných pro tento případ, nebo řešení, které spotřebovává zdroje, ale na myangularthemefile.scss , vytvořil jsem tyto třídy:

@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);
}

A přidávám je do těch elementů html, které potřebuji v šabloně komponenty.

Myslím, že by bylo snadné vytvořit stejnou strukturu pro barvy pozadí ...

Mohlo by to být alternativa k zahrnutí artefaktů sass v každém stylovém souboru komponentu stínového domu pro malé projekty?

0
Josep Alacid