Uno dei tanti disegni di librerie CSS come Sass e Less è il loro vasto assortimento di funzioni di manipolazione del colore come alleggerire, scurire, saturare, ecc. Con la crescente popolarità di CSS-in-JS, la necessità di equivalenti JavaScript (JS) ha seguito l’esempio. Al momento giusto, sono emerse numerose librerie JS per la conversione e la manipolazione del colore per semplificare il lavoro degli sviluppatori web. In effetti, in questo momento è difficile stabilirsi su quale utilizzare. Una libreria che viene consigliata dal popolare JSS La libreria CSS-in-JS si chiama semplicemente “colore“. È piuttosto ricco di funzionalità, avendo più da offrire rispetto a color2k e una dimensione più piccola di chroma.js. Questo tutorial sullo sviluppo web fornirà una panoramica di alcuni dei colori molte funzionalità e metterle al lavoro in un’applicazione a pagina singola angolare (SPA).

Prima di iniziare, potresti voler controllare il nostro Introduzione al tutorial CSS-in-JS.

Come configurare e installare la libreria dei colori JSS

Il modo consigliato per l’installazione colore consiste nell’utilizzare il Node Package Manager (NPM). Il comando è semplicemente:

$ npm install color

O anche npm i color se sei davvero interessato a ridurre al minimo la digitazione.

Quindi puoi fare riferimento ad esso nei tuoi file node.js usando require:

const Color = require('color');

In Angular, dovresti usare importare:

import Color from 'color';

L’esposto Colore object fornisce alcuni diversi costruttori tra cui scegliere, la maggior parte dei quali accetta alcune permutazioni dei valori Red Green Blue (RGB). Accetterà anche un numero limitato di stringhe, come il formato HEX spesso utilizzato:

const color = Color('#FFFFFF');
const color = Color('rgb(255, 255, 255)');
const color = Color({r: 255, g: 255, b: 255});
const color = Color.rgb(255, 255, 255);
const color = Color.rgb([255, 255, 255]);

Sotto le coperte, Corda i costruttori sono gestiti dal colore-stringa biblioteca.

Puoi saperne di più sulle opzioni di stile dinamico leggendo il nostro Styling dinamico con JSS tutorial.

Esplorazione dell’API JS Color

Colori L’API è stata fortemente ispirata da color-js, le cui funzioni di manipolazione sono molto simili a quelle degli strumenti CSS come Sass, LESS e Stylus. Ma, prima di arrivare a quelli, diamo un’occhiata a come convertire i colori in altri formati.

CSS supporta una moltitudine di tipi di colore, da nomi preimpostati come “alice blu“, e “verde acqua” in esadecimale (“#ee652e“), RGB (rgb(138, 238, 130))e RGBA (rgba(0,255,0,0,75)).

Alla ricerca del rgb valore numerico? Chiama il esadecimale() metodo:

color.hex() // #ffffff

Converti un colore in un rgb oggetto:

color.object(); // {r: 255, g: 255, b: 255}

Ecco come impostare un hash del valore del colore e riflettere il modello corrente del colore:

color.rgb().array() // [255, 255, 255]

Per ottenere l’individuo rgb valori, usa questi:

color.red()   //255
color.green() //255
color.blue()  //255

Leggere: Utilizzo di un servizio angolare per leggere le variabili Sass

Funzioni di manipolazione del colore e colori CSS

Sass include molte fantastiche funzioni che possono essere facilmente applicate ai colori CSS. Queste funzioni eliminano parte della difficoltà di scegliere e manipolare i colori. Questi includono scurire e alleggerire, saturare e desaturare, rgba, e altro ancora. Così anche con il colore biblioteca. Ecco un campione:

//lighten by 50%
color.lighten(0.5)     // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
//darken by 50%
color.darken(0.5)      // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
color.saturate(0.5)    // hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)
color.desaturate(0.5)  // hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)
rgba(10, 10, 10, 0.8)

Altre utili funzioni di manipolazione includono:

color.grayscale()      // #5CBF54 -> #969696
color.whiten(0.5)      // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
color.blacken(0.5)     // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)

color.fade(0.5)        // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
color.opaquer(0.5)     // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)

color.rotate(180)      // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)
color.rotate(-90)      // hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)

color.mix(Color("yellow"))        // cyan -> rgb(128, 255, 128)
color.mix(Color("yellow"), 0.3)   // cyan -> rgb(77, 255, 179)

Tutte le funzioni di cui sopra possono essere concatenate insieme:

color.green(100).grayscale().lighten(0.6)

Altre funzioni forniscono informazioni su un colore:

color.isLight()         // true
color.isDark()          // false

Utilizzo di color.js per impostare i colori del tema

Negli ultimi due articoli su CSS-in-JS abbiamo adattato il Utilizzo di un servizio angolare per leggere la demo di variabili Sass impiegare JSS per impostare i colori di un componente angolare tramite @Ingresso parametri. Sebbene JSS e color.js rappresentino un abbinamento perfetto, ciascuna libreria può essere utilizzata indipendentemente dall’altra. Per sottolineare questo punto, applicheremo color.js al Color Service che definisce i colori del tema per l’applicazione.

Nel app.component.scss file, le funzioni Sass vengono utilizzate per impostare il file leggero e buio versioni dei colori di base:

$backgroundColor: rgb(82, 172, 240);
$lightBackgroundCcolor: lighten($backgroundColor, 16%);
$hoverColor: blue;
$darkHoverColor: darken($hoverColor, 20%);
$focusBorderColor: darkgray;
$darkFocusBorderColor: darken($focusBorderColor, 40%);

Immagina una situazione in cui la nostra applicazione è stata creata utilizzando CSS vanilla anziché Sass. Senza l’accesso alle funzioni Sass, avremmo bisogno di un altro mezzo per influenzare i colori di base. Sarebbe un uso ideale della libreria dei colori.

Avremmo comunque accesso ai tre colori di base tramite le variabili CSS:

.color-demo-app {
  --background-color: rgb(82, 172, 240);
  --hover-color: blue;
  --focus-border-color: lightgray;
}

Ora in caricaColori()possiamo aggiungere due ulteriori chiamate al nuovo setMapColor() funzione per ogni proprietà CSS leggero e buio variazione:

import Color from 'color';

const CSS_PREFIX = "--";
const CSS_SUFFIX = "color";
const CSS_DELIMITER = "-";

export enum PropertyNames {
  background  = 'background',
  hover="hover",
  focusborder="focus-border"
}

public loadColors() {
  // Read the custom property of body section with given name:
  const appElement = 
    document.getElementsByClassName('color-demo-app');
  if (appElement && appElement.length > 0) {
    const appStyles = window.getComputedStyle(appElement[0]);
    Object.values(PropertyNames).forEach(propertyName => {
      const cssVariableName = CSS_PREFIX
        + `${propertyName}${CSS_DELIMITER}`
        + CSS_SUFFIX;
      const cssVariableValue = 
        appStyles.getPropertyValue(cssVariableName)
                  .replace(' ', '');
      if (cssVariableValue) {
        this.setMapColor(propertyName, cssVariableValue);
      }
      // load light color 
      this.setMapColor(
        propertyName, 
        Color(cssVariableValue).lighten(0.2).hex(),
        ColorOptions.light
      );
      // load dark color 
      this.setMapColor(
        propertyName, 
        Color(cssVariableValue).darken(0.2).hex(),
        ColorOptions.dark
      );
    });

    this.setThemeDefaults();
  }
}

Estrazione del codice per impostare il _colorMap l’immissione in una funzione di supporto ha senso solo poiché dobbiamo farlo tre volte per ogni proprietà CSS:

private setMapColor(
  propertyName: PropertyNames, 
  value: string,
  colorOption = ColorOptions.standard 
) {
  const colorMapKey = <ColorProperty>{
    name: propertyName,
    option: colorOption
  };
  this._colorMap.set(
    JSON.stringify(colorMapKey),
    value
  );
}

Puoi vedere come tutto il codice sopra funziona insieme nel file demo stackblitz.

Conclusione

Ci sono alcuni motivi per amare le librerie di colori come color.js. In primo luogo, l’utilizzo di JavaScript per manipolare i colori fornisce un ambito aggiuntivo e un’esecuzione dinamica per realizzare cose che sarebbero piuttosto difficili utilizzando CSS, anche con l’aiuto di librerie di estensioni come Sass e Less. Un’altra caratteristica interessante è la loro facilità d’uso, almeno per quanto riguarda color.js.

Leggi di più Tutorial CSS e sviluppo web visitando la nostra sezione di programmazione CSS.