Aide CSS & Dark mode

zazvita

Hello la communauté Silex, je suis nouvelle sur Silex & j'ai quelques questions :

Comment puis-je mettre en place un module pour avoir une version sombre et claire du site ? Est-ce que je fais le tout en CSS ou vous avez une idée d'un module existant ?

Aussi je souhaiterai intégrer un contour blanc sur mon lettrage noir, mais je n'arrive pas à faire fonctionner le Outline sur ma classe, est-ce que je dois renseigner le css à un autre endroit ?

Merci d'avance pour votre aide !
Elsa

lexoyo

hello zazvita

bienvenu a toi 🙌

Comment puis-je mettre en place un module pour avoir une version sombre et claire du site ? Est-ce que je fais le tout en CSS ou vous avez une idée d'un module existant ?

ah ca c'est une vraie question!

je suis pas fan de mettre du JS partout mais je pense que le plus simple avec silex c'est ca:

sur les éléments que tu veux styler en dark (le body et peut etre d'autres éléments) tu mets un attribut data-dark=une-classe-css
un bout de JS qui pose la classe css "une-classe-css" quand on est en dark mode sur tous les éléments qui ont un attribut data-dark
tu styles tes éléments pour le darkmode en mettant temporairement les classe "dark" sur tes éléments

c'est juste une idée, qu'en penses tu? est ce que tu vois ce que je veux dire? est ce que tu as besoin d'aide?

lexoyo

et une feature request que j'ai commencé a rédiger, une amélioration pour rendre le design du dark mode tres simple
https://roadmap.silex.me/posts/4/darkmode-for-websites

zazvita

Bonjour,

Super, merci beaucoup pour votre retour !
Je vais essayer et je reviens vers vous si j'ai un soucis d'application !

Et concernant le outline de police, pensez-vous que cela soit possible ?
C'est à dire, attribuer en css une font en couleur noir mais avec un contour blanc ? Je ne vois pas ou personnaliser le css...

Merci d'avance pour votre retour
Elsa

Jeaan-phi

zazvita

Bonjour, je pense que cela est possible via:
Typography --> Text shadow
Cordialement.

lexoyo

Si un style n'est pas accessible dans l'interface il y a moyen de faire du CSS dans les settings (head editor)

zazvita

Ok top, j'inclus du css dans du html comme ceci ?

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Mes expérimentations CSS</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}

  p {
    color: red;
  }
</style>

</head>
</html>

Jeaan-phi

zazvita

Bonjour zazvita

Si vous voulez j'ai une solution pour un thème Clair/Sombre, mais avec du Javascript.
Je peux vous fournir les codes.

BAV

Jeaan-phi

zazvita
Perso, je code comme ceci ...

<title>Mes expérimentations CSS</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}

p {
color: red;
}
</style>

lexoyo

zazvita Ok top, j'inclus du css dans du html comme ceci ?

oui, mais comme tu peux le voir dans le code de @Jeaan-phi tu ne dois pas inclure le doctype ni head ni body...

tout ce que tu mets dans le head editor est inclus dans le head du site (ou de la page si tu utilises le head editor qui est dans les settings de page)

il y a une doc en anglais ici