10.1.001.dev Theme admin - test darkmode

This commit is contained in:
Fred Tempez 2020-05-22 17:57:03 +02:00
parent bbc2303fbd
commit 2209b65940
4 changed files with 21 additions and 17 deletions

View File

@ -52,7 +52,8 @@ core.colorVariants = function(rgba) {
"normal": "rgba(" + rgba[0] + "," + rgba[1] + "," + rgba[2] + "," + rgba[3] + ")",
"darken": "rgba(" + Math.max(0, rgba[0] - 15) + "," + Math.max(0, rgba[1] - 15) + "," + Math.max(0, rgba[2] - 15) + "," + rgba[3] + ")",
"veryDarken": "rgba(" + Math.max(0, rgba[0] - 20) + "," + Math.max(0, rgba[1] - 20) + "," + Math.max(0, rgba[2] - 20) + "," + rgba[3] + ")",
"text": core.relativeLuminanceW3C(rgba) > .22 ? "inherit" : "white"
//"text": core.relativeLuminanceW3C(rgba) > .22 ? "inherit" : "white"
"text": core.relativeLuminanceW3C(rgba) > .22 ? "#222" : "#DDD"
};
};

View File

@ -1529,22 +1529,24 @@ class core extends common {
if(empty($cssVersion[1]) OR $cssVersion[1] !== md5(json_encode($this->getData(['admin'])))) {
// Version
$css = '/*' . md5(json_encode($this->getData(['admin']))) . '*/';
$css .= '#site{background-color:' . $this->getData(['admin','backgroundColor']) . ';}';
$colors = helper::colorVariants($this->getData(['admin','backgroundColor']));
$css .= '#site{background-color:' . $colors['normal']. ';}';
$css .= 'body, .row > div {font:' . $this->getData(['admin','fontSize']) . ' "' . $this->getData(['admin','fontText']) . '", sans-serif;}';
$css .= 'body h1, h2, h3, h4, h5, h6 {font-family:' . $this->getData(['admin','fontTitle' ]) . ', sans-serif;color:' . $this->getData(['admin','colorTitle' ]) . ';}';
$css .= 'body:not(.editorWysiwyg),.block h4,input[type=email],input[type=text],input[type=password],.inputFile,select,textarea:not(.editorWysiwyg),.inputFile,span .zwiico-help,.button.buttonGrey {color:' . $this->getData(['admin','colorText']) . ';}';
$css .= 'body:not(.editorWysiwyg),span .zwiico-help {color:' . $colors['text'] . ';}';
$css .= 'table tr,input[type=email],input[type=text],input[type=password],select,textarea:not(.editorWysiwyg),.inputFile{color: #222;}';
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButton']));
$css .= '.button,input[type="checkbox"]:checked + label::before,.speechBubble{ background-color:' . $colors['normal'] . ';color:' . $this->getData(['admin','colorButtonText']) . ';}';
$css .= '.speechBubble::before {border-color:' . $colors['normal'] . ' transparent transparent transparent;}';
$css .= '.button:hover, button[type=submit]:hover { background-color:' . $colors['darken'] . ';}';
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonGrey']));
$css .= '.button.buttonGrey {background: ' . $colors['normal'] . ';}.button.buttonGrey:hover {background:' . $colors['darken'] . '}.button.buttonGrey:active {background:' . $colors['veryDarken'] . '}';
$css .= '.button.buttonGrey {background: ' . $colors['normal'] . ';color: ' . $this->getData(['admin','colorButtonText']) . ';}.button.buttonGrey:hover {background:' . $colors['darken'] .';color: ' . $this->getData(['admin','colorButtonText']) . '}.button.buttonGrey:active {background:' . $colors['veryDarken'] . ';color: ' . $this->getData(['admin','colorButtonText']) . '}';
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonRed']));
$css .= '.button.buttonRed {background: ' . $colors['normal'] . ';}.button.buttonRed:hover {background:' . $colors['darken'] . '}.button.buttonRed:active {background:' . $colors['veryDarken'] . '}';
$css .= '.button.buttonRed {background: ' . $colors['normal'] . ';color: ' . $this->getData(['admin','colorButtonText']) . ';}.button.buttonRed:hover {background:' . $colors['darken'] . ';color: ' . $this->getData(['admin','colorButtonText']) . '}.button.buttonRed:active {background:' . $colors['veryDarken'] . ';color: ' . $this->getData(['admin','colorButtonText']) . '}';
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonGreen']));
$css .= 'button[type=submit] {background-color: ' . $colors['normal']. ';color: ' . $this->getData(['admin','colorButtonText']) . '}button[type=submit]:hover {background-color: ' . $colors['darken'] . ';}';
$css .= 'button[type=submit] {background-color: ' . $colors['normal'] . ';color: ' . $this->getData(['admin','colorButtonText']) . '}button[type=submit]:hover {background-color: ' . $colors['darken'] . ';color: ' . $this->getData(['admin','colorButtonText']) .';}button[type=submit]:active {background-color: ' . $colors['darken'] . ';color: ' . $this->getData(['admin','colorButtonText']) .';}';
$colors = helper::colorVariants($this->getData(['admin','backgroundBlockColor']));
$css .= '.block {border: 1px solid ' . $this->getData(['admin','borderBlockColor']) . ';}.block h4 {background: ' . $colors['normal'] . ';color:' . $colors['text']. ';}';
$css .= '.block {border: 1px solid ' . $this->getData(['admin','borderBlockColor']) . ';}.block h4 {background-color: ' . $colors['normal'] . ';color:' . $colors['text'] . ';}';
// Enregistre la personnalisation
file_put_contents(self::DATA_DIR.'admin.css', $css);
}

View File

@ -18,23 +18,24 @@ $("input, select").on("change", function() {
var titleFont = $("#adminFontTitle").val();
var textFont = $("#adminFontText").val();
var css = "@import url('https://fonts.googleapis.com/css?family=" + titleFont + "|" + textFont + "');";
var css = "#site{background-color:" + $("#adminBackgroundColor").val() + ";}";
css += "body, .row > div {font:" + $("#adminFontTextSize").val() + " '" + textFont + "', sans-serif;}";
var colors = core.colorVariants($("#adminBackgroundColor").val());
var css = "#site{background-color:" + colors.normal + ";}";
css += "body, .row > div {font:" + $("#adminFontTextSize").val() + " '" + $("#adminColorTitle").val() + "', sans-serif;}";
css += "body h1, h2, h3, h4, h5, h6 {font-family:'" + titleFont + "', sans-serif; color:" + $("#adminColorTitle").val() + ";}";
css += "body:not(.editorWysiwyg),.block h4,input[type=email],input[type=text],input[type=password],.inputFile,select,textarea:not(.editorWysiwyg),.inputFile,span .zwiico-help,.button.buttonGrey {color:" + $("#adminColorText").val() + ";}";
css += "body:not(.editorWysiwyg),span .zwiico-help {color:" + colors.text + ";}";
css += "input[type=email],input[type=text],input[type=password],select,textarea:not(.editorWysiwyg),.inputFile{color: #222;}";
var colors = core.colorVariants($("#adminColorButton").val());
css += ".button,input[type='checkbox']:checked + label::before,.speechBubble{ background-color:" + colors.normal + "; color:" + $("#adminColorButtonText").val() + ";}";
css += ".speechBubble::before {border-color:" + colors.normal + " transparent transparent transparent;}";
css += ".button:hover, button[type=submit]:hover { background-color:" + colors.darken + ";}";
var colors = core.colorVariants($("#adminColorGrey").val());
css += ".button.buttonGrey {background: " + colors.normal + ";}.button.buttonGrey:hover {background:" + colors.darken + "}.button.buttonGrey:active {background:" + colors.veryDarken + "}";
css += ".button.buttonGrey {background: " + colors.normal + ";color:" + $("#adminColorButtonText").val() + ";}.button.buttonGrey:hover {background:" + colors.darken + ";color:" + $("#adminColorButtonText").val() + "}.button.buttonGrey:active {background:" + colors.veryDarken + ";color:" + $("#adminColorButtonText").val() + ";}";
var colors = core.colorVariants($("#adminColorRed").val());
css += ".button.buttonRed {background: " + colors.normal + ";}.button.buttonRed:hover {background:" + colors.darken + "}.button.buttonRed:active {background:" + colors.veryDarken + "}";
css += ".button.buttonRed {background: " + colors.normal + ";color:" + $("#adminColorButtonText").val() + ";}.button.buttonRed:hover {background:" + colors.darken + ";color:" + $("#adminColorButtonText").val() + "}.button.buttonRed:active {background:" + colors.veryDarken + ";color:" + $("#adminColorButtonText").val() + "}";
var colors = core.colorVariants($("#adminColorGreen").val());
css += "button[type=submit] {background-color: " + colors.normal + ";color: " + $("#adminColorButtonText").val() + "}button[type=submit]:hover {background-color: " + colors.darken + ";}";
css += "button[type=submit] {background-color: " + colors.normal + ";color: " + ";color:" + $("#adminColorButtonText").val() + "}button[type=submit]:hover {background-color: " + colors.darken + ";color:" + $("#adminColorButtonText").val() + ";}button[type=submit]:active {background:" + colors.veryDarken + ";color:" + $("#adminColorButtonText").val() + "}";
var colors = core.colorVariants($("#adminBackGroundBlockColor").val());
css += ".block {border: 1px solid " + $("#adminBorderBlockColor").val() + ";}.block h4 {background: " + colors.normal + ";color:" + colors.text + ";}";
css += ".block {border: 1px solid " + $("#adminBorderBlockColor").val() + ";}.block h4 {background-color: " + colors.normal + ";color:" + colors.text + ";}";
// Ajout du css au DOM
$("#themePreview").remove();

View File

@ -19,8 +19,8 @@ $(function() {
$(element).trigger("change");
}
},
dark: "inherit",
light: "white",
dark: "#222",
light: "#DDD",
forceAlpha: true
})
});