Ajout d'un mode sombre/nuit pour le site #14

Closed
opened 3 years ago by Eragon · 22 comments
Eragon commented 3 years ago
Collaborator

Une fonctionnalité qui me semble utile pour la plupart d'entre nous qui préférons quand même le sombre sur nos pc.
J'ignore comment on peut mettre ça en place, peut-être un cookie, une préférence utilisateur ?
Mais ça me semble bien pratique pour ne pas se casser les yeux sur le blanc du site.

Une fonctionnalité qui me semble utile pour la plupart d'entre nous qui préférons quand même le sombre sur nos pc. J'ignore comment on peut mettre ça en place, peut-être un cookie, une préférence utilisateur ? Mais ça me semble bien pratique pour ne pas se casser les yeux sur le blanc du site.

Une vraie façon de faire est d'utiliser des thèmes CSS. Dans Firefox, View » Page Style permet de sélectionner les alternatives quand elles existent. Sur la plupart des sites modernes, ça ne se fait pas encore.

On pourrait alors avoir un thème clair et un thème sombre.

Une vraie façon de faire est d'utiliser des thèmes CSS. Dans Firefox, View » Page Style permet de sélectionner les alternatives quand elles existent. Sur la plupart des sites modernes, ça ne se fait pas encore. On pourrait alors avoir un thème clair et un thème sombre.
Poster
Collaborator

Bonne idée, mais trop peu de gens connaissent ça, un petit encadré avec des astuces sur PC qui indique ça ?

Bonne idée, mais trop peu de gens connaissent ça, un petit encadré avec des astuces sur PC qui indique ça ?

Oui il faudrait l'indiquer quelque part sur le site. Il y a peut-être moyen de générer un changement de thème en Javascript aussi, à étudier.

Comme ce serait a priori pour les gens habitués ou qui passent souvent sur le forum, je ne pense pas que ce soit un problème si ce n'est pas présenté de façon absolument immédiate.

Oui il faudrait l'indiquer quelque part sur le site. Il y a peut-être moyen de générer un changement de thème en Javascript aussi, à étudier. Comme ce serait a priori pour les gens habitués ou qui passent souvent sur le forum, je ne pense pas que ce soit un problème si ce n'est pas présenté de façon absolument immédiate.
Poster
Collaborator

En effet, peut-être sur la page affiché après confirmation de la création de compte ?

PS : d'ailleurs si on doit tester la vérification de la création du compte avec une url, comment fait-on en local ? On génère une url de vérification mais on envoi pas de mail ?

En effet, peut-être sur la page affiché après confirmation de la création de compte ? PS : d'ailleurs si on doit tester la vérification de la création du compte avec une url, comment fait-on en local ? On génère une url de vérification mais on envoi pas de mail ?

Oui, c'est le plus simple. J'ai pensé aussi à comment on gèrerait le LDAP en local. Il doit être possible de se faire une installation complète.

Oui, c'est le plus simple. J'ai pensé aussi à comment on gèrerait le LDAP en local. Il doit être possible de se faire une installation complète.
Poster
Collaborator

Si on suit un peu les consignes d'installation de @breizh ... limite lui demander un script d'installation pour archlinux(et adapter pour la vm si on choisi de la garder à jour)

Si on suit un peu les consignes d'installation de @breizh ... limite lui demander un script d'installation pour archlinux(et adapter pour la vm si on choisi de la garder à jour)
Darks added the
enhancement
label 3 years ago
Collaborator
https://gitea.planet-casio.com/devs/VPS-config/wiki/Installation-de-base-du-syst%C3%A8me#ldap pour la conf du serveur. https://gitea.planet-casio.com/devs/VPS-config/wiki/LDAP pour la structure de l'annuaire.
Poster
Collaborator

Merci, c'est plus en lien avec l'issue #18 mais merci quand même.

Comment est géré le mode sombre interne au navigateur ?
C'est une entête http ou une ligne à rajouter dans l'html ?

Merci, c'est plus en lien avec l'issue #18 mais merci quand même. Comment est géré le mode sombre interne au navigateur ? C'est une entête http ou une ligne à rajouter dans l'html ?
Owner

Par défaut. Si tu ne spécifie pas un background, il le met de la couleur du thème normalement.

Sinon pour spécifier un css alternatif, c'est dans le html que ça se fait.

Par défaut. Si tu ne spécifie pas un background, il le met de la couleur du thème normalement. Sinon pour spécifier un css alternatif, c'est dans le html que ça se fait.

On parle bien de CSS alternatif.

On parle bien de CSS alternatif.
Poster
Collaborator

Heu oui je me suis mal exprimé, par mode sombre interne au navigateur j'entendais le bouton dans les menus pour utiliser une thème alternatif.

Heu oui je me suis mal exprimé, par `mode sombre interne au navigateur` j'entendais le bouton dans les menus pour utiliser une thème alternatif.
Poster
Collaborator

https://www.w3.org/Style/Examples/007/alternatives.en.html Quelqu'un ici à chrome(ium) d'installé pour confirmer le fait que les styles alternatifs ne sont pas dispo sans extensions sous chrome?

PS: Vous pouvez utiliser la page du lien pour tester.

https://www.w3.org/Style/Examples/007/alternatives.en.html Quelqu'un ici à chrome(ium) d'installé pour confirmer le fait que les styles alternatifs ne sont pas dispo sans extensions sous chrome? PS: Vous pouvez utiliser la page du lien pour tester.
Collaborator

J'ajouterais que Firefox ne conserve pas l'info pour les CSS alternatifs, il faut les sélectionner à chaque changement de page et chaque visite du site…

J'ajouterais que Firefox ne conserve pas l'info pour les CSS alternatifs, il faut les sélectionner à chaque changement de page et chaque visite du site…

Dans ce cas, on devrait peut-être fall back sur un paramètre en BDD qui change les en-têtes de la page. Ça permet de changer de thème sans JS, après si on veut une preview live on peut utiliser du JS.

Dans ce cas, on devrait peut-être fall back sur un paramètre en BDD qui change les en-têtes de la page. Ça permet de changer de thème sans JS, après si on veut une preview live on peut utiliser du JS.
Owner

À la limite je préfère utiliser le localStorage, qui pour le coup me parait plus adapté.

À la limite je préfère utiliser le localStorage, qui pour le coup me parait plus adapté.

À la limite je m'en fous, mais pourquoi pas un paramètre du compte ? Ça persisterait d'un périphérique à l'autre.

À la limite je m'en fous, mais pourquoi pas un paramètre du compte ? Ça persisterait d'un périphérique à l'autre.
Poster
Collaborator

Le problèm du localStorage c'est qu'il impose l'utilisation de JS, je me trompe ?
À la limite proposer les deux, ça me semble bien plus simple de faire ça en bdd et modifier les en-têtes que de le faire avec le loaclStorage.

Le problèm du localStorage c'est qu'il impose l'utilisation de JS, je me trompe ? À la limite proposer les deux, ça me semble bien plus simple de faire ça en bdd et modifier les en-têtes que de le faire avec le loaclStorage.
Owner

Le commit 04fb3225c1 ajoute la variabilisation du thème, ce qui simplifie grandement la gestion de ceux-ci.

On peut largement envisager un système qui vient charger un style selon un flag enregistré en BDD.

Et on peut même imaginer un bout de Js qui détecte si le thème de l'OS est sombre ou non, histoire de s'adapter en conséquence. Misskey arrive à le faire, avec un peu de chance c'est un truc qui peut être simple à mettre en place.

Pour ce qui est de la customisation complète, il reste les solutions type Stylish.

Le commit 04fb3225c1 ajoute la variabilisation du thème, ce qui simplifie grandement la gestion de ceux-ci. On peut largement envisager un système qui vient charger un style selon un flag enregistré en BDD. Et on peut même imaginer un bout de Js qui détecte si le thème de l'OS est sombre ou non, histoire de s'adapter en conséquence. Misskey arrive à le faire, avec un peu de chance c'est un truc qui peut être simple à mettre en place. Pour ce qui est de la customisation complète, il reste les solutions type Stylish.
Poster
Collaborator

La variabilisation, c'est du css3 ? Ou alors on ets passé à un autre truc et j'ai raté un morceau ?

La variabilisation, c'est du css3 ? Ou alors on ets passé à un autre truc et j'ai raté un morceau ?
Owner
CSS4, mais c'est [supporté par presque tout le monde](https://caniuse.com/#feat=css-variables)

Puisque Darks a construit l'architecture CSS nécessaire pour les thèmes, j'ai programmé le paramètre dans les options du compte. Je sais que d'autres options (localStorage) ont été proposées, mais c'était le plus direct ; je préfère modifier plus tard si ça fait toujours débat.

Pour l'instant le thème sombre de FlamingKite est assez moche parce qu'on a modifié le CSS avec le temps et des choses ont divergé, donc je garde cette issue ouverte ; je la fermerai après avoir arrangé les visuels.

Puisque Darks a construit l'architecture CSS nécessaire pour les thèmes, j'ai programmé le paramètre dans les options du compte. Je sais que d'autres options (`localStorage`) ont été proposées, mais c'était le plus direct ; je préfère modifier plus tard si ça fait toujours débat. Pour l'instant le thème sombre de FlamingKite est assez moche parce qu'on a modifié le CSS avec le temps et des choses ont divergé, donc je garde cette issue ouverte ; je la fermerai après avoir arrangé les visuels.

Voilà qui conclut la question du mode sombre. Il reste des coins à ajuster mais je mets ça sur le compte de la maintenance au fur et à mesure. S'il y a un dev qui utilise le mode sombre ça aiderait à s'assurer que rien de très blanc ne se glisse dans les pages.

Voilà qui conclut la question du mode sombre. Il reste des coins à ajuster mais je mets ça sur le compte de la maintenance au fur et à mesure. S'il y a un dev qui utilise le mode sombre ça aiderait à s'assurer que rien de très blanc ne se glisse dans les pages.
Lephenixnoir closed this issue 1 year ago
Sign in to join this conversation.
No Milestone
No Assignees
4 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: devs/PCv5#14
Loading…
There is no content yet.