Recherche sur les couleurs & préférences utilisateur #1
Comments
|
Hop, intéressant tout ça, je répondrai ce soir :) |
|
J’ai continué des tests donc avec des variables en sus aux nommages abscons (marre) <style type="text/css">
:root {
<BOUCLE_couleurs(DATA){source tableau, #ARRAY{
couleur_foncee,couleur-principale,
couleur_claire,couleur-secondaire,
couleur_lien,couleur-lien,
couleur_lien_off,couleur-lien-off,
}}>
--#VALEUR: #EVAL{$GLOBALS['#CLE']};
--#VALEUR-p10: [#(#EVAL{$GLOBALS\['#CLE'\]}|couleur_foncer{0.1})];
--#VALEUR-p20: [#(#EVAL{$GLOBALS\['#CLE'\]}|couleur_foncer{0.2})];
--#VALEUR-p30: [#(#EVAL{$GLOBALS\['#CLE'\]}|couleur_foncer{0.3})];
--#VALEUR-m10: [#(#EVAL{$GLOBALS\['#CLE'\]}|couleur_eclaircir{0.1})];
--#VALEUR-m20: [#(#EVAL{$GLOBALS\['#CLE'\]}|couleur_eclaircir{0.2})];
--#VALEUR-m30: [#(#EVAL{$GLOBALS\['#CLE'\]}|couleur_eclaircir{0.3})];
</BOUCLE_couleurs>
}
</style>Note: faudra virer cet usage de eval + $globals… grml que c’est moche En js je l’ai aussi avec : $('.formulaire_#FORM .editer_couleur input[type=radio]').on('change', function(){
if (this.checked) {
var $me = $(this);
$.each(['couleur-principale', 'couleur-secondaire', 'couleur-lien', 'couleur-lien-off'], function(i, key){
var value = $me.data(key);
$(':root')
.css('--' + key, value)
.css('--' + key + '-p10', ColorLuminance(value, -.1))
.css('--' + key + '-p20', ColorLuminance(value, -.2))
.css('--' + key + '-p30', ColorLuminance(value, -.3))
.css('--' + key + '-m10', ColorLuminance(value, .1))
.css('--' + key + '-m20', ColorLuminance(value, .2))
.css('--' + key + '-m30', ColorLuminance(value, .3))
;
});
}
});
function ColorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}
return rgb;
}Dans le variable.css :root {
--couleur-defaut: var(--couleur-principale, $couleur-fallback);
--couleur-lightest: var(--couleur-principale-m30, ajuster-couleur($couleur-fallback, (lightness: +30%)));
--couleur-lighter: var(--couleur-principale-m20, ajuster-couleur($couleur-fallback, (lightness: +20%)));
--couleur-light: var(--couleur-principale-m10, ajuster-couleur($couleur-fallback, (lightness: +10%)));
--couleur-dark: var(--couleur-principale-p10, ajuster-couleur($couleur-fallback, (lightness: -10%)));
--couleur-darker: var(--couleur-principale-p20, ajuster-couleur($couleur-fallback, (lightness: -20%)));
--couleur-darkest: var(--couleur-principale-p30, ajuster-couleur($couleur-fallback, (lightness: -30%)));
}
// ...
// Couleurs fonctionnelles
$couleur-defaut: var(--couleur-defaut);
// ...
// Variantes de la couleur du thème
$couleur-lightest: var(--couleur-lightest);
$couleur-lighter: var(--couleur-lighter);
$couleur-light: var(--couleur-light);
$couleur-dark: var(--couleur-dark);
$couleur-darker: var(--couleur-darker);
$couleur-darkest: var(--couleur-darkest);Et j’ai enlevé plein d’utilisation de calculs du coup. Je suis sûr qu’avec un peu de volonté ça peut être utilisé. Reste à savoir si c’est pertinent ! Le problème principal arrive dès que tu veux utiliser une couleur spécifique issue de la couleur principale de l’utilisateur… bah… tu peux pas c’est con :) Il y aurait peut être une possibilité de pipeline qui ajouterait des variables CSS à destination des thèmes pour compléter. Ou pas. Peut être qu’il suffit d’ajouter les couleurs qui manquent importantes. Ici une couleur-principale-fond-clair couleur-principale-fond-sombre peut être. Toujours est-il que c’est rigolo. J’ai ça dans une branche expérimentale si tu veux que je la commite tu dis. |
marcimat
changed the title
|
Après différentes tergiversations, j’ai fini par créer un fichier Mais en fait ça me gène finalement si y a des couleurs spécifiques, ça va générer un favicon image pour chaque couleur testée par le bonhomme… et bof. (excuse bidon ok !). Il y a quand même quelques subtilités à savoir. Benoîtement, imaginons : <style type='text/css'>
:root {
--cp: blue;
--couleur: var(--cp);
}
span {
color: var(--couleur);
border-bottom: 1px solid var(--cp);
}
.perso {
--cp: red;
color: var(--couleur);
border-bottom: 1px solid var(--cp);
}
</style>
<span>Coucou</span>
<span class="perso">par ici</span>Bah, j’imaginais que «par ici» dans .perso serait écrit en rouge, car --couleur indique var(--cp) et que --cp dans .perso est rouge. Mais… il semble prendre --cp au niveau de cascade d’où est déclaré le --couleur (ici dans :root donc). Bref… du coup, j’ai directement déclaré dans SPIP les --couleur-dark etc. Et ça marche pas mal. |
|
Ah ! Y a un moyen de pouvoir gérer plein de couleurs en plus dans SCSS… Déclarer non pas des couleurs complètes, mais des morceaux de rgb... :root {
/* #f0f0f0 in decimal RGB */
--color: 240, 240, 240;
}
body {
color: #000;
background-color: #000;
}
#element {
background-color: rgba(var(--color), 0.5);
}Du coup, dans le SCSS on peut avoir tout un gradient d’une couleur en adaptant l’opacité. |
|
On a bien avancé dessus avec Tcharles, grâce à une super idée : utiliser hsl(). Donc actuellement du coup :
Il reste un souci avec les feuilles de styles calculées qui attendent une "couleur_foncee" et "couleur_claire". Faut il leur en envoyer une ? Faut il au contraire ne pas leur en envoyer (pour mutualiser le cache CSS, vu que c’est les variables qui sont importantes maintenant ? |
|
Un pen pour visualiser les options possibles pour la palette de couleurs : https://codepen.io/tcharlss/pen/ypyVpe |
|
Comment gérer les fallback des variables en CSS et SASS |
|
Dans le codepen, je trouve le dernier cas le plus intéressant (lum 50%, sat 80% max). |
Constat
prive/style_prive_plugin_xx.htmlProposition
Utiliser les variables CSS. C’est le top (modifiables en JS, suivent aussi l’effet de cascade...)
:rootensuite en variables CSS au tout début du head dans l’espace privé (juste avant les autres styles CSS). Elles deviennent alors utilisables dans tout fichier CSS (dans les navigateurs assez récents).remensuite partout ça devrait être assez sympa.Ça donne donc par exemple :
Et on peut alors utiliser à différents endroits
var(--couleur-defaut)simplement.Problèmes rencontrés
J’ai fait quelques tests en partie concluants, mais je suis à demi bloqué
Solutions possibles
Comme alternative à l’impossibilité de modifier les couleurs en CSS depuis une variable, je me dis qu’une possibilité serait de faire générer un panel de couleurs par SPIP depuis les couleurs choisies de l’utilisateur. C’est pas extrêmement compliqué, mais ça serait bien de pouvoir le faire approximativement aussi en JS (https://stackoverflow.com/questions/5833624/increase-css-brightness-color-on-click-with-jquery-javascript) pour que les couleurs se modifient instantanément dans les préférences utilisateur.
On pourrait avoir quelque chose comme :
Et ceci pour chaque couleur.
Est-ce que ça suffirait ? Est-ce qu’on aurait une plage suffisante de choix ?
The text was updated successfully, but these errors were encountered: