Un mode "dark" pour les cours

Bonjour à tous D'abord un grand merci à tout ceux qui participent au développement de ce site, vous faites un travail extraordinaire.

Je viens vous suggèrer une petite idée, qui pourrai arranger plusieurs personnes, même si ça reste du gadget. En fait, serai-t-il possible de développer une fonctionnalité permettant de consulter les cours mais avec un fond sombre, en effet, moi personnellement je suis plus à l'aise avec un cours sur fond sombre, je trouve le blanc assez éblouissant, et génant au bout de plusieurs heures.

Alors voilà ça reste du gadget mais si vous avez l'occasion de le faire Cordialement

Avec Firefox, tu peux aussi utiliser le mode lecture pour avoir un thème sombre

Si tu utilises firefox, tu peux :

1. Cliquer sur le mode lecture (le bouquin dans la barre d'url sur la page d'un cours)
2. Mettre en mode dark.

Sinon, créer une feuille de style pour le site ça marche aussi.

Edit : Grilled, mais je poste quand meme

Lié : https://github.com/zestedesavoir/zds-site/issues/584

Merci à vous ! Je ne connaissais pas ce mode lecture sur firefox !

D'autre part, si tu trouves le blanc éblouissant, c'est probablement qu'il est trop lumineux. Un truc pour régler ça à peu près bien :

1. Mets-toi dans des conditions d'éclairages normales
2. Affiche un fond blanc sur tout ton écran
3. Prends une feuille de papier blanc
4. Tiens la feuille à côté de ton écran et règle la luminosité jusqu'à ce que l'écran paraisse à peine plus lumineux que la feuille.

Si tu as l'habitude d'utiliser ton PC dans le noir complet, procures-toi une petite lampe de bureau (pour l'utilisation hors vidéo).

Merci pour ta réponse, j'ai effectivement toujours ma luminosité au max ! Après ce serai sympa à implémenter ce mode "dark", même sur pas mal de site, comme google par exemple ! Après tout, si on à le droit de coder sur fond noir, alors pourquoi ne pourrait-on pas apprendre sur fond noir ! Mais je le dis à nouveau, ça reste du gagdet

Je plusseoie, ça reste une bonne idée le fond noir.

C'est vrai que c'est fréquent dans un bon nombre d'applications (messageries, mails, stores) que de proposer une interface sombre, plus agréable pour certains. J'aimerai bien voir sur des sites comme google ou twitter un petit bouton qui permette de switcher de background et de police.

Je crois même, mais je ne m'avancerai pas trop, que ça permet aussi de réaliser des économie de batterie.

C'est bon à savoir, merci

Merci pour le partage ! Je vais regarder ça

Je plussoie aussi, excellente idée !

Et du coup, en voyant ce topic (et Stylish, que je ne connaissait pas), j'ai fait un css pour le mode lecture zen de Zds (le site entier était bien trop long à faire , et en plus, ça ne met pas le bordel dans le reste du site).

Du coup, je le met là si ça intéresse quelqu'un :

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

/*Style Stylish pour le mode lecture zen de Zestedesavoir.com*/

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("zestedesavoir.com") {

/*Couleurs du background et de la police en général*/
.main .content-container.zen-mode{
      background-color:#222222;
}
  
.main .content-container.zen-mode .article-content{
  color: #a0a0a0;
}
.main .content-container.zen-mode .license{
  color: #a0a0a0;
}


/*-----------------------
  Couleurs des tableaux
*/
.main .content-container.zen-mode table{
  border-color: #666666;
}  
.main .content-container.zen-mode td{
  border-color: #666666;
}  
  
/*Header*/
.main .content-container.zen-mode th{
  color: #cccccc;
  background-color: #666666;
  border-color: #666666;
}  
  
/*Body*/
.main .content-container.zen-mode tr:nth-child(2n+1){
  color: #a0a0a0;
  background-color: #222222;
  border-color: #666666;
}  

.main .content-container.zen-mode tr:nth-child(2n+2){
  color: #a0a0a0;
  background-color: #333333;
  border-color: #666666;
}  

/**/
.main .content-container.zen-mode .pagination{
  background-color: #999999;
  border-color: #777777;
  color: #0A75A7;
}

  
/*---------------------------
  Couleur des balises de code 
*/
.main .content-container.zen-mode .codehilitetable .linenos{
  color: #424242;
  background: #000000;
  border-right-color: #545454;
}

.main .content-container.zen-mode .codehilitetable .codehilite{
  background: #000000;
}
  
.main .content-container.zen-mode .codehilitetable .codehilite .nx{
  color: #777777; /*Couleur de la police par défaut*/
}

/*Code inline*/
.main .content-container.zen-mode .article-content p code{
  background-color: #000000;
  border-color: #a0a0a0;
}
  
/*---------------------------
  Couleur des balises d'information.
*/
.main .content-container.zen-mode .article-content .information:not(.alert-box){
  background: #1E3C44;
  
}
  
.main .content-container.zen-mode .article-content .question:not(.alert-box){
  background: #2D1E45;
}
  
.main .content-container.zen-mode .article-content .warning:not(.alert-box){
  background: #5D3C00;
}

.main .content-container.zen-mode .article-content .error:not(.alert-box){
  background: #480B0B;
}
  
  
/*---------------------------
  Couleur des titres.
*/
.main .content-container.zen-mode h1{
  color: #0A75A7;
  border-bottom-color: #F8AD32;
}
  
.main .content-container.zen-mode h2{
   background-color: #444444;
   border-top-color:  #545454;
   border-bottom-color:  #F8AD32;
}


/*Couleur des citations*/
.main .content-container.zen-mode .article-content blockquote{
   border-left-color: #545454;
}

}

Et si quelqu'un s'y connaissant mieux en design que moi veux modifier les couleurs que j'ai mis, qu'il ne se gène surtout pas, j'ai fais ça plus au feeling qu'autre chose.

Bon, ça vaut ce que ça vaut, mais en m'amusant vite fait avec Stylish et en sachant que je suis pas un pro du design, j'arrive à ça en premier jet.

Je donne pas le code pour l'instant parce que le reste du site est crade du coup, c'est juste pour donner une idée de ce qui peut être fait. Et j'ai pris une des pages qui demandait le moins de modifications je pense.

Pas un pro du design, mais moi je trouve ça très bien.

Je préfère cette version, comme quoi pas besoin d'être un pro du design Ça me fait penser à mon blender dark j'adhère x)

@Akna: J'aime beaucoup.

Par contre, il faudrait enlever les parties qui restent blanches (bouton rechercher, logo et icones de notification). Sinon, je verrais bien la barre latérale dans un gris entre la partie principale et la barre du haut

Par contre, il faudrait enlever les parties qui restent blanches (bouton rechercher, logo et icones de notification). Sinon, je verrais bien la barre latérale dans un gris entre la partie principale et la barre du haut

Mon but était pas de virer tout le blanc, mais au moins la grand majorité, donc pour ce qui est des fonds, c'est pas trop compliqué, par contre pour les logos ça veut dire qu'il faut que je trouve des images équivalentes, et c'est pas évident…

Bon du coup comme j'étais un peu motivé, et que c'est quand même bien agréable pour mes yeux, voila ce que ça donne pour la page d'accueil

Bon c'est un peu une rustine de passer par Stylish (surtout quand on voit la tête de ma feuille de style …), le mieux resterait de pouvoir intégrer des thèmes directement dans ZdS, faudra négocier ça avec les dev's à l'occasion

Tu peux aussi intégrer toi-même ceci dans le code, n'hésite pas si tu te sens de le faire, on peut t'aider et on a jamais mangé personne !

C'est vrai que c'est une bonne idée, et le thème que tu proposes est très bien. Par contre, je ne veux pas faire le rabat-joie, mais le choix de couleurs m'a donné l'impression que c'était une page de pub sur les noms de domaine qui ne sont plus attribués. Je pense que c'est juste à cause de la couleur des titres "Liste de forums",.., mais sinon je pense que tu peux tout à fait essayer d'intégrer ça au site (après, je ne suis qu'un visiteur).