Skip to content

Commit 63245d8

Browse files
zombieFoxzombieFox
committed
[refactor] [design] improve theme and prevent white flash on load
1 parent f8c4d1b commit 63245d8

File tree

8 files changed

+95
-97
lines changed

8 files changed

+95
-97
lines changed

‎src/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<htmllang="en">
2+
<htmllang="en"style="background-color: rgba(38, 40, 49)">
33

44
<head>
55
<metacharset="utf-8">
@@ -1145,7 +1145,6 @@ <h1 class="menu-item-header-text">nightTab</h1>
11451145
<scriptsrc="js/modal.js"></script>
11461146
<scriptsrc="js/tip.js"></script>
11471147
<scriptsrc="js/shade.js"></script>
1148-
<scriptsrc="js/accent.js"></script>
11491148
<scriptsrc="js/theme.js"></script>
11501149
<scriptsrc="js/date.js"></script>
11511150
<scriptsrc="js/greeting.js"></script>

‎src/js/accent.js‎

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎src/js/control.js‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ var control = (function(){
2525
path: "theme.accent.current",
2626
type: "color",
2727
func: function(){
28-
accent.render();
28+
theme.render.accent.color();
2929
link.clear();
3030
link.render.item.all();
3131
sortable(".link-area");
@@ -1992,15 +1992,15 @@ var control = (function(){
19921992
type: "radio",
19931993
func: function(){
19941994
render();
1995-
accent.render();
1995+
theme.render.accent.color();
19961996
}
19971997
},{
19981998
element: helper.e(".control-theme-style-light"),
19991999
path: "theme.style",
20002000
type: "radio",
20012001
func: function(){
20022002
render();
2003-
accent.render();
2003+
theme.render.accent.color();
20042004
}
20052005
},{
20062006
element: helper.e(".control-theme-radius"),
@@ -2024,7 +2024,7 @@ var control = (function(){
20242024
type: "checkbox",
20252025
func: function(){
20262026
dependents();
2027-
accent.render();
2027+
theme.render.accent.color();
20282028
}
20292029
},{
20302030
element: helper.e(".control-theme-accent-random-style-any"),
@@ -2065,8 +2065,8 @@ var control = (function(){
20652065
element: helper.e(".control-theme-accent-randomise"),
20662066
type: "button",
20672067
func: function(){
2068-
accent.random();
2069-
accent.render();
2068+
theme.render.accent.random();
2069+
theme.render.accent.color();
20702070
link.clear();
20712071
link.render.item.all();
20722072
sortable(".link-area");
@@ -2428,11 +2428,6 @@ var control = (function(){
24282428
helper.addClass(html,"is-layout-scrollpastend");
24292429
};
24302430
};
2431-
var_theme=function(){
2432-
helper.removeClass(html,"is-theme-style-dark");
2433-
helper.removeClass(html,"is-theme-style-light");
2434-
helper.addClass(html,"is-theme-style-"+state.get().theme.style);
2435-
};
24362431
var_background=function(){
24372432
if(state.get().background.image.show){
24382433
helper.addClass(html,"is-background-image-show");
@@ -2444,7 +2439,6 @@ var control = (function(){
24442439
_header();
24452440
_link();
24462441
_layout();
2447-
_theme();
24482442
_background();
24492443
};
24502444

‎src/js/init.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ console.log("nightTab version", version.get());
33
data.init();
44
state.init();
55
bookmarks.init();
6+
theme.init();
67
menu.init();
7-
accent.init();
88
link.init();
99
control.init();
1010
greeting.init();
@@ -17,5 +17,4 @@ background.init();
1717
search.init();
1818
title.init();
1919
header.init();
20-
theme.init();
2120
version.init();

‎src/js/keyboard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ var keyboard = (function(){
3535
// ctrl+alt+d
3636
if(event.ctrlKey&&event.altKey&&event.keyCode==68){
3737
theme.toggle();
38-
control.render();
38+
theme.render.theme();
3939
control.update();
4040
data.save();
4141
};

‎src/js/theme.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,101 @@ var theme = (function(){
2121
};
2222

2323
varrender={
24+
theme: function(){
25+
_renderTheme();
26+
},
2427
radius: function(){
2528
_renderRadius();
29+
},
30+
accent: {
31+
color: function(){
32+
_renderAccentColor();
33+
},
34+
random: function(){
35+
_renderAccentRandom();
36+
}
2637
}
2738
};
2839

40+
var_renderTheme=function(){
41+
varhtml=helper.e("html");
42+
helper.removeClass(html,"is-theme-style-dark");
43+
helper.removeClass(html,"is-theme-style-light");
44+
helper.addClass(html,"is-theme-style-"+state.get().theme.style);
45+
};
46+
2947
var_renderRadius=function(){
3048
varhtml=helper.e("html");
3149
html.style.setProperty("--theme-radius",state.get().theme.radius+"rem");
3250
};
3351

52+
var_renderAccentColor=function(){
53+
varhtml=helper.e("html");
54+
varcolor=state.get().theme.accent.current;
55+
html.style.setProperty("--theme-accent",color.r+", "+color.g+", "+color.b);
56+
};
57+
58+
var_renderAccentRandom=function(){
59+
if(state.get().theme.accent.random.active){
60+
varrandomVal=function(min,max){
61+
returnMath.floor(Math.random()*(max-min)+1)+min;
62+
};
63+
varcolor={
64+
any: function(){
65+
return{
66+
h: randomVal(0,360),
67+
s: randomVal(0,100),
68+
l: randomVal(0,100)
69+
};
70+
},
71+
light: function(){
72+
return{
73+
h: randomVal(0,360),
74+
s: randomVal(50,90),
75+
l: randomVal(50,90)
76+
};
77+
},
78+
dark: function(){
79+
return{
80+
h: randomVal(0,360),
81+
s: randomVal(10,50),
82+
l: randomVal(10,50)
83+
};
84+
},
85+
pastel: function(){
86+
return{
87+
h: randomVal(0,360),
88+
s: 50,
89+
l: 80
90+
};
91+
},
92+
saturated: function(){
93+
return{
94+
h: randomVal(0,360),
95+
s: 100,
96+
l: 50
97+
};
98+
}
99+
};
100+
varhsl=color[state.get().theme.accent.random.style]();
101+
varrandomColor=helper.hslToRgb({
102+
h: hsl.h,
103+
s: (hsl.s/100),
104+
l: (hsl.l/100)
105+
});
106+
helper.setObject({
107+
object: state.get(),
108+
path: "theme.accent.current",
109+
newValue: randomColor
110+
});
111+
helper.e(".control-theme-accent-current").value=helper.rgbToHex(randomColor);
112+
};
113+
};
114+
34115
varinit=function(){
116+
render.theme();
117+
render.accent.random();
118+
render.accent.color();
35119
render.radius();
36120
};
37121

‎src/js/version.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
varversion=(function(){
22

3-
varcurrent="3.30.9";
3+
varcurrent="3.31.0";
44

55
varcompare=function(a,b){
66
varpa=a.split(".");

‎src/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "nightTab",
33
"short_name": "nightTab",
44
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
5-
"version": "3.30.9",
5+
"version": "3.31.0",
66
"manifest_version": 2,
77
"chrome_url_overrides":{
88
"newtab": "index.html"

0 commit comments

Comments
(0)