forked from mazipan-quran-offline/baca-quran.id
-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.html
93 lines (85 loc) · 2.57 KB
/
app.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="id">
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
<link rel="icon" type="image/png" sizes="32x32" href="/star-logo-color-32.png">
<link rel="icon" type="image/png" sizes="64x64" href="/star-logo-color-64.png">
<style>
/* THEME LIGHT -- start*/
.light {
--text-color: #071e3d;
--text-surah-header-color: #071e3d;
--link-color: #3ba7f0;
--bg-color: #f6f7f8;
--bg-card-color: #f6f7f8;
--bg-card-darken-color: #c8cbcd;
--bg-body-color: #ececec;
}
/* THEME LIGHT -- end*/
/* THEME DARK -- start*/
.dark {
--text-color: #fff;
--text-surah-header-color: #fff;
--link-color: #3671e6;
--bg-color: #071e3d;
--bg-card-color: #1f4287;
--bg-card-darken-color: #040c0f;
--bg-body-color: #071e3d;
}
/* THEME DARK -- end*/
/* THEME NATURE -- start*/
.nature {
--text-color: #333;
--text-surah-header-color: #028e71;
--link-color: #028e71;
--bg-color: #02c39a;
--bg-card-color: #02c39a;
--bg-card-darken-color: #028e71;
--bg-body-color: #a3e9da;
}
/* THEME NATURE -- end*/
/* THEME SEPIA -- start*/
.sepia {
--text-color: #FFF;
--text-surah-header-color: #5f4938;
--link-color: #5f4938;
--bg-color: #d0bc91;
--bg-card-color: #8a6c44;
--bg-card-darken-color: #5f4938;
--bg-body-color: #c6c4bc;
}
/* THEME NATURE -- end*/
</style>
</head>
<body {{ BODY_ATTRS }} class="dark">
<script>
(function () {
window.__theme_colors = { 'dark': '#1f4287', 'light': '#f6f7f8', 'nature': '#02c39a' };
window.__onThemeChange = function () { };
function setTheme(newTheme) {
window.__theme = newTheme;
preferredTheme = newTheme;
document.body.className = newTheme;
document.querySelector('meta[name="theme-color"]').setAttribute("content", window.__theme_colors[newTheme]);
window.__onThemeChange(newTheme);
}
var preferredTheme;
try {
preferredTheme = localStorage.getItem('theme');
} catch (err) { }
window.__setPreferredTheme = function (newTheme) {
setTheme(newTheme);
try {
localStorage.setItem('theme', newTheme);
} catch (err) { }
}
var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkQuery.addListener(function (e) {
window.__setPreferredTheme(e.matches ? 'dark' : 'light')
});
setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
})();
</script>
{{ APP }}
</body>
</html>