CSS Temi e parametri

[sarcaz]

Ciao a tutti, mi sono creato un nuovo stile visuale, assegnato all'applicazione e creato il css all'interno dello stile.
Fino a qui tutto ok, però mi ricordo dal precedente corso che è possibile a livello di tema gestire le variabili all'interno del css.
Ho inserito la variabile $fondocampo nel css creata nel tema però non riesco ad assegnargli il valore nell'evento onstart.

Cosa mi sto perdendo?

C'è per caso un esempio?
Grazie

[claudio.susini]

Scrivo un howto di riepilogo che dovrebbe funzionare:
- nella propria libreria creare una classe di tipo theme es. mioTema
- aggiungere alla classe le property che si vuole aggiungere al css e modificare a runtime es. mioColore
- inserire la property sul proprio css es. color: $mioColore;
- impostare sulle proprietà della APP il proprio theme
- valorizzare la property ad esempio sull'evento onStart della APP:
app.theme.mioColore = "#ffffff";
app.defineStyle(); //provoca l'aggiornamento

Spero sia utile, Saluti

Claudio

[claudio.susini]

Riassumo come ho fatto io:
-nella propria libreria creare una classe di tipo theme ed aggiungere tante proprietà quante le variabili che si vuole utilizzare sul css ( color: $nomeproprietà; )
-nella propria App impostare la proprietà theme con la classe creata in precedenza
-da codice impostare il valore della variabile app.theme.nomeproprietà = "#ffffff";
-aggiornare lo stile app.defineStyle();

Spero di essere stato chiaro, saluti!

[g.lanzi]

Rispondo, anche se in ritardo, a favore della community (visto che il caso è già stato risolto con @sarcaz).

Immaginiamo di avere un'app con un tema personalizzato nel quale è presente la proprietà CustomMainColor. Nel css si può scrivere $CustomMainColor al posto del codice rgb del colore da assegnare alla regola css, quindi nell'applicazione è possibile usare questo codice per assegnare un colore diverso (nel caso dell'esempio @FF00FF).

[code:000000]
app.theme.CustomMainColor = "#FF00FF;
app.styleDefined = false;
app.defineStyle();
[/code:000000]

[poidomani]

ottimo, provo subito

[g.lanzi]

Il caso trattato in questo topic è stato oggetto di analisi e approfondimenti durante sessioni di assistenza remota separate, nel contesto delle quali è stato definitivamente risolto.

Nel caso in questione si vuole avere un css che erediti i colori del tema, come $primary, per usarli con oggetti non ionic. Per fare questo è possibile scrivere nel proprio css una classe che come colore abbia $primary.

Però se si cambia il tema a run-time questa soluzione non è sufficiente, perché il css dell'applicazione è creato a compile time e non a run time.

Per ottenere lo stesso comportamento è possibile:
1) mettere la classe css
2) impostare anche la regola nell'oggetto con una clausola inline

In questo modo il colore diventa completamente dinamico ed è anche possibile vederlo in anteprima (è per vederlo in anteprima che bisogna lasciare anche la classe css).