Ciao,
noi abbiamo inserito delle variabili root nei css il cui valore è in file json, uno per la dark mode e uno per la light mode, poi dopo il login, in base all’utente e al suo stile associato, viene chiamata una funzione in js che sostituisce le varibili del file css con i valori del json.
es:
nel file css abbiamo impostato le variabili con valori iniziali
–EVO-background-body: #F5F5F5;
–EVO-background-color-header-container: #1E3478;
–EVO-background-color-panel-container-list: ‘trasparent’;
–EVO-background-menu-container-upbar: #DDDDDD;
–EVO-color-menu-bar-comand: #000000;
–EVO-background-color-popup-menu-hover: #118f9a;
–EVO-color-popup-menu-hover: #FFFFFF;
–EVO-background-popup-cell-text: #dddddd;
–EVO-border-popup-border-thin: #252730;
–EVO-background-color-popup-frame-caption: #1E3478;
–EVO-color-popup-frame-caption: #ffffa0;
–EVO-background-color-popup-frame-content: #FFFFFF;
–EVO-background-color-filter-header: #1E3478;
–EVO-color-filter-header: #FFFFFF;
–EVO-background-color-filter-ok-button-filter-clear-button: #1E3478;
–EVO-color-filter-ok-button-filter-clear-button: #FFFFFF;
–EVO-border-filter-ok-button-filter-clear-button: #FFFFFF;
…
body {
font-family: Calibri, Helvetica, Arial, sans-serif !important;
background: var(–EVO-background-body);
}
ecc….
nel file json abbiamo messo i valori definitivi
{
“–EVO-background-body”: “#1f1c38”,
“–EVO-background-color-albero-anagrafica”: “#474363”,
“–EVO-background-color-anagrafica-counter”: “#8682a6”,
“–EVO-background-color-caption-list”: “#2c2947”,
“–EVO-background-color-caption-list-light”: “transparent”,
“–EVO-background-color-chat-inizio”: “#e4e4e4”,
“–EVO-background-color-checkbox”: “#FFFFFF”,
“–EVO-background-color-combo-activator-panel-value-activator”: “#6a658d”,
“–EVO-background-color-combo-header”: “#d2dbf966”,
“–EVO-background-color-combo-option”: “#6a658d”,
“–EVO-background-color-combo-option-hiligth”: “#d2dbf966”,
ecc…
in Foundation, nell’after login viene chiamata una funzione che cilcla il json in questione, e passa ad una funzione in js il valore del json per andarlo ad assegnare alla variabile della classe css.
la funzione in js
function genericChangeback(sParam) {
if (sParam) {
try {
let objValues = JSON.parse(sParam);
Object.keys(objValues).forEach(function (key) {
document.documentElement.style.setProperty(key, objValues\[key\]);
//console.log(‘sono dentro’);
});
} catch {
//console.log(‘ERRORE: La funzione richiede una stringa con formattazione JSON’);
}
}
}
il document contiene al suo interno già tutte le classi css e vengono sostituiti i valori
il risultato
light
dark
Spero di non essermi spiegato da caino e che ti possa essere utile.
Ciao
