Un mode "dark" pour les cours

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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

+12 -1
Staff

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).

Auteur du sujet

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 :D ! Mais je le dis à nouveau, ça reste du gagdet :)

+1 -0
Auteur du sujet

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.

+0 -0

Cette réponse a aidé l'auteur du sujet

À cause des ressources surtout non ?

Sinon tu as Stylish pour modifier le CSS de certains sites. Par exemple, j'ai mis YouTube, pastebin et Wikipédia en sombre pour le moment.

Breizh zo ma bro, hag ihuel eo ma c'halon geti. Da viken. – L'oiseau imaginaire : ZzxŷxzZ

+4 -0

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 :

Normalement, il y a la plupart des éléments utilisés dans les tutos / articles qui est recolorée. Après, j'ai pas testé sur beaucoup de tutos différents donc je peux pas le garantir.

  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.

Édité par Gautier

+2 -0

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.

Premier test

Zeste de Savoir - Dark Mode | Woodsbarn Festival | (∩`-´)⊃━☆゚.*・。

+8 -0

@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

+0 -0

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 :)

La page d'accueil vraiment trop Ð@rK !

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 :pirate:

Zeste de Savoir - Dark Mode | Woodsbarn Festival | (∩`-´)⊃━☆゚.*・。

+3 -0

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).

+1 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte