FC DiviChild

# Colori

La versione 5 del DiviChild introduce una nuova gestione dei colori.
Sono definite di default tre famiglie di colori, più i colori per i messaggi di sistema.
Le tre famiglie principali sono:

  • neutral
  • primary
  • secondary

Tutte e tre le famiglie sono espresse con l'intero range di pesi da 50 a 900, quindi avremo ad esempio $neutral-50 o $primary-500 e così via.

Ogni famiglia ha poi un sottoinsieme di variabili semantiche a tre valori ciascuna:

  • light
  • main
  • dark

Quindi avremo ad esempio $primary-light,$primary-main e $primary-dark.
Di default i valori usati nelle tre nomenclature sono i rispettivi:

  • light: 200
  • main: 500
  • dark: 900

# Default Palette

Elenco delle variabili principali (semantiche) della palette di default:

Colore CSS Var Default Darkmode
Primario --fc-primary-main #05aef3 #05aef3
Primario Light --fc-primary-light #82d7f8 #82d7f8
Primario Dark --fc-primary-dark #005b9b #005b9b
Secondary --fc-secondary-main #ee0076 #ee0076
Secondary Light --fc-secondary-light #f38fbd #f38fbd
Secondary Dark --fc-secondary-dark #8a035d #8a035d
Neutral --fc-neutral-main #9fa3a9 #ecf2f7
Neutral Light --fc-neutral-light #ecf2f7 #f6fbff
Neutral Dark --fc-neutral-dark #212529 #9fa3a9

# Dark Mode

Nella versione 5 è stata introdotta la possibilità di gestione del darkmode, ovvero l'adattamento dei colori, attraverso apposita media query, alla colorazione di default dell'interfaccia del sistema operativo adottata dall'utente. Questa feature si basa sul cambiamento del valore assegnato alle variabili "semantiche" css che si adattano alla colorazione scelta.
Al momento sono "reattive" alla media query prefers-color-scheme soltanto alcune proprietà come il background del body, il colore del font, i bordi e alcuni background secondary che possono essere usati laddove serve.

# Gestione Dark Mode

Per gestire il dark mode è necessario un approccio basato sulle variabili semantiche (questo per facilitare il lavoro e l'uso delle variabili sottoposte a cambiamento).
Un'occhiata al file principale delle variabili scss darà un quadro più preciso.

In sintesi, facendo un esempio, se intendessimo sottoporre il background di un box a cambiamento, potremmo definire, a livello scss, una variabile come $box-bg-light e la sua variante dark $box-bg-dark.

A livello di trasformazione in css le due variabili confluiranno nell'unica variabile --fc-box-bg sottoposta a media query:

:root {
    --#{$prefix}-box-bg: #{$box-bg-light};

    @media (prefers-color-scheme: dark) {
        --#{$prefix}-box-bg: #{$box-bg-dark};
    }
}

# Il data attribute "colorscheme"

Attraverso il data attribure data-colorscheme="", che accetta i valori "light" e "dark", è possibile gestire lo schema colori a prescindere dalle impostazioni del browser dell'utente. Questa tecnica richiede però l'uso di Javascript.

# I mixin color scheme

Per facilitare la stesura delle variabili css, nel file _root.scss sono presenti due mixin scss color_scheme_light() e color_scheme_dark(), usati poi nelle direttive :root{} e nei selettori body[data-colorscheme="light"] {} e body[data-colorscheme="dark"] {}.

Questo approccio è consogliato anche per lo stile custom, e nello specifico per il file custom/_root-custom.scss

# Palette Generators

http://mcg.mbitson.com/ (opens new window)
http://palettegenerator.stagingfattoria.it/ (opens new window)
https://www.webfx.com/blog/web-design/material-design-color-generators/ (opens new window)

← Flex Grid →