[feature] change theme colour meta tag on colour change

This commit is contained in:
Kombie 2020-02-16 11:13:36 +00:00 committed by GitHub
parent 383ca26542
commit 9048b6a99d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 234 additions and 145 deletions

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "4.37.2", "version": "4.38.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "4.37.2", "version": "4.38.0",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

View File

@ -181,43 +181,43 @@
height: 100%; height: 100%;
} }
.theme-color-neg-10 { .theme-color-negative-10 {
background-color: rgb(var(--theme-color-01)); background-color: rgb(var(--theme-color-01));
} }
.theme-color-neg-09 { .theme-color-negative-09 {
background-color: rgb(var(--theme-color-02)); background-color: rgb(var(--theme-color-02));
} }
.theme-color-neg-08 { .theme-color-negative-08 {
background-color: rgb(var(--theme-color-03)); background-color: rgb(var(--theme-color-03));
} }
.theme-color-neg-07 { .theme-color-negative-07 {
background-color: rgb(var(--theme-color-04)); background-color: rgb(var(--theme-color-04));
} }
.theme-color-neg-06 { .theme-color-negative-06 {
background-color: rgb(var(--theme-color-05)); background-color: rgb(var(--theme-color-05));
} }
.theme-color-neg-05 { .theme-color-negative-05 {
background-color: rgb(var(--theme-color-06)); background-color: rgb(var(--theme-color-06));
} }
.theme-color-neg-04 { .theme-color-negative-04 {
background-color: rgb(var(--theme-color-07)); background-color: rgb(var(--theme-color-07));
} }
.theme-color-neg-03 { .theme-color-negative-03 {
background-color: rgb(var(--theme-color-08)); background-color: rgb(var(--theme-color-08));
} }
.theme-color-neg-02 { .theme-color-negative-02 {
background-color: rgb(var(--theme-color-09)); background-color: rgb(var(--theme-color-09));
} }
.theme-color-neg-01 { .theme-color-negative-01 {
background-color: rgb(var(--theme-color-10)); background-color: rgb(var(--theme-color-10));
} }
@ -225,43 +225,43 @@
background-color: rgb(var(--theme-color)); background-color: rgb(var(--theme-color));
} }
.theme-color-pos-01 { .theme-color-positive-01 {
background-color: rgb(var(--theme-color-11)); background-color: rgb(var(--theme-color-11));
} }
.theme-color-pos-02 { .theme-color-positive-02 {
background-color: rgb(var(--theme-color-12)); background-color: rgb(var(--theme-color-12));
} }
.theme-color-pos-03 { .theme-color-positive-03 {
background-color: rgb(var(--theme-color-13)); background-color: rgb(var(--theme-color-13));
} }
.theme-color-pos-04 { .theme-color-positive-04 {
background-color: rgb(var(--theme-color-14)); background-color: rgb(var(--theme-color-14));
} }
.theme-color-pos-05 { .theme-color-positive-05 {
background-color: rgb(var(--theme-color-15)); background-color: rgb(var(--theme-color-15));
} }
.theme-color-pos-06 { .theme-color-positive-06 {
background-color: rgb(var(--theme-color-16)); background-color: rgb(var(--theme-color-16));
} }
.theme-color-pos-07 { .theme-color-positive-07 {
background-color: rgb(var(--theme-color-17)); background-color: rgb(var(--theme-color-17));
} }
.theme-color-pos-08 { .theme-color-positive-08 {
background-color: rgb(var(--theme-color-18)); background-color: rgb(var(--theme-color-18));
} }
.theme-color-pos-09 { .theme-color-positive-09 {
background-color: rgb(var(--theme-color-19)); background-color: rgb(var(--theme-color-19));
} }
.theme-color-pos-10 { .theme-color-positive-10 {
background-color: rgb(var(--theme-color-20)); background-color: rgb(var(--theme-color-20));
} }

View File

@ -11,27 +11,27 @@
--theme-font-ui-style: "normal"; --theme-font-ui-style: "normal";
--theme-black: 0, 0, 0; --theme-black: 0, 0, 0;
--theme-white: 255, 255, 255; --theme-white: 255, 255, 255;
--theme-shade-neg-10: 25, 25, 25; --theme-shade-negative-10: 25, 25, 25;
--theme-shade-neg-09: 25, 25, 25; --theme-shade-negative-09: 25, 25, 25;
--theme-shade-neg-08: 25, 25, 25; --theme-shade-negative-08: 25, 25, 25;
--theme-shade-neg-07: 25, 25, 25; --theme-shade-negative-07: 25, 25, 25;
--theme-shade-neg-06: 25, 25, 25; --theme-shade-negative-06: 25, 25, 25;
--theme-shade-neg-05: 25, 25, 25; --theme-shade-negative-05: 25, 25, 25;
--theme-shade-neg-04: 25, 25, 25; --theme-shade-negative-04: 25, 25, 25;
--theme-shade-neg-03: 25, 25, 25; --theme-shade-negative-03: 25, 25, 25;
--theme-shade-neg-02: 25, 25, 25; --theme-shade-negative-02: 25, 25, 25;
--theme-shade-neg-01: 25, 25, 25; --theme-shade-negative-01: 25, 25, 25;
--theme-shade: 25, 25, 25; --theme-shade: 25, 25, 25;
--theme-shade-pos-01: 25, 25, 25; --theme-shade-positive-01: 25, 25, 25;
--theme-shade-pos-02: 25, 25, 25; --theme-shade-positive-02: 25, 25, 25;
--theme-shade-pos-03: 25, 25, 25; --theme-shade-positive-03: 25, 25, 25;
--theme-shade-pos-04: 25, 25, 25; --theme-shade-positive-04: 25, 25, 25;
--theme-shade-pos-05: 25, 25, 25; --theme-shade-positive-05: 25, 25, 25;
--theme-shade-pos-06: 25, 25, 25; --theme-shade-positive-06: 25, 25, 25;
--theme-shade-pos-07: 25, 25, 25; --theme-shade-positive-07: 25, 25, 25;
--theme-shade-pos-08: 25, 25, 25; --theme-shade-positive-08: 25, 25, 25;
--theme-shade-pos-09: 25, 25, 25; --theme-shade-positive-09: 25, 25, 25;
--theme-shade-pos-10: 25, 25, 25; --theme-shade-positive-10: 25, 25, 25;
--theme-preview-size: 6em; --theme-preview-size: 6em;
--theme-custom-edit-height: 2.5em; --theme-custom-edit-height: 2.5em;
--theme-shadow: 1; --theme-shadow: 1;
@ -262,52 +262,52 @@
.is-theme-style-dark { .is-theme-style-dark {
/* theme */ /* theme */
--theme-color: var(--theme-shade); --theme-color: var(--theme-shade);
--theme-color-01: var(--theme-shade-neg-10); --theme-color-01: var(--theme-shade-negative-10);
--theme-color-02: var(--theme-shade-neg-09); --theme-color-02: var(--theme-shade-negative-09);
--theme-color-03: var(--theme-shade-neg-08); --theme-color-03: var(--theme-shade-negative-08);
--theme-color-04: var(--theme-shade-neg-07); --theme-color-04: var(--theme-shade-negative-07);
--theme-color-05: var(--theme-shade-neg-06); --theme-color-05: var(--theme-shade-negative-06);
--theme-color-06: var(--theme-shade-neg-05); --theme-color-06: var(--theme-shade-negative-05);
--theme-color-07: var(--theme-shade-neg-04); --theme-color-07: var(--theme-shade-negative-04);
--theme-color-08: var(--theme-shade-neg-03); --theme-color-08: var(--theme-shade-negative-03);
--theme-color-09: var(--theme-shade-neg-02); --theme-color-09: var(--theme-shade-negative-02);
--theme-color-10: var(--theme-shade-neg-01); --theme-color-10: var(--theme-shade-negative-01);
--theme-color-11: var(--theme-shade-pos-01); --theme-color-11: var(--theme-shade-positive-01);
--theme-color-12: var(--theme-shade-pos-02); --theme-color-12: var(--theme-shade-positive-02);
--theme-color-13: var(--theme-shade-pos-03); --theme-color-13: var(--theme-shade-positive-03);
--theme-color-14: var(--theme-shade-pos-04); --theme-color-14: var(--theme-shade-positive-04);
--theme-color-15: var(--theme-shade-pos-05); --theme-color-15: var(--theme-shade-positive-05);
--theme-color-16: var(--theme-shade-pos-06); --theme-color-16: var(--theme-shade-positive-06);
--theme-color-17: var(--theme-shade-pos-07); --theme-color-17: var(--theme-shade-positive-07);
--theme-color-18: var(--theme-shade-pos-08); --theme-color-18: var(--theme-shade-positive-08);
--theme-color-19: var(--theme-shade-pos-09); --theme-color-19: var(--theme-shade-positive-09);
--theme-color-20: var(--theme-shade-pos-10); --theme-color-20: var(--theme-shade-positive-10);
--theme-style-text: var(--theme-white); --theme-style-text: var(--theme-white);
} }
.is-theme-style-light { .is-theme-style-light {
/* theme */ /* theme */
--theme-color: var(--theme-shade); --theme-color: var(--theme-shade);
--theme-color-01: var(--theme-shade-pos-10); --theme-color-01: var(--theme-shade-positive-10);
--theme-color-02: var(--theme-shade-pos-09); --theme-color-02: var(--theme-shade-positive-09);
--theme-color-03: var(--theme-shade-pos-08); --theme-color-03: var(--theme-shade-positive-08);
--theme-color-04: var(--theme-shade-pos-07); --theme-color-04: var(--theme-shade-positive-07);
--theme-color-05: var(--theme-shade-pos-06); --theme-color-05: var(--theme-shade-positive-06);
--theme-color-06: var(--theme-shade-pos-05); --theme-color-06: var(--theme-shade-positive-05);
--theme-color-07: var(--theme-shade-pos-04); --theme-color-07: var(--theme-shade-positive-04);
--theme-color-08: var(--theme-shade-pos-03); --theme-color-08: var(--theme-shade-positive-03);
--theme-color-09: var(--theme-shade-pos-02); --theme-color-09: var(--theme-shade-positive-02);
--theme-color-10: var(--theme-shade-pos-01); --theme-color-10: var(--theme-shade-positive-01);
--theme-color-11: var(--theme-shade-neg-01); --theme-color-11: var(--theme-shade-negative-01);
--theme-color-12: var(--theme-shade-neg-02); --theme-color-12: var(--theme-shade-negative-02);
--theme-color-13: var(--theme-shade-neg-03); --theme-color-13: var(--theme-shade-negative-03);
--theme-color-14: var(--theme-shade-neg-04); --theme-color-14: var(--theme-shade-negative-04);
--theme-color-15: var(--theme-shade-neg-05); --theme-color-15: var(--theme-shade-negative-05);
--theme-color-16: var(--theme-shade-neg-06); --theme-color-16: var(--theme-shade-negative-06);
--theme-color-17: var(--theme-shade-neg-07); --theme-color-17: var(--theme-shade-negative-07);
--theme-color-18: var(--theme-shade-neg-08); --theme-color-18: var(--theme-shade-negative-08);
--theme-color-19: var(--theme-shade-neg-09); --theme-color-19: var(--theme-shade-negative-09);
--theme-color-20: var(--theme-shade-neg-10); --theme-color-20: var(--theme-shade-negative-10);
--theme-style-text: var(--theme-black); --theme-style-text: var(--theme-black);
} }

View File

@ -184,67 +184,67 @@
<div class="form-wrap"> <div class="form-wrap">
<div class="form-group form-group-block form-group-border form-group-border-theme-color"> <div class="form-group form-group-block form-group-border form-group-border-theme-color">
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-10"></div> <div class="theme-color-box theme-color-negative-10"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-09"></div> <div class="theme-color-box theme-color-negative-09"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-08"></div> <div class="theme-color-box theme-color-negative-08"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-07"></div> <div class="theme-color-box theme-color-negative-07"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-06"></div> <div class="theme-color-box theme-color-negative-06"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-05"></div> <div class="theme-color-box theme-color-negative-05"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-04"></div> <div class="theme-color-box theme-color-negative-04"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-03"></div> <div class="theme-color-box theme-color-negative-03"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-02"></div> <div class="theme-color-box theme-color-negative-02"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-01"></div> <div class="theme-color-box theme-color-negative-01"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless form-group-item-small"> <div class="form-group-text form-group-text-borderless form-group-item-small">
<div class="theme-color-box theme-color"></div> <div class="theme-color-box theme-color"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-01"></div> <div class="theme-color-box theme-color-positive-01"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-02"></div> <div class="theme-color-box theme-color-positive-02"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-03"></div> <div class="theme-color-box theme-color-positive-03"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-04"></div> <div class="theme-color-box theme-color-positive-04"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-05"></div> <div class="theme-color-box theme-color-positive-05"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-06"></div> <div class="theme-color-box theme-color-positive-06"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-07"></div> <div class="theme-color-box theme-color-positive-07"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-08"></div> <div class="theme-color-box theme-color-positive-08"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-09"></div> <div class="theme-color-box theme-color-positive-09"></div>
</div> </div>
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-10"></div> <div class="theme-color-box theme-color-positive-10"></div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -3,7 +3,6 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="theme-color" content="#262831">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>New Tab</title> <title>New Tab</title>

View File

@ -92,7 +92,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.hsl(); theme.mod.color.hsl();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-accent-rgb-color-quick", element: ".control-theme-accent-rgb-color-quick",
@ -4273,7 +4275,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.hsl(); theme.mod.color.hsl();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-rgb-text", element: ".control-theme-color-rgb-text",
@ -4339,7 +4343,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.hsl(); theme.mod.color.hsl();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-rgb-default", element: ".control-theme-color-rgb-default",
@ -4347,7 +4353,9 @@ var control = (function() {
func: function() { func: function() {
mod.default("theme.color.rgb"); mod.default("theme.color.rgb");
theme.mod.color.hsl(); theme.mod.color.hsl();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
render.update.control.header(); render.update.control.header();
render.update.control.menu(); render.update.control.menu();
} }
@ -4403,7 +4411,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.rgb(); theme.mod.color.rgb();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-hsl-h-number", element: ".control-theme-color-hsl-h-number",
@ -4457,7 +4467,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.rgb(); theme.mod.color.rgb();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-hsl-s-range", element: ".control-theme-color-hsl-s-range",
@ -4511,7 +4523,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.rgb(); theme.mod.color.rgb();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-hsl-s-number", element: ".control-theme-color-hsl-s-number",
@ -4565,7 +4579,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.rgb(); theme.mod.color.rgb();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-hsl-l-range", element: ".control-theme-color-hsl-l-range",
@ -4619,7 +4635,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.rgb(); theme.mod.color.rgb();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-hsl-l-number", element: ".control-theme-color-hsl-l-number",
@ -4673,7 +4691,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.rgb(); theme.mod.color.rgb();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-rgb-r-range", element: ".control-theme-color-rgb-r-range",
@ -4727,7 +4747,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.hsl(); theme.mod.color.hsl();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-rgb-r-number", element: ".control-theme-color-rgb-r-number",
@ -4781,7 +4803,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.hsl(); theme.mod.color.hsl();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-rgb-g-range", element: ".control-theme-color-rgb-g-range",
@ -4835,7 +4859,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.hsl(); theme.mod.color.hsl();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-rgb-g-number", element: ".control-theme-color-rgb-g-number",
@ -4889,7 +4915,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.hsl(); theme.mod.color.hsl();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-rgb-b-range", element: ".control-theme-color-rgb-b-range",
@ -4943,7 +4971,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.hsl(); theme.mod.color.hsl();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-rgb-b-number", element: ".control-theme-color-rgb-b-number",
@ -4997,7 +5027,9 @@ var control = (function() {
}], }],
func: function() { func: function() {
theme.mod.color.hsl(); theme.mod.color.hsl();
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-contrast-light-range", element: ".control-theme-color-contrast-light-range",
@ -5016,7 +5048,9 @@ var control = (function() {
valueConvert: ["float"] valueConvert: ["float"]
}], }],
func: function() { func: function() {
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-contrast-light-number", element: ".control-theme-color-contrast-light-number",
@ -5035,14 +5069,18 @@ var control = (function() {
valueConvert: ["float"] valueConvert: ["float"]
}], }],
func: function() { func: function() {
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-contrast-light-default", element: ".control-theme-color-contrast-light-default",
type: "button", type: "button",
func: function() { func: function() {
mod.default("theme.color.contrast.light"); mod.default("theme.color.contrast.light");
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
render.update.control.header(); render.update.control.header();
render.update.control.menu(); render.update.control.menu();
} }
@ -5063,7 +5101,9 @@ var control = (function() {
valueConvert: ["float"] valueConvert: ["float"]
}], }],
func: function() { func: function() {
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-contrast-dark-number", element: ".control-theme-color-contrast-dark-number",
@ -5082,14 +5122,18 @@ var control = (function() {
valueConvert: ["float"] valueConvert: ["float"]
}], }],
func: function() { func: function() {
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
} }
}, { }, {
element: ".control-theme-color-contrast-dark-default", element: ".control-theme-color-contrast-dark-default",
type: "button", type: "button",
func: function() { func: function() {
mod.default("theme.color.contrast.dark"); mod.default("theme.color.contrast.dark");
theme.mod.color.generated();
theme.render.color.shade(); theme.render.color.shade();
theme.render.themeMetaTag();
render.update.control.header(); render.update.control.header();
render.update.control.menu(); render.update.control.menu();
} }

View File

@ -270,7 +270,8 @@ var state = (function() {
contrast: { contrast: {
light: 4, light: 4,
dark: 4 dark: 4
} },
generated: {}
}, },
font: { font: {
display: { display: {

View File

@ -172,6 +172,50 @@ var theme = (function() {
b: Math.round(rgb.b) b: Math.round(rgb.b)
} }
}); });
},
generated: function() {
var shadeMax = 10;
var shadeMin = 1;
var contrastNeg = state.get.current().theme.color.contrast.dark;
var contrastPos = state.get.current().theme.color.contrast.light;
var hsl = helper.convertColor.rgb.hsl(state.get.current().theme.color.rgb);
var validateRGBNumber = function(rgb) {
for (var key in rgb) {
if (rgb[key] < 0) {
rgb[key] = 0;
} else if (rgb[key] > 255) {
rgb[key] = 255;
};
rgb[key] = Math.round(rgb[key]);
};
return rgb;
};
// set light theme shades
for (var i = shadeMax; i >= shadeMin; i--) {
var rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
s: hsl.s,
l: hsl.l - (contrastNeg * i)
});
helper.setObject({
object: state.get.current(),
path: "theme.color.generated.negative." + i,
newValue: validateRGBNumber(rgb)
});
};
// set dark theme shades
for (var i = shadeMin; i <= shadeMax; i++) {
var rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
s: hsl.s,
l: hsl.l + (contrastPos * i)
});
helper.setObject({
object: state.get.current(),
path: "theme.color.generated.positive." + i,
newValue: validateRGBNumber(rgb)
});
};
} }
}; };
@ -1368,45 +1412,27 @@ var theme = (function() {
render.color = { render.color = {
shade: function() { shade: function() {
var shadeMax = 10;
var shadeMin = 1;
var contrastNeg = state.get.current().theme.color.contrast.dark;
var contrastPos = state.get.current().theme.color.contrast.light;
var html = helper.e("html"); var html = helper.e("html");
var hsl = helper.convertColor.rgb.hsl(state.get.current().theme.color.rgb); // negative
var renderShade = function(name, index, rgb) { for (var i = 10; i >= 1; i--) {
for (var key in rgb) { var rgb = state.get.current().theme.color.generated.negative[i];
if (rgb[key] < 0) { var number = i;
rgb[key] = 0; if (i < 10) {
} else if (rgb[key] > 255) { number = "0" + number;
rgb[key] = 255;
};
rgb[key] = Math.round(rgb[key]);
}; };
if (index < 10) { html.style.setProperty("--theme-shade-negative-" + number, rgb.r + ", " + rgb.g + ", " + rgb.b);
index = "0" + index; };
// neutral
var rgb = state.get.current().theme.color.rgb;
html.style.setProperty("--theme-shade", rgb.r + ", " + rgb.g + ", " + rgb.b);
// positive
for (var i = 1; i <= 10; i++) {
var rgb = state.get.current().theme.color.generated.positive[i];
var number = i;
if (i < 10) {
number = "0" + number;
}; };
html.style.setProperty(name + index, rgb.r + ", " + rgb.g + ", " + rgb.b); html.style.setProperty("--theme-shade-positive-" + number, rgb.r + ", " + rgb.g + ", " + rgb.b);
};
// set light theme shades
for (var i = shadeMax; i >= shadeMin; i--) {
var rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
s: hsl.s,
l: hsl.l - (contrastNeg * i)
});
renderShade("--theme-shade-neg-", i, rgb);
};
// set primary theme shades
html.style.setProperty("--theme-shade", state.get.current().theme.color.rgb.r + ", " + state.get.current().theme.color.rgb.g + ", " + state.get.current().theme.color.rgb.b);
// set dark theme shades
for (var i = shadeMin; i <= shadeMax; i++) {
var rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
s: hsl.s,
l: hsl.l + (contrastPos * i)
});
renderShade("--theme-shade-pos-", i, rgb);
}; };
} }
}; };
@ -1572,6 +1598,7 @@ var theme = (function() {
themePresetButton.addEventListener("click", function() { themePresetButton.addEventListener("click", function() {
mod.apply(mod.preset.get(index)); mod.apply(mod.preset.get(index));
data.save(); data.save();
mod.color.generated();
render.font.display.name(); render.font.display.name();
render.font.display.weight(); render.font.display.weight();
render.font.display.style(); render.font.display.style();
@ -1583,6 +1610,7 @@ var theme = (function() {
render.radius(); render.radius();
render.shadow(); render.shadow();
render.shade.opacity(); render.shade.opacity();
render.themeMetaTag();
style.check(); style.check();
link.groupAndItems(); link.groupAndItems();
control.render.update.control.header(); control.render.update.control.header();
@ -1665,6 +1693,7 @@ var theme = (function() {
themeCustomButton.addEventListener("click", function() { themeCustomButton.addEventListener("click", function() {
mod.apply(mod.custom.get(index)); mod.apply(mod.custom.get(index));
data.save(); data.save();
mod.color.generated();
render.font.display.name(); render.font.display.name();
render.font.display.weight(); render.font.display.weight();
render.font.display.style(); render.font.display.style();
@ -1676,6 +1705,7 @@ var theme = (function() {
render.radius(); render.radius();
render.shadow(); render.shadow();
render.shade.opacity(); render.shade.opacity();
render.themeMetaTag();
style.check(); style.check();
link.groupAndItems(); link.groupAndItems();
control.render.update.control.header(); control.render.update.control.header();
@ -1915,6 +1945,16 @@ var theme = (function() {
} }
}; };
render.themeMetaTag = function() {
var head = helper.e("head");
var metaThemeColor = helper.e(".meta-theme-color");
if (metaThemeColor) {
metaThemeColor.remove();
};
var meta = helper.node("meta|class:meta-theme-color,name:theme-color,content:" + helper.convertColor.rgb.hex(state.get.current().theme.color.generated.negative[10]));
head.appendChild(meta);
};
var accent = { var accent = {
random: function() { random: function() {
mod.accent.random(); mod.accent.random();
@ -1967,6 +2007,7 @@ var theme = (function() {
var init = function() { var init = function() {
accent.random(); accent.random();
mod.color.generated();
mod.accent.random(); mod.accent.random();
mod.custom.close(); mod.custom.close();
render.font.load.preset(); render.font.load.preset();
@ -1985,6 +2026,7 @@ var theme = (function() {
render.shade.opacity(); render.shade.opacity();
render.preset(); render.preset();
render.custom.all(); render.custom.all();
render.themeMetaTag();
custom.check(); custom.check();
}; };

View File

@ -843,6 +843,10 @@ var update = (function() {
data.state.header.search.style = "box"; data.state.header.search.style = "box";
delete data.state.header.button; delete data.state.header.button;
return data; return data;
},
"4.38.0": function(data) {
data.state.theme.color.generated = {};
return data;
} }
}; };

View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "4.37.2"; var current = "4.38.0";
var name = "Naughty Goose"; var name = "Naughty Goose";

View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_name": "nightTab", "short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "4.37.2", "version": "4.38.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"

View File

@ -3,7 +3,6 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="theme-color" content="#262831">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Style Guide</title> <title>Style Guide</title>
<!-- css-block --> <!-- css-block -->
@ -361,7 +360,7 @@
s: hsl.s - (saturationShift * i), s: hsl.s - (saturationShift * i),
l: hsl.l - (lightShift * i) l: hsl.l - (lightShift * i)
}); });
renderShade("--theme-shade-neg-", i, rgb); renderShade("--theme-shade-negative-", i, rgb);
}; };
for (var i = 1; i <= shadeSteps; i++) { for (var i = 1; i <= shadeSteps; i++) {
var rgb = helper.convertColor.hsl.rgb({ var rgb = helper.convertColor.hsl.rgb({
@ -369,7 +368,7 @@
s: hsl.s + (saturationShift * i), s: hsl.s + (saturationShift * i),
l: hsl.l + (lightShift * i) l: hsl.l + (lightShift * i)
}); });
renderShade("--theme-shade-pos-", i, rgb); renderShade("--theme-shade-positive-", i, rgb);
}; };
} }
} }