Come si fa a cambiare colori del tema? (Manca una guida semplice)

[a-greselin]

Devo cambiare la palette di colori di un sito. Non essendo uno sviluppatore web non riesco a colmare le lacune nella documentazione.

[a-greselin]

Ho trovato un modo:

ℹ️ Requisiti

• Sass:

  npm install -g sass
  

• Un tema figlio di design-comuni-wordpress-theme attivo, qui uso …/wp-content/themes/design-comuni-wordpress-theme-child.

Installa Bootstrap Italia nella cartella di installazione del tema padre

cd …/wp-content/themes/design-comuni-wordpress-theme && sudo npm install

Prendi la definizione del colore --bs-primary dal sito, convertila in HSB (puoi usare https://colorizer.org) e scrivi la terna HSB in un SCSS che importa la libreria bootstrap-italia.scss [rif.]:

sudo vi …/design-comuni-wordpress-theme-child/bootstrap-italia-custom.scss

$primary-h: ⟨H⟩;
$primary-s: ⟨S⟩;
$primary-b: ⟨B⟩;

@import '../design-comuni-wordpress-theme/node_modules/bootstrap-italia/src/scss/bootstrap-italia.scss';

Compila con

cd …/wp-content/themes/ && sudo sass --style compressed --load-path=design-comuni-wordpress-theme/node_modules design-comuni-wordpress-theme-child/{bootstrap-italia-custom.scss,bootstrap-italia-custom.css}

In functions.php,

sudo vi …/wp-content/themes/design-comuni-wordpress-theme-child/functions.php

aggiungi

add_action( 'wp_enqueue_scripts', function() {
    // Carica il CSS con le modifiche ai colori
    wp_enqueue_style(
        'bootstrap-italia-custom',
        get_stylesheet_directory_uri() . '/bootstrap-italia-custom.css'
    );
}, 999);

[astagi]

Grazie @a-greselin! Chiudo come risolta.

[a-greselin]

È possibile aggiungere questa guida alla documentazione? Qui è difficile trovarla

[enrimk]

aggiungere questa guida alla documentazione

Nel caso, bisogna però specificare che queste istruzioni aggiungono al child theme un'altra copia del css di BI, che già non è snello di suo; non sostituiscono quella caricata dal tema padre, e tenerle entrambi è un po' eccessivo.

Tuttavia, il css BI incluso nel tema (>600kB!) è copiato da quello compilato per le pagine statiche? Allora si deve anche tenere conto che ci sono differenze con la versione "base" inclusa qui prendendola da node_modules. Togliendo l'originale, può darsi che poi manchi qualche regola css che nel tema è usata.
D'altra parte, le aggiunte scss per i comuni forse andrebbero rivalutate e riorganizzate? A cominciare dall'override con valori letterali che rende scomodo e verboso il theming via css parziali; poi regole forse non sempre utili o doppioni, ecc.