Un thème sombre sous Win3x.org - Page 5

raymater

Sujet du message : Re: Un thème sombre sous Win3x.org

Publié : 17 mai 2017 13:42

Membre inscrit

Hors-ligne

Messages : 413

Inscription : 12 juin 2008 17:57

PC Rétro : P3 800 MHz ; 384 Mo RAM ; Voodoo 2 ; GeForce 4

Ok du coup celui-là pourrait convenir.

Reste à voir pour la problématique des couleurs de police confondantes. Déjà ne plus accepter les couleurs personnalisées identiques aux couleurs de fond des thèmes sombre et clair. En gros on pourrait pas écrire en noir ou blanc via le forcing de la balise

Code : Tout sélectionner

[color=#000000][/color] ou [color=#FFFFFF][/color]

En analysant bien le spectre des couleurs en hexa. On se rend compte qu'une couleur confondante sur un fond noir se situe dès qu'une couleur R G ou B est à 00 en hexa et que les autres couleurs ont une valeur en dessous de 40 en hexa (soit 64 en décimal).

Idem pour la confusion avec la couleur blanche : dès qu'une couleur R G ou B est à FF en hexa (soit 255 en décimal) et que les autres couleurs ont une valeur au dessus de C0 en hexa (soit 192 en décimal).

Du coup pour se faire j'ai fait un code JS qui peut être utilisé pour assombrir ou éclaircir la couleur pour la rendre visible sur les deux thèmes à la fois :

Code : Tout sélectionner

function correctionCouleur(couleur)
{
	// Le code Hexa de la couleur doit être valide
	couleur = String(hex).replace(/[^0-9a-f]/gi, '');
	if (couleur.length < 6)
	{
		couleur = couleur[0]+couleur[0]+couleur[1]+couleur[1]+couleur[2]+couleur[2];
	}
	
	// Découpage de la valeur en Hexa en couleur
	var rouge = couleur[0]+couleur[1];
	var vert = couleur[2]+couleur[3];
	var bleu = couleur[4]+couleur[5];
	
	var couleurCorrigee = couleur;
	
	// Cas où la couleur est trop sombre
	if(rouge == "00" && parseInt(vert, 16) <= 64 && parseInt(bleu, 16) <= 64)
	{
		var nouveauBleu = parseInt(bleu, 16);
		nouveauBleu = nouveauBleu + (65 - nouveauBleu);
		nouveauBleu = (nouveauBleu-0).toString(16);
		
		var nouveauVert = parseInt(vert, 16);
		nouveauVert = nouveauVert + (65 - nouveauVert);
		nouveauVert = (nouveauVert-0).toString(16);
		
		couleurCorrigee = rouge + nouveauVert + nouveauBleu;
	}
	if(bleu == "00" && parseInt(rouge, 16) <= 64 && parseInt(vert, 16) <= 64)
	{
		var nouveauVert = parseInt(vert, 16);
		nouveauVert = nouveauVert + (65 - nouveauVert);
		nouveauVert = (nouveauVert-0).toString(16);
		
		var nouveauRouge = parseInt(rouge, 16);
		nouveauRouge = nouveauRouge + (65 - nouveauRouge);
		nouveauRouge = (nouveauRouge-0).toString(16);
		
		couleurCorrigee = nouveauRouge + nouveauVert + bleu;
	}
	if(vert == "00" && parseInt(bleu, 16) <= 64 && parseInt(rouge, 16) <= 64)
	{
		var nouveauRouge = parseInt(rouge, 16);
		nouveauRouge = nouveauRouge + (65 - nouveauRouge);
		nouveauRouge = (nouveauRouge-0).toString(16);
		
		var nouveauBleu = parseInt(bleu, 16);
		nouveauBleu = nouveauBleu + (65 - nouveauBleu);
		nouveauBleu = (nouveauBleu-0).toString(16);
		
		couleurCorrigee = nouveauRouge + vert + nouveauBleu;
	}
	
	// Cas où la couleur est trop claire
	if(rouge == "FF" && parseInt(vert, 16) >= 192 && parseInt(bleu, 16) >= 192)
	{
		var nouveauBleu = parseInt(bleu, 16);
		nouveauBleu = nouveauBleu - (nouveauBleu - 193);
		nouveauBleu = (nouveauBleu-0).toString(16);
		
		var nouveauVert = parseInt(bleu, 16);
		nouveauVert = nouveauVert - (nouveauVert - 193);
		nouveauVert = (nouveauVert-0).toString(16);
		
		couleurCorrigee = rouge + nouveauVert + nouveauBleu;
	}
	if(bleu == "FF" && parseInt(rouge, 16) >= 192 && parseInt(vert, 16) >= 192)
	{
		var nouveauVert = parseInt(bleu, 16);
		nouveauVert = nouveauVert - (nouveauVert - 193);
		nouveauVert = (nouveauVert-0).toString(16);
		
		var nouveauRouge = parseInt(rouge, 16);
		nouveauRouge = nouveauRouge - (nouveauRouge - 193);
		nouveauRouge = (nouveauRouge-0).toString(16);
		
		couleurCorrigee = nouveauRouge + nouveauVert + bleu;
	}
	if(vert == "FF" && parseInt(bleu, 16) >= 192 && parseInt(rouge, 16) >= 192)
	{
		var nouveauRouge = parseInt(rouge, 16);
		nouveauRouge = nouveauRouge - (nouveauRouge - 193);
		nouveauRouge = (nouveauRouge-0).toString(16);
		
		var nouveauBleu = parseInt(bleu, 16);
		nouveauBleu = nouveauBleu - (nouveauBleu - 193);
		nouveauBleu = (nouveauBleu-0).toString(16);
		
		couleurCorrigee = nouveauRouge + vert + nouveauBleu;
	}
	
	// Retour de la couleur corrigée
	return couleurCorrigee;
}

_________________

Mon site Web

Générateur de présentation de logiciels

Haut

Profil

Citer

Big Monstro

Sujet du message : Re: Un thème sombre sous Win3x.org

Publié : 18 mai 2017 14:36

Administrateur

Hors-ligne

Messages : 3578

Inscription : 27 juin 2003 15:15

PC Rétro : 80486 DX2/66, MS-DOS & Windows 3.11

Voilà, c'est fait, j'ai répondu à votre demande : un troisième style vient d’apparaître dans les choix de votre PCU.

N'hésitez pas à faire part de vos appréciations !

Haut

Profil

Citer

raymater

Sujet du message : Re: Un thème sombre sous Win3x.org

Publié : 18 mai 2017 14:47

Membre inscrit

Hors-ligne

Messages : 413

Inscription : 12 juin 2008 17:57

PC Rétro : P3 800 MHz ; 384 Mo RAM ; Voodoo 2 ; GeForce 4

Franchement c'est pas mal du tout !

Par contre faudrait corriger le logo pour qu'il s'adapte mieux au thème sombre parce que bon le contour blanc c'est pas terrible : [ img ]

Sinon c'est toujours aussi appréciable à naviguer sur mobile et puis on a pas le problèmes de couleurs confondantes pour les couleurs personnalisées vu qu'elles sont en blanc. Donc franchement bien joué !

_________________

Mon site Web

Générateur de présentation de logiciels

Haut

Profil

Citer

Big Monstro

Sujet du message : Re: Un thème sombre sous Win3x.org

Publié : 18 mai 2017 14:54

Administrateur

Hors-ligne

Messages : 3578

Inscription : 27 juin 2003 15:15

PC Rétro : 80486 DX2/66, MS-DOS & Windows 3.11

raymater a écrit : * 18 mai 2017 14:47
on a pas le problèmes de couleurs confondantes pour les couleurs personnalisées vu qu'elles sont en blanc. Donc franchement bien joué !

Au fait, j'ai imposé la couleur blanche pour le texte des messages et des signatures (sauf pour les codes et les liens) en ajoutant une règle CSS toute simple.

Code : Tout sélectionner

.content span, .signature span { color: inherit !important;}

L'avantage, c'est que j'ai contourné le problème de lisibilité de certains messages sans ajouter la moindre couche de JavaScript, ça économisera un peu de batterie de vos smartphones

. L'inconvénient, c'est que la balise BBcode de couleurs n'a plus aucun effet si on utilise ce style : mettre en couleurs du texte ne sert à rien sous ne-blackgreen puisque le texte sera affiché en blanc quoi que vous fassiez.

Je peux bien sûr changer cela si vous n'aimez pas ce "blanc imposé à tous les messages", mais je pense que c'est un bon compromis qui évite de devoir éditer des milliers de messages ou d'ajouter une grosse couche de JavaScript. Vous pouvez toujours mettre des couleurs à vos messages mais, en l'état, ces mises en forme ne seront visibles que sous Legacy et prosilver (les thèmes "clairs").

Haut

Profil

Citer

KeetKhat

Sujet du message : Re: Un thème sombre sous Win3x.org

Publié : 18 mai 2017 15:42

Membre inscrit

Hors-ligne

Messages : 1890

Inscription : 27 mai 2009 14:04

PC Rétro : IBM ThinkPad 380ED, Windows 95

Ah oui, c'est super agréable et le thème est joli visuellement

Haut

Profil

Citer

raymater

Sujet du message : Re: Un thème sombre sous Win3x.org

Publié : 18 mai 2017 16:23

Membre inscrit

Hors-ligne

Messages : 413

Inscription : 12 juin 2008 17:57

PC Rétro : P3 800 MHz ; 384 Mo RAM ; Voodoo 2 ; GeForce 4

Big Monstro a écrit : * 18 mai 2017 14:54
raymater a écrit : * 18 mai 2017 14:47
on a pas le problèmes de couleurs confondantes pour les couleurs personnalisées vu qu'elles sont en blanc. Donc franchement bien joué !
Au fait, j'ai imposé la couleur blanche pour le texte des messages et des signatures (sauf pour les codes et les liens) en ajoutant une règle CSS toute simple.
Code : Tout sélectionner
.content span, .signature span { color: #FFFFFF !important;}
L'avantage, c'est que j'ai contourné le problème de lisibilité de certains messages sans ajouter la moindre couche de JavaScript, ça économisera un peu de batterie de vos smartphones . L'inconvénient, c'est que la balise BBcode de couleurs n'a plus aucun effet si on utilise ce style : mettre en couleurs du texte ne sert à rien sous ne-blackgreen puisque le texte sera affiché en blanc quoi que vous fassiez.

Je peux bien sûr changer cela si vous n'aimez pas ce "blanc imposé à tous les messages", mais je pense que c'est un bon compromis qui évite de devoir éditer des milliers de messages ou d'ajouter une grosse couche de JavaScript. Vous pouvez toujours mettre des couleurs à vos messages mais, en l'état, ces mises en forme ne seront visibles que sous Legacy et prosilver (les thèmes "clairs").

C'était justement en ça qu'intervenait mon script JS tout prêt clé en main pour gérer le problème des couleurs trop sombre ou trop clair tout en conservant tout l'aspect mise en forme.

Je viens d'ailleurs de tester ma fonction en javascript et après modification j'ai réussi à rendre les couleurs moins sombres ou moins claires. Voici le code JS final :

Code : Tout sélectionner

function correctionCouleur(couleur)
{
	if (couleur.length < 6)
	{
		couleur = couleur[0]+couleur[0]+couleur[1]+couleur[1]+couleur[2]+couleur[2];
	}
	
	// Découpage de la valeur en Hexa en couleur
	var rouge = couleur[0]+couleur[1];
	var vert = couleur[2]+couleur[3];
	var bleu = couleur[4]+couleur[5];
	
	var couleurCorrigee = couleur;
	
	// Blanc
	if(couleur == "FFFFFF")
	{
		couleurCorrigee = "BBBBBB";
	}
	else
	{
		// Noir
		if(couleur == "000000")
		{
			couleurCorrigee = "333333";
		}
		else
		{
			// Cas où la couleur est trop sombre
			if(rouge == "00" && parseInt(vert, 16) <= 129 && parseInt(bleu, 16) <= 129)
			{
				var nouveauVert = parseInt(vert, 16);
				nouveauVert = nouveauVert + 65;
				nouveauVert = nouveauVert.toString(16);
				
				var nouveauBleu = parseInt(bleu, 16);
				nouveauBleu = nouveauBleu + 65;
				nouveauBleu = nouveauBleu.toString(16);
				
				couleurCorrigee = rouge + nouveauVert + nouveauBleu;
			}
			else
			{
				if(bleu == "00" && parseInt(rouge, 16) <= 129 && parseInt(vert, 16) <= 129)
				{
					var nouveauRouge = parseInt(rouge, 16);
					nouveauRouge = nouveauRouge + 65;
					nouveauRouge = nouveauRouge.toString(16);
				
					var nouveauVert = parseInt(vert, 16);
					nouveauVert = nouveauVert + 65;
					nouveauVert = nouveauVert.toString(16);
					
					couleurCorrigee = nouveauRouge + nouveauVert + bleu;
				}
				else
				{
					if(vert == "00" && parseInt(bleu, 16) <= 129 && parseInt(rouge, 16) <= 129)
					{
						var nouveauBleu = parseInt(bleu, 16);
						nouveauBleu = nouveauBleu + 65;
						nouveauBleu = nouveauBleu.toString(16);
						
						var nouveauRouge = parseInt(rouge, 16);
						nouveauRouge = nouveauRouge + 65;
						nouveauRouge = nouveauRouge.toString(16);
						
						couleurCorrigee = nouveauRouge + vert + nouveauBleu;
					}
					else
					{
						// Cas où la couleur est trop claire
						if(rouge == "FF" && parseInt(vert, 16) >= 192 && parseInt(bleu, 16) >= 192)
						{
							var nouveauBleu = parseInt(bleu, 16);
							nouveauBleu = nouveauBleu - (nouveauBleu - 128);
							nouveauBleu = nouveauBleu.toString(16);
							
							var nouveauVert = parseInt(vert, 16);
							nouveauVert = nouveauVert - (nouveauVert - 128);
							nouveauVert = nouveauVert.toString(16);
							
							couleurCorrigee = rouge + nouveauVert + nouveauBleu;
						}
						else
						{
							if(bleu == "FF" && parseInt(rouge, 16) >= 192 && parseInt(vert, 16) >= 192)
							{
								var nouveauRouge = parseInt(rouge, 16);
								nouveauRouge = nouveauRouge - (nouveauRouge - 128);
								nouveauRouge = (nouveauRouge-0).toString(16);
							
								var nouveauVert = parseInt(vert, 16);
								nouveauVert = nouveauVert - (nouveauVert - 128);
								nouveauVert = nouveauVert.toString(16);
							
								couleurCorrigee = nouveauRouge + nouveauVert + bleu;
							}
							else
							{
								if(vert == "FF" && parseInt(bleu, 16) >= 192 && parseInt(rouge, 16) >= 192)
								{
									var nouveauBleu = parseInt(bleu, 16);
									nouveauBleu = nouveauBleu - (nouveauBleu - 128);
									nouveauBleu = nouveauBleu.toString(16);
									
									var nouveauRouge = parseInt(rouge, 16);
									nouveauRouge = nouveauRouge - (nouveauRouge - 128);
									nouveauRouge = nouveauRouge.toString(16);
									
									couleurCorrigee = nouveauRouge + vert + nouveauBleu;
								}
							}
						}
					}
				}
			}
		}
	}
	
	// Retour de la couleur corrigée
	return couleurCorrigee;
}

Le script JS utilisé pour récupérer mes éléments HTML pour les recoloriser en appelant ma fonction :

Code : Tout sélectionner

var elements = document.querySelectorAll("span");
for(var i = 0; i < elements.length; i++)
{
	if(elements[i].hasAttribute("style"))
	{
		if(elements[i].getAttribute("style").indexOf("color") != -1)
		{
			elements[i].style.color = "#" + correctionCouleur(elements[i].getAttribute("style").substr(elements[i].getAttribute("style").indexOf("#") + 1, 6));
		}
	}
}

Le résultat sur une page HTML de test (en haut avant, en bas après correction en JS) :

Dernière modification par raymater le 19 mai 2017 08:48, modifié 1 fois.

_________________

Mon site Web

Générateur de présentation de logiciels

Haut

Profil

Citer

Nintenloup

Sujet du message : Re: Un thème sombre sous Win3x.org

Publié : 18 mai 2017 17:38

Modérateur

Hors-ligne

Messages : 2534

Inscription : 06 janv. 2013 05:02

PC Rétro : Tandy 1000 SX, V20, 640k, SB2.0, VGA, Syquest

Je suis très content que tu a fait ça en une ligne de CSS BM, Le JS est déjà assez lourd comme ça ^^

_________________

L’homme est un loup pour l’homme, ce qui, vous en conviendrez, n’est pas très gentil pour le loup.

Ma chaîne youtube française sur les vieux ordinateurs et autres vieilles technologies.

Haut

Profil

Citer

raymater

Sujet du message : Re: Un thème sombre sous Win3x.org

Publié : 18 mai 2017 18:42

Membre inscrit

Hors-ligne

Messages : 413

Inscription : 12 juin 2008 17:57

PC Rétro : P3 800 MHz ; 384 Mo RAM ; Voodoo 2 ; GeForce 4

nintenloup a écrit : * 18 mai 2017 17:38
Le JS est déjà assez lourd comme ça ^^

Oui quand tu demandes des grosses tâches à faire comme de l'Ajax c'est lourd. Maintenant dans ce cas là ça devrait passer très bien. À tester.

_________________

Mon site Web

Générateur de présentation de logiciels

Haut

Profil

Citer

Big Monstro

Sujet du message : Re: Un thème sombre sous Win3x.org

Publié : 18 mai 2017 19:26

Administrateur

Hors-ligne

Messages : 3578

Inscription : 27 juin 2003 15:15

PC Rétro : 80486 DX2/66, MS-DOS & Windows 3.11

Citation :
Par contre faudrait corriger le logo pour qu'il s'adapte mieux au thème sombre parce que bon le contour blanc c'est pas terrible : http://nsa38.casimages.com/img/2017/05/ ... 992033.png

J'ai décidé d'enlever carrément le logo pour le style sombre. Rafistoler le logo actuel avec Paint ne donnait pas de résultats probants...

Peut être que Matthias voudra le réajuster pour l'occasion ?

A part ça, la couleur du titre Win3x.Org a changée (car du vert foncé sur un fond noir, c'est bof pour la lisibilité). Le style blackgreen n'était pas sans défaut ergonomique. J'en ai relevé quelques-uns (outre la couleur du titre en vert foncé : même couleurs d'arrière-plan pour les notifications lues et non lues, rouge foncé peu lisible pour les messages d'erreurs et scrollbar invisible sous Chromium), autant d'imperfections que j'ai déjà corrigé. En outre, comme il partage exactement les mêmes templates que proSilver, les changements que j'avais apporté à proSilver se sont répercutés.

Haut

Profil

Citer