Interruttore modalità Oscuro/Chiaro

OK, penso che il problema fosse che con ogni schema di colori “gli utenti possono scegliere questo…” o qualsiasi altra cosa non era selezionato. ora funziona

2 Mi Piace

Ho un problema strano che sembra interessare solo 2 categorie.

Se in modalità scura, un aggiornamento visualizza il logo del sito Might. Passare alla modalità chiara e poi di nuovo a quella scura lo risolve. Ma si ripresenterà di nuovo con un aggiornamento.

Dopo l’aggiornamento

Per essere più specifici, sembra riguardare solo l’argomento Logos. Altri argomenti nella categoria sembrano a posto. Altri argomenti in questa categoria non sono interessati. Potrebbe essere correlato al fatto che quell’argomento ha i 2 loghi caricati al suo interno?

1 Mi Piace

Correzione, sembra che si verifichi anche al caricamento della pagina. Forse un problema con il rilevamento della modalità scura del browser di Discourse?

2 Mi Piace

Non riesco a riprodurre questo problema. Potresti fornire i passaggi, il browser e il dispositivo che stavi utilizzando?

2 Mi Piace

I nostri utenti hanno segnalato che dopo aver attivato manualmente la modalità scura, il forum torna automaticamente alla modalità chiara una volta che il dispositivo torna alla modalità chiara.

Per riprodurre:

  1. Imposta le impostazioni del tuo dispositivo sulla modalità chiara
  2. Abilita il pulsante di attivazione/disattivazione nella barra laterale
  3. Abilita la modalità scura sul tuo dispositivo
  4. Disabilita la modalità scura sul tuo dispositivo

→ L’istanza di discourse passa alla modalità chiara. Il comportamento previsto è che il forum rimanga in modalità scura a causa della scelta dell’utente di passare manualmente.

Fondamentalmente, sarebbe fantastico avere l’opzione del vecchio comportamento per passare tra modalità scura, modalità chiara e commutazione automatica on/off.

3 Mi Piace

Sto usando Android 10, credo, su un LG G8X ThinQ, quello con il case dual screen.

Se cambio app, quando torno indietro sembra caricare momentaneamente il tema chiaro prima di passare a quello scuro. Simile a come si applicano le skin alle finestre. Il logo chiaro rimane attivo (logo mobile).

@jrgong la spiegazione su come riprodurre e la causa sospetta sono anche mie.

Il browser è in modalità chiara e l’interruttore sta passando/forzando la modalità scura. Poi Discourse sta in parte passando alla modalità chiara.

1 Mi Piace

Vedo un momentaneo lampo dello schema di colori opposto al momento dell’aggiornamento o quando apro un link in una nuova scheda. Vedo anche un lampo simile dopo aver pubblicato una nuova risposta per qualche motivo.

Ho abilitato un tema chiaro e il mio sistema operativo è impostato sulla modalità scura. Quindi vedo la differenza quando torno alla modalità chiara.

Suppongo che i colori vengano scambiati sul lato client, ma sembra che le impostazioni dell’utente non vengano modificate? È possibile aggiornare la preferenza “schema colori” dell’utente al momento dell’attivazione per evitare questo? L’interruttore lato client può fornire una transizione fluida e la modifica della preferenza dell’utente può evitare il breve lampo dello schema di colori opposto al momento dell’aggiornamento?

5 Mi Piace

@jordan.vidrine Volevo solo sollevare di nuovo la questione. :slight_smile:

2 Mi Piace

Dovrebbe comparire nel nuovo menu a discesa dell’intestazione. (Quello che è la “barra laterale” ma in forma di menu a discesa)

1 Mi Piace

@awesomerobot e @jrgong solo un aggiornamento. Questo verrà esaminato :+1:

2 Mi Piace

Purtroppo non è successo. Ma ora so perché.

navigation_menu è impostato su Header-Drop-Down ma non riuscivo a vedere l’opzione. Ma quando ho disattivato add_color_scheme_toggle_to_header è apparsa nel menu a discesa. Quindi sembra che appaia solo in una posizione.

Grazie! :slight_smile:

2 Mi Piace

Questo componente è in grado di selezionare tra schemi di colori “chiaro” e “scuro”, ma non passa tra le modalità chiaro e scuro, in quanto: @media (prefers-color-scheme) non viene rispettato.

Un componente tema che appare così
CSS

@media (prefers-color-scheme: light) {
    .darkonly { display: none; }
}
@media (prefers-color-scheme: dark) {
    .lightonly { display: none; }
}

e HEAD

<script type='text/x-handlebars' data-template-name='/connectors/above-site-header/darkdetector'>
    <span class="darkonly">Scuro</span><span class="lightonly">Chiaro</span>
</script>

Mostrerà il testo “chiaro” anche se la modalità scura è abilitata (o meglio formulato: dirà “scuro” o “chiaro” a seconda della modalità scura del sistema operativo, e indipendentemente dallo schema di colori scelto).

C’è una soluzione per questo? Ci sono parecchie cose che dipendono da queste media query.

3 Mi Piace

Se discourse è simile a Windows XP, prova ad avere il browser/sistema operativo in modalità chiara e discourse in modalità scura. In Windows XP lo schema di colori viene sempre sovrapposto al predefinito.

Quando ci sono più schemi di colori scuri selezionabili dall’utente, compaiono i due menu a discesa e viene visualizzata l’icona di attivazione/disattivazione.

image

Quando c’è un solo schema di colori scuri selezionabile dall’utente, il menu a discesa Scuro scompare e, invece, appare la casella di controllo “modalità scura automatica”.

Quando un utente pensa “Ehi, non voglio che sia automatico, voglio usare l’interruttore” e deseleziona la casella di controllo “automatica”, l’interruttore scompare.

Quindi, per ottenere l’interruttore manuale, devi abilitare il passaggio automatico. :thinking:

5 Mi Piace

Quindi la tacca su un iPhone ottiene il suo colore utilizzando i tag

<meta name="theme-color" media="(prefers-color-scheme: ...)" content="#...">

che vengono iniettati nell’HTML dell’intestazione. Ciò significa che se il tuo dispositivo è in modalità scura e il commutatore ha selezionato uno schema di colori chiaro, o quando il dispositivo è in modalità chiara e il commutatore ha selezionato uno schema di colori scuro, il colore della tacca dell’iPhone non è corretto.

1 Mi Piace

Penso che questo comportamento non sia desiderato:

Attualmente il colore del sistema è impostato su modalità scura. Utilizzo un logo bianco/nero per il tema chiaro/scuro.

  1. Nell’istanza, imposto il tema su Chiaro.
  2. Visito la pagina di un argomento.
  3. Inizialmente, viene caricato il logo corretto ma:
  4. Scorri verso il basso e verso l’alto (l’intestazione dovrebbe passare da logo completo > titolo argomento > logo completo).
  5. Quando si scorre di nuovo verso l’alto (ad esempio, dove il titolo dell’argomento diventa di nuovo logo completo, appare il logo sbagliato (bianco su bianco).
2 Mi Piace

Sto cercando di riprodurlo localmente e anche quando è selezionabile solo uno schema di colori scuro, vedo ancora il menu a discesa, invece della modalità automatica. (nelle impostazioni di amministrazione)

Riproduzione:

  • Installazione vuota di Discourse “out of the box” da stamattina
  • Vedi questo nel mio profilo → interfaccia

  • Rimuovi gli schemi di colori dracula, solarized dark e WCAG dark
  • Torna al profilo
  • Vedi scomparire il menu a discesa e apparire l’intestazione “dark mode” più la casella di controllo

Controllato da showDarkColorSchemeSelector e showDarkModeToggle in interface.hbs. Vedi anche il commento in interface.js

  @discourseComputed("userSelectableDarkColorSchemes")
  showDarkColorSchemeSelector(darkSchemes) {
    // quando viene impostato uno schema scuro predefinito
    // il menu a discesa ha due voci (disabilita / usa predefinito del sito)
    // ma in quel caso mostriamo una casella di controllo
    const minToShow = this.defaultDarkSchemeId > 0 ? 2 : 1;
    return darkSchemes && darkSchemes.length > minToShow;
  },

2 Mi Piace

:star_struck: Grazie per una risposta così dettagliata. Stavo solo “non consentendo” la selezione di questi temi scuri, ora farò dei test eliminando del tutto questi temi.

1 Mi Piace

Sì, questo è un buon caso limite che hai trovato. Questo interruttore funzionerà solo in questo scenario se l’utente ha abilitato anche questa preferenza personale di discourse-core.

Lavoreremo per far funzionare anche questo in quella istanza.

4 Mi Piace