extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-08-04 12:01:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add support for system prefered colour scheme

Browse Source
This commit is contained in:
zombieFox
2020-04-20 17:22:04 +01:00
parent 88a3c0572d
commit 79685343f5
9 changed files with 90 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

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

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "nightTab",
"version": "5.14.0",
"version": "5.15.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": {

54
src/css/variables.css
View File

@ -330,6 +330,60 @@
--theme-style-text: var(--theme-black);
}
@media (prefers-color-scheme: light) {
.is-theme-style-system {
--theme-color: var(--theme-shade);
--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);
}
}
@media (prefers-color-scheme: dark) {
.is-theme-style-system {
--theme-color: var(--theme-shade);
--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-link-style-block {
/* link */
--link-item-width: 11em;

4
src/html/menu/content/theme/style.html
View File

@ -11,6 +11,10 @@
<input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
<label for="control-theme-style-light"><span class="label-icon"></span> Light</label>
</div>
<div class="form-wrap">
<input id="control-theme-style-system" class="control-theme-style-system" type="radio" name="control-theme-style" value="system" tabindex="-1">
<label for="control-theme-style-system"><span class="label-icon"></span> Follow system light or dark</label>
</div>
<div class="form-helper">
<p class="control-theme-style-helper form-helper-item">Flip the colour shades defined by the primary Colour.</p>
</div>

7
src/js/control.js
View File

@ -4649,6 +4649,13 @@ var control = (function() {
func: function() {
theme.style.light();
}
}, {
element: ".control-theme-style-system",
path: "theme.style",
type: "radio",
func: function() {
theme.style.system();
}
}],
color: [{
element: ".control-theme-color-rgb-color",

1
src/js/keyboard.js
View File

@ -124,7 +124,6 @@ var keyboard = (function() {
// ctrl+alt+d
if (event.ctrlKey && event.altKey && event.keyCode == 68) {
theme.style.toggle();
control.render.update.control.header();
control.render.update.control.menu();
data.save();
};

21
src/js/theme.js
View File

@ -137,6 +137,13 @@ var theme = (function() {
path: "theme.style",
newValue: "dark"
});
},
system: function() {
helper.setObject({
object: state.get.current(),
path: "theme.style",
newValue: "system"
});
}
};
@ -1700,11 +1707,19 @@ var theme = (function() {
var html = helper.e("html");
helper.addClass(html, "is-theme-style-dark");
helper.removeClass(html, "is-theme-style-light");
helper.removeClass(html, "is-theme-style-system");
},
light: function() {
var html = helper.e("html");
helper.removeClass(html, "is-theme-style-dark");
helper.addClass(html, "is-theme-style-light");
helper.removeClass(html, "is-theme-style-system");
},
system: function() {
var html = helper.e("html");
helper.removeClass(html, "is-theme-style-dark");
helper.removeClass(html, "is-theme-style-light");
helper.addClass(html, "is-theme-style-system");
}
};
@ -2290,11 +2305,17 @@ var theme = (function() {
mod.style.light();
render.style.light();
},
system: function() {
mod.style.system();
render.style.system();
},
check: function() {
if (state.get.current().theme.style == "dark") {
style.dark();
} else if (state.get.current().theme.style == "light") {
style.light();
} else if (state.get.current().theme.style == "system") {
style.system();
};
},
toggle: function() {

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "5.14.0";
var current = "5.15.0";
var name = "Zonked Tarsier";

2
src/manifest.json
View File

@ -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": "5.14.0",
"version": "5.15.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"