Selettore di dati per temi

Sviluppatore
1

Ciao,

Vorrei proporre un selettore dati per i temi per rendere più semplice la modifica di temi completi da un componente.

Non sono sicuro di quanto sia unica la mia situazione, ma sto usando un esempio in cui ho due istanze di Graceful installate, così posso utilizzare una palette scura e una chiara. Sto usando un componente tema per apportare modifiche a questi temi remoti, come ad esempio cambiare il pulsante “Mi piace”. Tutto funziona benissimo per le modifiche universali gestite dagli stili, ma il problema sorge quando voglio apportare una modifica alla versione scura che non deve apparire nel tema chiaro. Non vedo un modo per usare il CSS per apportare modifiche in base all’ID del tema. Per fare ciò che voglio attualmente, dovrei creare componenti tema individuali per ogni tema per le piccole modifiche che desidero.

Forse qualcosa come [data-theme-id].

Se ciò è già possibile, sentiti libero di ignorarmi; penso solo che sarebbe di grande aiuto per i siti che vogliono apportare modifiche a più temi senza accumulare troppi componenti nell’elenco.

2

Non sono sicuro di aver capito, ma puoi aggiungere direttamente del CSS in quei temi chiaro e scuro.

A mio parere, i componenti sono davvero ottimi per modifiche universali come margini, display, padding e larghezza, ma per i colori, a meno che tu non usi variabili, è meglio modificare direttamente i temi.

Sembra una complicazione inutile di una soluzione già disponibile :thinking:

3

Ma modificare i temi remoti fa sì che le tue modifiche vadano perse al prossimo aggiornamento, vero?

Non si tratta solo di colori, ma di apportare modifiche specifiche a temi particolari da un singolo componente, senza la necessità di creare ulteriori componenti e applicarli solo ad alcuni temi.

4

Hai ragione. Per un tema remoto, puoi utilizzare tre componenti:

universal theme fix per le modifiche condivise
e dark theme fix / light theme fix per le modifiche specifiche (come i colori). Puoi collegare un componente a un solo tema.

Light graceful avrà universal e light fix
Dark graceful avrà universal e dark fix

In ultima istanza, puoi aggiungere !important a una riga di quelle correzioni light/dark se una modifica non funziona.

5

Suppongo tu abbia ragione. Avevo già pensato a un componente universale e poi a un componente per tema, quindi tre in questo esempio, ma sembrava eccessivo avere tre repository quando forse si sarebbe potuto risolvere facilmente con un selettore dati, dato che quasi tutto il resto in Discourse ne ha uno.

Come nota, l’ID del tema si trova nel meta name come content id e la keyword è discourse_themes_id, mentre nel link per cambiare tema è presente [data-id=“#”], almeno se ispeziono il link del selettore del tema a hamburger creato da quel componente installato qui su Meta o in uno dei miei siti di test. Quindi non è come se le informazioni non fossero presenti in Discourse.

6

Se aggiungi questo alla scheda header del tuo componente del tema

<script type="text/discourse-plugin" version="0.8">
  const themeSelector = require('discourse/lib/theme-selector');
  const currentThemeId = themeSelector.currentThemeId();
  document.body.dataset.themeId = currentThemeId;
</script>

verrà aggiunto un attributo data-theme-id al tag <body>, che potrai utilizzare nel modo seguente:

[data-theme-id="1"] {
  // CSS per il tema chiaro
}

[data-theme-id="2"] {
  // CSS per il tema scuro
}
7

In questo caso molto specifico, potresti essere in grado di utilizzare i nostri helper SCSS. Ecco un esempio dal core, ma lo stesso dovrebbe funzionare in un tema:

Puoi anche utilizzare @is-dark-color-scheme

In questo modo, il tuo componente non dipenderà dagli ID del tema, che cambierebbero se installassi il tema su un altro sito.

8

Siete entrambi fantastici, grazie mille :slight_smile: