Wiki - Tema scuro

[jeremie2]

Salve a tutti,
oggi ho caricato su Launchpad delle modifiche al css in modo che, in base alle impostazioni di sistema o del browser, venga visualizzato il wiki con un tema scuro. Molto probabilmente dovrete ripulire la cache di ubuntu-it.org per visualizzare il nuovo tema.
Fate presente se riscontrate anomalie

Alcuni esempi di pagina:
- Pagina standard: Hardware/DispositiviPartizioni/Partizioni
- Sotto-portale: Hardware/DispositiviPartizioni
- Portale: Hardware
- Home del wiki: Documentazione

- Per il momento non ho alterato lo stile delle tabelle. Pertanto se in una pagina si scorgono "patacconi bianchi"... 99% si tratta di una tabella.
Il fatto è che nelle pagine sono state spesso elaborate in modo tale che presentino intestazioni scure e corpo della tabella chiaro. Quindi è un po' complicato impostare un colore di sfondo che non faccia a pugni con uno di quelli esistenti o con i colori del testo. Va trovato un compromesso ma per non rimanere impantanato al momento ho lasciato le tabelle come erano.

- Nel complesso ho cercato di non esagerare con lo scuro ed evitare contrasti troppo forti. Una scelta più "osè" è il viola-melanzana per le finestre in cui si inseriscono comandi da terminale, codice dei file, ecc... che comunque ricorda molto il terminale Ubuntu e stacca la monotonia della scala dei grigi.
Ho finito per inserirlo anche come sfondo dell'indice della pagina (tipicamente situato in alto a destra, se attivo).

- A proposito dei comandi da terminale, già che c'ero nel tema chiaro ho reso lo sfondo più scuro. Rimane sempre un grigio tenue, ma ora si differenzia maggiormente dal colore di sfondo della pagina.

Non ricordo se c'erano altri dettagli da mettere in evidenza, comunque sia l'obiettivo principale era quello di evitare la laserata negli occhi quando si passa da un sito con tema scuro al wiki (..a meno di avere impostato delle estensioni che adeguano il tema).

Ciao per il momento!


:::::::::::::::::::::::::::::
Link a pagina di prova per le tabelle jeremie2/Prove02

[jeremie2]

Nuova modifica che porta il tema scuro anche alle tabelle.
Si tratta di un compromesso. Qui si vede che il testo in grigio è abbastanza chiaro sul fondo scuro e abbastanza scuro su fondo chiaro.... non è il massimo ma al momento ha un suo equilibrio.

Magari sarà da ripensare uno stile delle tabelle da utilizzare sulle pagine che tenga di conto dei due differenti temi

[jeremie2]

Aggiungo link a una pagina di prova per le tabelle, in modo da avere sott'occhio alcuni casi standard con e senza colori: https://wiki.ubuntu-it.org/jeremie2/Prove02

[ivantu]

Grazie!

Buongiorno, una domanda...
funziona solo con dispositivi mobile (tablet e smartphone), vedo....

[jeremie2]

Grazie!

Buongiorno, una domanda...
funziona solo con dispositivi mobile (tablet e smartphone), vedo....

Funziona anche da computer.

Probabilmente devi svuotare la cache del browser. Io su Firefox per ripulire solo quella di ubuntu-it.org vado in Impostazioni → Privacy e sicurezza → Gestisci dati e metto in ricerca ubuntu-it.org ed elimino solo i suoi dati.
Se invece non interessa preservare la cache di altri siti, tramite Ctrl + Shift + Canc si può fare tutto in un botto.

[ivantu]

Grazie!

Buongiorno, una domanda...
funziona solo con dispositivi mobile (tablet e smartphone), vedo....

Funziona anche da computer.

Probabilmente devi svuotare la cache del browser. Io su Firefox per ripulire solo quella di ubuntu-it.org vado in Impostazioni → Privacy e sicurezza → Gestisci dati e metto in ricerca ubuntu-it.org ed elimino solo i suoi dati.
Se invece non interessa preservare la cache di altri siti, tramite Ctrl + Shift + Canc si può fare tutto in un botto.

No. purtroppo no a me.
Solo da smartphone Android, browser Chrome.

edit: pulito cache e cookies.
Appena installato la mia Lubuntu 22.04 su un'altra partizione nuova, perché avevo dei problemi su quella che utilizzavo frequentemente i giorni scorsi precedenti.

edit:
Mi sa... che i temi scuri su Lubuntu con le librerie Qt, con Chrome da computer non funzionano come dovere.
Ho verificato ora con Firefox tema scuro, in LXqt, funziona. .... Chrome, no.

[jeremie2]

Mi sa... che i temi scuri su Lubuntu con le librerie Qt, con Chrome da computer non funzionano come dovere.

Impostando il tema classico funziona?

[ivantu]

mi dispiace che posto al mio problema, porta la discussione fuori tema. visto che è un problema tecnico. Creerò una nuova discussione tecnica.
Sapevo già del problema temi scuri in Chrome con Lxqt, ma non tanto da dover indagarci.

Mi sa... che i temi scuri su Lubuntu con le librerie Qt, con Chrome da computer non funzionano come dovere.

Impostando il tema classico funziona?

Per niente. No. Qualsiasi tema: sia Gtk sia classico, sia Qt.

Ho fatto le seguenti prove:
Con Firefox --> Funziona.
Con Microsoft Edge --> Funziona
Con Chrome:
- creato un nuovo utente profilo --> Non funziona
- rinominato con una nuova configurazione profilo utente ~/.config/google-chrome --> Non funziona


solo io ho il problema con Chrome in LXqt?

edit: l'unica cosa funzionante in Chrome, è l'icona con omino, che cambia lo sfondo da bianco a grigio. Lasciando inalterato il riquadro testo

[jeremie2]

mi dispiace che posto al mio problema, porta la discussione fuori tema.

Figurati, questa discussione l'ho aperta anche per raccogliere le problematiche che saltano fuori. Poi per indagare più nel dettaglio può essere meglio aprire una discussione in una sezione più tecnica, ma intanto hai fatto benissimo ad avvisare

Impostando il tema classico funziona?

Per niente. No. Qualsiasi tema: sia Gtk sia classico, sia Qt.

Ok, peccato

[jeremie2]

Supponendo di eliminare le attuali impostazioni dei grigi impostate in gran parte delle tabelle attuali, si potrebbe ad esempio facilmente ottenere un risultato come questo:

Tema chiaro:


Tema scuro:

[xavier77]

Supponendo di eliminare le attuali impostazioni dei grigi impostate in gran parte delle tabelle attuali, si potrebbe ad esempio facilmente ottenere un risultato come questo:

Tema chiaro:


Tema scuro:

Mi piace molto
Il grigio chiaro evidenzia le tabelle separandole visualmente dalla pagine e il risultato su tema scuro è gradevole.
Queste modifiche non sono ancora state caricate, vero?
Comunque grazie del lavoro che stai facendo

[jeremie2]

Queste modifiche non sono ancora state caricate, vero?

No, ho solo cambiato sul momento alcuni valori del css tramite gli strumenti di sviluppo di Firefox (clic dx in un punto qualsiasi → Analizza), e quindi ho fatto uno screenshot.

Il brutto della faccenda è che per dare alle tabelle il classico stile con le righe di intestazione colorate di grigio e grigio chiaro, abbiamo molte tabelle infarcite di:

Codice: Seleziona tutto

rowstyle="background-color: #cccccc;"
<#cccccc>
<#f7f7f7>
ecc...

Gli screenshot che ho preso riguardano le tabelle senza colori della pagina di prova, cioè quelle dalle quali ho rimosso tutti quei tag in modo che non vadano a sovrascrivere i colori impostati nel css.

Morale della favola, quei tag andrebbero rimossi ovunque......
Forse @mapreri potrebbe impostare uno script per automatizzare la cosa (da valutare con molta attenzione). A mali estremi, almeno sulle pagine principali, potrei anche procedere a manina o in modalità semi-automatica (ho una certa esperienza in imprese pazzoidi di questo genere...).

Comunque sia sono sempre più convinto che occorra andare in questa direzione.

[xavier77]

Altra cosa che ho notato:



I titoli dei paragrafi di 4° livello vengono in nero.
Vengono usati poco in realtà, ma quel colore li rende quasi indistinguibili dallo sfondo.
NB: i suddetti paragrafi li ho modificati poco fa, se non ci fosse stato il tema scuro non me ne sarei neanche accorto

Una cosa che ho pensato prima di andare avanti, e non di poco rilievo.
Per un discorso di accesso universale (che dovrebbe sottendere al nostro codice di condotta, a voler essere pignoli) dobbiamo garantire un certo standard di fruibilità a persone ipovedenti, con disturbi visivi, cognitivi ecc. ecc. Prima di andare avanti, abbiamo modo di fare alcune verifiche, anche molto di base? E se sì come?
Chiedo scusa se sollevo solo adesso, ma prima non mi era venuto in mente.

[jeremie2]

I titoli dei paragrafi di 4° livello vengono in nero.
Vengono usati poco in realtà, ma quel colore li rende quasi indistinguibili dallo sfondo.

Col prossimo aggiornamento li correggerò!

Per un discorso di accesso universale (che dovrebbe sottendere al nostro codice di condotta, a voler essere pignoli) dobbiamo garantire un certo standard di fruibilità a persone ipovedenti, con disturbi visivi, cognitivi ecc. ecc. Prima di andare avanti, abbiamo modo di fare alcune verifiche, anche molto di base? E se sì come?

Non saprei. Questa discussione può eventualmente servire per raccogliere feedback anche su questi aspetti.
Facendo una ricerca mi ha destato interesse questo documento di Mozilla https://developer.mozilla.org/en-US/doc ... JavaScript


Nel frattempo Mattia mi ha spedito un file compresso con tutte le pagine wiki. Potrò vedere se riesco a trovare una soluzione veloce per aggiornare velocemente l'impostazione dei colori delle tabelle.

[jeremie2]

Altro aggiornamento,

- Aggiustati i colori dei titoli di 4°, 5° e 6° livello nel tema dark.

- Reso più sobrio e standard l'indice della pagina:



- Impostato lo stile celeste per gli avvisi anche nel tema chiaro:

[ivantu]

@jeremie2, Chrome ha forse delle impostazioni differenti per quanto riguarda il Mode Dark, infatti guardanto tra le impostazioni appunto, è attivabile un'opzione ancora in via sperimentale.
Versione attuale installata di Chrome: 119.0.6045.123 (Build ufficiale) (a 64 bit).

Se l'attivo, funziona, ma non correttamente.

[jeremie2]

@jeremie2, Chrome ha forse delle impostazioni differenti per quanto riguarda il Mode Dark, infatti guardanto tra le impostazioni appunto, è attivabile un'opzione ancora in via sperimentale.
Versione attuale installata di Chrome: 119.0.6045.123 (Build ufficiale) (a 64 bit).

Se l'attivo, funziona, ma non correttamente.

Qualche giorno fa stavo studiando il funzionamento del pulsane che permette al singolo utente di cambiare da scuro a chiaro e viceversa. Capita spesso di vedere siti che lo implementano.
Per caso mi sono imbattuto nell'estensione di Firefox Toggle dark mode, che ha la particolarità di selezionare il tema chiaro e scuro impostati sul wiki.
In passato ho provato e usato alcune estensioni per impostare temi scuri in quei siti che ne sono sprovvisti. Però ovviamente ne creano uno loro. Toggle dark mode invece rileva gli stili esistenti di un sito e semplifica lo switch.

Mi è venuto in mente il tuo problema con chrome e qt, quindi ho guardato se ci fosse un equivalente per chrome. Però ho trovato solo i classici plugin che creano un proprio tema scuro. E probabilmente la funzionalità su Chrome farà un qualcosa di simile.

[rai]

Grazie, prima di tutto, per il tema scuro.
Segnalo che lo sfondo scuro nei box con evidenziazione automatica della sintassi (per capirci, quelli del tipo

Codice: Seleziona tutto

{{{#!python

[...]

}}}

ostacola la visione di alcuni token del codice, quelli i cui caratteri sono scuri.
Semplice segnalazione, non saprei dove mettere le mani ( css? ) per modificare il comportamento del syntax highlighter.

[jeremie2]

Segnalo che lo sfondo scuro nei box con evidenziazione automatica della sintassi (per capirci, quelli del tipo

Codice: Seleziona tutto

{{{#!python

[...]

}}}

ostacola la visione di alcuni token del codice, quelli i cui caratteri sono scuri.
Semplice segnalazione, non saprei dove mettere le mani ( css? ) per modificare il comportamento del syntax highlighter.

Grazie per la segnalazione!
Fatta la modifica, se ci fossero ulteriori parti di codice illeggibili o comunque poco leggibili, segnalate pure

La modifica avviene direttamente sul codice sorgente del wiki ospitato su Launchpad, quindi è possibile solo dal lato amministrativo. In questo caso sono state aggiunte le regole css per far "riemergere" le scritte su fondo scuro.

Ciao

[rai]

Ottimo! grazie. Restano poco evidenti, almeno per la mia vista, le sequenze di escape come \n \t etc.

esempio:Programmazione/Python/ListatiPython3#Listato_3