mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-03-10 12:48:18 +01:00
[feature] change theme colour meta tag on colour change
This commit is contained in:
Kombie
GitHub
parent
383ca26542
commit
9048b6a99d
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "4.37.2",
|
||||
"version": "4.38.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -181,43 +181,43 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.theme-color-neg-10 {
|
||||
.theme-color-negative-10 {
|
||||
background-color: rgb(var(--theme-color-01));
|
||||
}
|
||||
|
||||
.theme-color-neg-09 {
|
||||
.theme-color-negative-09 {
|
||||
background-color: rgb(var(--theme-color-02));
|
||||
}
|
||||
|
||||
.theme-color-neg-08 {
|
||||
.theme-color-negative-08 {
|
||||
background-color: rgb(var(--theme-color-03));
|
||||
}
|
||||
|
||||
.theme-color-neg-07 {
|
||||
.theme-color-negative-07 {
|
||||
background-color: rgb(var(--theme-color-04));
|
||||
}
|
||||
|
||||
.theme-color-neg-06 {
|
||||
.theme-color-negative-06 {
|
||||
background-color: rgb(var(--theme-color-05));
|
||||
}
|
||||
|
||||
.theme-color-neg-05 {
|
||||
.theme-color-negative-05 {
|
||||
background-color: rgb(var(--theme-color-06));
|
||||
}
|
||||
|
||||
.theme-color-neg-04 {
|
||||
.theme-color-negative-04 {
|
||||
background-color: rgb(var(--theme-color-07));
|
||||
}
|
||||
|
||||
.theme-color-neg-03 {
|
||||
.theme-color-negative-03 {
|
||||
background-color: rgb(var(--theme-color-08));
|
||||
}
|
||||
|
||||
.theme-color-neg-02 {
|
||||
.theme-color-negative-02 {
|
||||
background-color: rgb(var(--theme-color-09));
|
||||
}
|
||||
|
||||
.theme-color-neg-01 {
|
||||
.theme-color-negative-01 {
|
||||
background-color: rgb(var(--theme-color-10));
|
||||
}
|
||||
|
||||
@ -225,43 +225,43 @@
|
||||
background-color: rgb(var(--theme-color));
|
||||
}
|
||||
|
||||
.theme-color-pos-01 {
|
||||
.theme-color-positive-01 {
|
||||
background-color: rgb(var(--theme-color-11));
|
||||
}
|
||||
|
||||
.theme-color-pos-02 {
|
||||
.theme-color-positive-02 {
|
||||
background-color: rgb(var(--theme-color-12));
|
||||
}
|
||||
|
||||
.theme-color-pos-03 {
|
||||
.theme-color-positive-03 {
|
||||
background-color: rgb(var(--theme-color-13));
|
||||
}
|
||||
|
||||
.theme-color-pos-04 {
|
||||
.theme-color-positive-04 {
|
||||
background-color: rgb(var(--theme-color-14));
|
||||
}
|
||||
|
||||
.theme-color-pos-05 {
|
||||
.theme-color-positive-05 {
|
||||
background-color: rgb(var(--theme-color-15));
|
||||
}
|
||||
|
||||
.theme-color-pos-06 {
|
||||
.theme-color-positive-06 {
|
||||
background-color: rgb(var(--theme-color-16));
|
||||
}
|
||||
|
||||
.theme-color-pos-07 {
|
||||
.theme-color-positive-07 {
|
||||
background-color: rgb(var(--theme-color-17));
|
||||
}
|
||||
|
||||
.theme-color-pos-08 {
|
||||
.theme-color-positive-08 {
|
||||
background-color: rgb(var(--theme-color-18));
|
||||
}
|
||||
|
||||
.theme-color-pos-09 {
|
||||
.theme-color-positive-09 {
|
||||
background-color: rgb(var(--theme-color-19));
|
||||
}
|
||||
|
||||
.theme-color-pos-10 {
|
||||
.theme-color-positive-10 {
|
||||
background-color: rgb(var(--theme-color-20));
|
||||
}
|
||||
|
||||
|
||||
@ -11,27 +11,27 @@
|
||||
--theme-font-ui-style: "normal";
|
||||
--theme-black: 0, 0, 0;
|
||||
--theme-white: 255, 255, 255;
|
||||
--theme-shade-neg-10: 25, 25, 25;
|
||||
--theme-shade-neg-09: 25, 25, 25;
|
||||
--theme-shade-neg-08: 25, 25, 25;
|
||||
--theme-shade-neg-07: 25, 25, 25;
|
||||
--theme-shade-neg-06: 25, 25, 25;
|
||||
--theme-shade-neg-05: 25, 25, 25;
|
||||
--theme-shade-neg-04: 25, 25, 25;
|
||||
--theme-shade-neg-03: 25, 25, 25;
|
||||
--theme-shade-neg-02: 25, 25, 25;
|
||||
--theme-shade-neg-01: 25, 25, 25;
|
||||
--theme-shade-negative-10: 25, 25, 25;
|
||||
--theme-shade-negative-09: 25, 25, 25;
|
||||
--theme-shade-negative-08: 25, 25, 25;
|
||||
--theme-shade-negative-07: 25, 25, 25;
|
||||
--theme-shade-negative-06: 25, 25, 25;
|
||||
--theme-shade-negative-05: 25, 25, 25;
|
||||
--theme-shade-negative-04: 25, 25, 25;
|
||||
--theme-shade-negative-03: 25, 25, 25;
|
||||
--theme-shade-negative-02: 25, 25, 25;
|
||||
--theme-shade-negative-01: 25, 25, 25;
|
||||
--theme-shade: 25, 25, 25;
|
||||
--theme-shade-pos-01: 25, 25, 25;
|
||||
--theme-shade-pos-02: 25, 25, 25;
|
||||
--theme-shade-pos-03: 25, 25, 25;
|
||||
--theme-shade-pos-04: 25, 25, 25;
|
||||
--theme-shade-pos-05: 25, 25, 25;
|
||||
--theme-shade-pos-06: 25, 25, 25;
|
||||
--theme-shade-pos-07: 25, 25, 25;
|
||||
--theme-shade-pos-08: 25, 25, 25;
|
||||
--theme-shade-pos-09: 25, 25, 25;
|
||||
--theme-shade-pos-10: 25, 25, 25;
|
||||
--theme-shade-positive-01: 25, 25, 25;
|
||||
--theme-shade-positive-02: 25, 25, 25;
|
||||
--theme-shade-positive-03: 25, 25, 25;
|
||||
--theme-shade-positive-04: 25, 25, 25;
|
||||
--theme-shade-positive-05: 25, 25, 25;
|
||||
--theme-shade-positive-06: 25, 25, 25;
|
||||
--theme-shade-positive-07: 25, 25, 25;
|
||||
--theme-shade-positive-08: 25, 25, 25;
|
||||
--theme-shade-positive-09: 25, 25, 25;
|
||||
--theme-shade-positive-10: 25, 25, 25;
|
||||
--theme-preview-size: 6em;
|
||||
--theme-custom-edit-height: 2.5em;
|
||||
--theme-shadow: 1;
|
||||
@ -262,52 +262,52 @@
|
||||
.is-theme-style-dark {
|
||||
/* theme */
|
||||
--theme-color: var(--theme-shade);
|
||||
--theme-color-01: var(--theme-shade-neg-10);
|
||||
--theme-color-02: var(--theme-shade-neg-09);
|
||||
--theme-color-03: var(--theme-shade-neg-08);
|
||||
--theme-color-04: var(--theme-shade-neg-07);
|
||||
--theme-color-05: var(--theme-shade-neg-06);
|
||||
--theme-color-06: var(--theme-shade-neg-05);
|
||||
--theme-color-07: var(--theme-shade-neg-04);
|
||||
--theme-color-08: var(--theme-shade-neg-03);
|
||||
--theme-color-09: var(--theme-shade-neg-02);
|
||||
--theme-color-10: var(--theme-shade-neg-01);
|
||||
--theme-color-11: var(--theme-shade-pos-01);
|
||||
--theme-color-12: var(--theme-shade-pos-02);
|
||||
--theme-color-13: var(--theme-shade-pos-03);
|
||||
--theme-color-14: var(--theme-shade-pos-04);
|
||||
--theme-color-15: var(--theme-shade-pos-05);
|
||||
--theme-color-16: var(--theme-shade-pos-06);
|
||||
--theme-color-17: var(--theme-shade-pos-07);
|
||||
--theme-color-18: var(--theme-shade-pos-08);
|
||||
--theme-color-19: var(--theme-shade-pos-09);
|
||||
--theme-color-20: var(--theme-shade-pos-10);
|
||||
--theme-color-01: var(--theme-shade-negative-10);
|
||||
--theme-color-02: var(--theme-shade-negative-09);
|
||||
--theme-color-03: var(--theme-shade-negative-08);
|
||||
--theme-color-04: var(--theme-shade-negative-07);
|
||||
--theme-color-05: var(--theme-shade-negative-06);
|
||||
--theme-color-06: var(--theme-shade-negative-05);
|
||||
--theme-color-07: var(--theme-shade-negative-04);
|
||||
--theme-color-08: var(--theme-shade-negative-03);
|
||||
--theme-color-09: var(--theme-shade-negative-02);
|
||||
--theme-color-10: var(--theme-shade-negative-01);
|
||||
--theme-color-11: var(--theme-shade-positive-01);
|
||||
--theme-color-12: var(--theme-shade-positive-02);
|
||||
--theme-color-13: var(--theme-shade-positive-03);
|
||||
--theme-color-14: var(--theme-shade-positive-04);
|
||||
--theme-color-15: var(--theme-shade-positive-05);
|
||||
--theme-color-16: var(--theme-shade-positive-06);
|
||||
--theme-color-17: var(--theme-shade-positive-07);
|
||||
--theme-color-18: var(--theme-shade-positive-08);
|
||||
--theme-color-19: var(--theme-shade-positive-09);
|
||||
--theme-color-20: var(--theme-shade-positive-10);
|
||||
--theme-style-text: var(--theme-white);
|
||||
}
|
||||
|
||||
.is-theme-style-light {
|
||||
/* theme */
|
||||
--theme-color: var(--theme-shade);
|
||||
--theme-color-01: var(--theme-shade-pos-10);
|
||||
--theme-color-02: var(--theme-shade-pos-09);
|
||||
--theme-color-03: var(--theme-shade-pos-08);
|
||||
--theme-color-04: var(--theme-shade-pos-07);
|
||||
--theme-color-05: var(--theme-shade-pos-06);
|
||||
--theme-color-06: var(--theme-shade-pos-05);
|
||||
--theme-color-07: var(--theme-shade-pos-04);
|
||||
--theme-color-08: var(--theme-shade-pos-03);
|
||||
--theme-color-09: var(--theme-shade-pos-02);
|
||||
--theme-color-10: var(--theme-shade-pos-01);
|
||||
--theme-color-11: var(--theme-shade-neg-01);
|
||||
--theme-color-12: var(--theme-shade-neg-02);
|
||||
--theme-color-13: var(--theme-shade-neg-03);
|
||||
--theme-color-14: var(--theme-shade-neg-04);
|
||||
--theme-color-15: var(--theme-shade-neg-05);
|
||||
--theme-color-16: var(--theme-shade-neg-06);
|
||||
--theme-color-17: var(--theme-shade-neg-07);
|
||||
--theme-color-18: var(--theme-shade-neg-08);
|
||||
--theme-color-19: var(--theme-shade-neg-09);
|
||||
--theme-color-20: var(--theme-shade-neg-10);
|
||||
--theme-color-01: var(--theme-shade-positive-10);
|
||||
--theme-color-02: var(--theme-shade-positive-09);
|
||||
--theme-color-03: var(--theme-shade-positive-08);
|
||||
--theme-color-04: var(--theme-shade-positive-07);
|
||||
--theme-color-05: var(--theme-shade-positive-06);
|
||||
--theme-color-06: var(--theme-shade-positive-05);
|
||||
--theme-color-07: var(--theme-shade-positive-04);
|
||||
--theme-color-08: var(--theme-shade-positive-03);
|
||||
--theme-color-09: var(--theme-shade-positive-02);
|
||||
--theme-color-10: var(--theme-shade-positive-01);
|
||||
--theme-color-11: var(--theme-shade-negative-01);
|
||||
--theme-color-12: var(--theme-shade-negative-02);
|
||||
--theme-color-13: var(--theme-shade-negative-03);
|
||||
--theme-color-14: var(--theme-shade-negative-04);
|
||||
--theme-color-15: var(--theme-shade-negative-05);
|
||||
--theme-color-16: var(--theme-shade-negative-06);
|
||||
--theme-color-17: var(--theme-shade-negative-07);
|
||||
--theme-color-18: var(--theme-shade-negative-08);
|
||||
--theme-color-19: var(--theme-shade-negative-09);
|
||||
--theme-color-20: var(--theme-shade-negative-10);
|
||||
--theme-style-text: var(--theme-black);
|
||||
}
|
||||
|
||||
|
||||
@ -184,67 +184,67 @@
|
||||
<div class="form-wrap">
|
||||
<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="theme-color-box theme-color-neg-10"></div>
|
||||
<div class="theme-color-box theme-color-negative-10"></div>
|
||||
</div>
|
||||
<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 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 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 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 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 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 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 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 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 class="form-group-text form-group-text-borderless form-group-item-small">
|
||||
<div class="theme-color-box theme-color"></div>
|
||||
</div>
|
||||
<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 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 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 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 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 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 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 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 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 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>
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="theme-color" content="#262831">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<title>New Tab</title>
|
||||
|
||||
|
||||
@ -92,7 +92,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.hsl();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-accent-rgb-color-quick",
|
||||
@ -4273,7 +4275,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.hsl();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-rgb-text",
|
||||
@ -4339,7 +4343,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.hsl();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-rgb-default",
|
||||
@ -4347,7 +4353,9 @@ var control = (function() {
|
||||
func: function() {
|
||||
mod.default("theme.color.rgb");
|
||||
theme.mod.color.hsl();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
render.update.control.header();
|
||||
render.update.control.menu();
|
||||
}
|
||||
@ -4403,7 +4411,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.rgb();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-hsl-h-number",
|
||||
@ -4457,7 +4467,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.rgb();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-hsl-s-range",
|
||||
@ -4511,7 +4523,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.rgb();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-hsl-s-number",
|
||||
@ -4565,7 +4579,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.rgb();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-hsl-l-range",
|
||||
@ -4619,7 +4635,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.rgb();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-hsl-l-number",
|
||||
@ -4673,7 +4691,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.rgb();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-rgb-r-range",
|
||||
@ -4727,7 +4747,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.hsl();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-rgb-r-number",
|
||||
@ -4781,7 +4803,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.hsl();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-rgb-g-range",
|
||||
@ -4835,7 +4859,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.hsl();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-rgb-g-number",
|
||||
@ -4889,7 +4915,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.hsl();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-rgb-b-range",
|
||||
@ -4943,7 +4971,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.hsl();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-rgb-b-number",
|
||||
@ -4997,7 +5027,9 @@ var control = (function() {
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.hsl();
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-contrast-light-range",
|
||||
@ -5016,7 +5048,9 @@ var control = (function() {
|
||||
valueConvert: ["float"]
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-contrast-light-number",
|
||||
@ -5035,14 +5069,18 @@ var control = (function() {
|
||||
valueConvert: ["float"]
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-contrast-light-default",
|
||||
type: "button",
|
||||
func: function() {
|
||||
mod.default("theme.color.contrast.light");
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
render.update.control.header();
|
||||
render.update.control.menu();
|
||||
}
|
||||
@ -5063,7 +5101,9 @@ var control = (function() {
|
||||
valueConvert: ["float"]
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-contrast-dark-number",
|
||||
@ -5082,14 +5122,18 @@ var control = (function() {
|
||||
valueConvert: ["float"]
|
||||
}],
|
||||
func: function() {
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
}
|
||||
}, {
|
||||
element: ".control-theme-color-contrast-dark-default",
|
||||
type: "button",
|
||||
func: function() {
|
||||
mod.default("theme.color.contrast.dark");
|
||||
theme.mod.color.generated();
|
||||
theme.render.color.shade();
|
||||
theme.render.themeMetaTag();
|
||||
render.update.control.header();
|
||||
render.update.control.menu();
|
||||
}
|
||||
|
||||
@ -270,7 +270,8 @@ var state = (function() {
|
||||
contrast: {
|
||||
light: 4,
|
||||
dark: 4
|
||||
}
|
||||
},
|
||||
generated: {}
|
||||
},
|
||||
font: {
|
||||
display: {
|
||||
|
||||
114
src/js/theme.js
114
src/js/theme.js
@ -172,6 +172,50 @@ var theme = (function() {
|
||||
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 = {
|
||||
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 hsl = helper.convertColor.rgb.hsl(state.get.current().theme.color.rgb);
|
||||
var renderShade = function(name, index, 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]);
|
||||
// negative
|
||||
for (var i = 10; i >= 1; i--) {
|
||||
var rgb = state.get.current().theme.color.generated.negative[i];
|
||||
var number = i;
|
||||
if (i < 10) {
|
||||
number = "0" + number;
|
||||
};
|
||||
if (index < 10) {
|
||||
index = "0" + index;
|
||||
html.style.setProperty("--theme-shade-negative-" + number, rgb.r + ", " + rgb.g + ", " + rgb.b);
|
||||
};
|
||||
// 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);
|
||||
};
|
||||
// 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);
|
||||
html.style.setProperty("--theme-shade-positive-" + number, rgb.r + ", " + rgb.g + ", " + rgb.b);
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -1572,6 +1598,7 @@ var theme = (function() {
|
||||
themePresetButton.addEventListener("click", function() {
|
||||
mod.apply(mod.preset.get(index));
|
||||
data.save();
|
||||
mod.color.generated();
|
||||
render.font.display.name();
|
||||
render.font.display.weight();
|
||||
render.font.display.style();
|
||||
@ -1583,6 +1610,7 @@ var theme = (function() {
|
||||
render.radius();
|
||||
render.shadow();
|
||||
render.shade.opacity();
|
||||
render.themeMetaTag();
|
||||
style.check();
|
||||
link.groupAndItems();
|
||||
control.render.update.control.header();
|
||||
@ -1665,6 +1693,7 @@ var theme = (function() {
|
||||
themeCustomButton.addEventListener("click", function() {
|
||||
mod.apply(mod.custom.get(index));
|
||||
data.save();
|
||||
mod.color.generated();
|
||||
render.font.display.name();
|
||||
render.font.display.weight();
|
||||
render.font.display.style();
|
||||
@ -1676,6 +1705,7 @@ var theme = (function() {
|
||||
render.radius();
|
||||
render.shadow();
|
||||
render.shade.opacity();
|
||||
render.themeMetaTag();
|
||||
style.check();
|
||||
link.groupAndItems();
|
||||
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 = {
|
||||
random: function() {
|
||||
mod.accent.random();
|
||||
@ -1967,6 +2007,7 @@ var theme = (function() {
|
||||
|
||||
var init = function() {
|
||||
accent.random();
|
||||
mod.color.generated();
|
||||
mod.accent.random();
|
||||
mod.custom.close();
|
||||
render.font.load.preset();
|
||||
@ -1985,6 +2026,7 @@ var theme = (function() {
|
||||
render.shade.opacity();
|
||||
render.preset();
|
||||
render.custom.all();
|
||||
render.themeMetaTag();
|
||||
custom.check();
|
||||
};
|
||||
|
||||
|
||||
@ -843,6 +843,10 @@ var update = (function() {
|
||||
data.state.header.search.style = "box";
|
||||
delete data.state.header.button;
|
||||
return data;
|
||||
},
|
||||
"4.38.0": function(data) {
|
||||
data.state.theme.color.generated = {};
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "4.37.2";
|
||||
var current = "4.38.0";
|
||||
|
||||
var name = "Naughty Goose";
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"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.",
|
||||
"version": "4.37.2",
|
||||
"version": "4.38.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="theme-color" content="#262831">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<title>Style Guide</title>
|
||||
<!-- css-block -->
|
||||
@ -361,7 +360,7 @@
|
||||
s: hsl.s - (saturationShift * 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++) {
|
||||
var rgb = helper.convertColor.hsl.rgb({
|
||||
@ -369,7 +368,7 @@
|
||||
s: hsl.s + (saturationShift * i),
|
||||
l: hsl.l + (lightShift * i)
|
||||
});
|
||||
renderShade("--theme-shade-pos-", i, rgb);
|
||||
renderShade("--theme-shade-positive-", i, rgb);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user