Come aggiungere una classe body specifica per la modalità scura (o chiara)?

Sembra che al momento non ci sia alcuna classe specifica.

Ho trovato questo ma non funziona poiché l’ID del tema è lo stesso per la modalità scura e chiara (che definisce lo schema dei colori, suppongo).

Suppongo che uno script breve potrebbe aiutare? E, forse aggiungere questo al core di Discourse?

Ti dispiacerebbe spiegare perché hai bisogno di classi specifiche aggiunte al body per la modalità dark o light?

Questa funzionalità principale non consente ciò di cui hai bisogno?

Allo staff del forum che sto migrando non piace una specifica variabile di colore generata (--tertiary-very-low) che crea questo specifico colore marrone:

Vorrebbero modificarla, e sembra che non possa davvero cambiarla poiché è generata E non esiste una classe specifica per la modalità scura.

Tuttavia, mi sono imbattuto in questa informazione:

Non so se sia valida, non ho ancora potuto provarla, troppe cose da fare al momento :sweat_smile:. Ma se funziona, andrà bene. Sarebbe anche meglio, in effetti.

2 Mi Piace

Abbiamo (scusate, dirò noi dato che sono con @Canapin a fare le modifiche sul nostro forum) creato un tema scuro utilizzando il preset chiamato “Café crème” nella versione francese di Discourse (“caffè” immagino) e abbiamo appena cambiato il colore del :heart: in rosso invece che marrone.
La cosa strana di questo tema è che gli hyperlink hanno quasi lo stesso colore del testo.
Quindi quando sono un link incorporato, si vedono a malapena:


(sì, le ultime due parole “cliquez-ici” sono un link a una pagina web…)

Quindi la nostra idea era di renderli un po’ marroni, in modo che risaltassero. Ma quando modifichiamo l’impostazione quaternary nella palette dei colori, un sacco di colori cambiano: lo sfondo della “bolla” dietro il DM cambia in qualcosa di più simile a cacca di uccello rispetto al marrone mostrato nel primo messaggio di @Canapin. Cambia anche la casella del messaggio in alto (la casella “l’email in uscita è stata disabilitata”) in questo stesso colore di cacca di uccello.

Quindi l’idea era prima di usare il css per colorare gli hyperlink ma non abbiamo ancora capito come fare.

1 Mi Piace

Usare .cooked a come target CSS dovrebbe funzionare per impostare un colore personalizzato per questi link.

Mentre il nostro sistema principale ora consente l’uso di scelte di schema di colori scuro/chiaro per le loro modalità corrispondenti, dovresti anche essere in grado di usare la media query CSS per le modalità scuro/chiaro in questo modo:

1 Mi Piace
@media (prefers-color-scheme: dark) {
    .cooked a, .d-editor-preview a {
        color: var(--primary-low-mid);
    }
}

Ho fatto il lavoro. Grazie!

Oops.
No, non ha funzionato.

Per favore, correggimi se sbaglio. prefers-color-scheme si basa sulla preferenza del dispositivo, non sul tema Discourse effettivamente selezionato?

Sul mio dispositivo Windows, ho impostato un tema scuro. Quindi i siti web che utilizzano la preferenza del mio dispositivo mostreranno, se possibile, un tema scuro.

Ma sul mio forum, ho deliberatamente scelto di utilizzare un tema chiaro, non scuro.

La media query prefers-color-scheme viene ancora caricata nonostante io stia utilizzando un tema chiaro:

Tema chiaro, nessuna modalità scura,

Tuttavia, la regola per il tema scuro viene comunque applicata:

Schermo intero:

1 Mi Piace

Mi dispiace, ti ho frainteso intendendo le impostazioni di sistema della modalità scura, attivando la modalità scura sul forum.

Quindi, stai usando personalmente lo schema di colori chiaro, ma i tuoi utenti usano lo schema di colori scuro?

Lo screenshot precedente mostrava la modalità scura in azione, ma la tua recente risposta afferma che stai usando la modalità chiara.

Ciao, scusa, sì, non è chiaro, soprattutto perché stavo parlando di due cose dello stesso tipo ma con schemi di colori diversi. Inoltre, è stato un po’ confuso per me.

Quindi la mia domanda sarebbe: su Discourse, come faccio a sapere quale schema di colori viene utilizzato, indipendentemente dalle preferenze della modalità scura/chiara del dispositivo?

Se ho capito bene:
Se il mio dispositivo (Windows 10) è impostato sulla modalità scura, ma seleziono uno schema di colori chiaro in Discourse, la media query (prefers-color-scheme: dark) nel CSS del mio forum restituirà comunque una sorta di “vero” e le mie regole annidate verranno applicate, anche se ho scelto uno schema di colori chiaro sul mio forum (anche se Windows è impostato sulla modalità scura).

Quindi: come faccio a sapere, nel codice HTML di Discourse, se sto attualmente utilizzando uno schema di colori chiaro o scuro? Non ho trovato alcuna classe genitore come “light-color-scheme” o “dark-color-scheme”. Quindi non posso differenziare/targettizzare schemi di colori specifici in CSS e creare regole solo per uno o l’altro.

1 Mi Piace

Grazie per il chiarimento, ora ho capito.

Non aggiungiamo alcuna classe al corpo in base allo schema di colori attualmente selezionato dall’utente.

Se posso approfondire, il motivo è che non ti piace il colore che le nostre funzioni di colore generano per --tertiary nel tuo schema scuro attualmente selezionato?

Cosa vorresti ottenere tramite una classe del corpo che senti di non poter fare attualmente?

Sì, esattamente :slight_smile:

Ora che leggo questa domanda… non sono sicuro, dato che l’unico modo per sostituire un colore generato, per quanto ne so, è

:root {
  --primary-medium: #666666;
}

Ma essendo un selettore di root, una classe sull’elemento html o body non potrebbe puntare a uno schema colore prima di :root.
Quindi… non lo so.

Ma in breve, l’idea sarebbe quella di cambiare un colore generato specifico per uno schema colore specifico. :person_shrugging:

Non è grave se non fosse possibile, comunque. Abbiamo fatto alcuni esperimenti con i colori dei nostri schemi e siamo attualmente abbastanza soddisfatti dei colori generati. :slight_smile: Potrebbe essere migliore, ma è ben lungi dall’essere un grosso problema. :slight_smile:

1 Mi Piace

Se lo desideri, esiste una sorta di soluzione alternativa nascosta.

Puoi creare una cartella e inserirvi solo un file about.json.

In realtà ho fatto questo per creare uno schema di colori solarized light, perché volevo specificare le mie varianti, piuttosto che fare affidamento sulle funzioni di colore integrate.

Ecco il file about.json che ho creato.

Quindi installeresti questo “tema”, che a sua volta installerebbe questo schema di colori sul tuo forum. A quel punto, saresti in grado di renderlo disponibile per l’uso anche su altri temi.

{
  "name": "Solarized Light",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
  },
  "color_schemes": {
    "Solarized Light": {
      "primary": "002B36",
      "primary-high": "4C6869",
      "primary-medium": "7E918C",
      "primary-low-mid": "A4AFA5",
      "primary-low": "D6D8C7",
      "primary-very-low": "F0ECD7",
      "secondary": "FCF6E1",
      "secondary-very-high": "E8E6D3",
      "secondary-high": "97A59D",
      "secondary-medium": "6C8280",
      "secondary-low": "325458",
      "tertiary": "0088cc",
      "tertiary-high": "329ED0",
      "tertiary-medium": "7EBFD7",
      "tertiary-low": "D6E6DE",
      "quaternary": "e45735",
      "header_background": "FCF6E1",
      "header_primary": "002B36",
      "highlight": "ffff4d",
      "highlight-high": "BCAA7F",
      "highlight-medium": "E3D0A3",
      "highlight-low": "FDF9AD",
      "danger": "e45735",
      "danger-low": "F8D9C2",
      "success": "009900",
      "success-medium": "4CB544",
      "success-low": "CFE5B9",
      "love": "fa6c8d",
      "love-low": "FCDDD2"
    }
  },
  "modifiers": {
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
2 Mi Piace

Ricordo di averlo visto molto tempo fa, quando lavoravo più a fondo sulle mie installazioni di Discourse!

Decisamente una buona soluzione alternativa. Grazie. La considererò la soluzione appropriata, anche se potrebbe essere considerata un po’ “hacky”.

1 Mi Piace

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.