-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
97 lines (87 loc) · 2.55 KB
/
index.js
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
94
95
96
97
(function (root, factory) {
if (typeof define === "function" && define.amd) {
/*AMD. Register as an anonymous module.
*define([], factory); */
define([], factory());
} else if (typeof module === "object" && module.exports) {
/*Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.*/
module.exports = factory();
} else {
/*Browser globals (root is window)*/
root["dark-mode-dropdown"] = factory();
}
})(this, function () {
const THEME_ID = "theme-check";
const THEME_STORAGE = "theme";
const MODE_LIST = {
"os-default": "os-default-icon",
light: "light-icon",
dark: "dark-icon",
};
const OPTION = {
"--Please choose an option--": "",
"OS Default": "os-default",
Light: "light",
Dark: "dark",
};
const html = document.documentElement;
const theme = window.localStorage.getItem(THEME_STORAGE);
const mode = theme || "os-default";
const dropdown = {};
dropdown.init = function () {
if (window && html) {
// 插入 meta 标签
let oMeta = document.createElement("meta");
oMeta.content = "light dark";
oMeta.name = "color-scheme";
document.getElementsByTagName("head")[0].appendChild(oMeta);
// 初始化类名
html.className = mode;
html.style.backgroundColor = "";
}
// 插入select
let mySelect = document.createElement("select");
mySelect.id = THEME_ID;
Object.keys(OPTION).forEach((item) => {
let text = item;
let value = OPTION[text];
mySelect.options.add(new Option(text, value)); //这个兼容IE与firefox
});
document.body.appendChild(mySelect);
mySelect.addEventListener("change", changeTheme);
// 引入css
loadStyle("index.css");
if (theme) {
changeSelect(mySelect, theme);
}
};;
function loadStyle(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
function changeSelect(node, optionVal) {
for (let i = 0; i < node.length; i++) {
if (node[i].value == optionVal) {
node[i].selected = true;
}
}
}
function changeTheme(e) {
const theme = e.target.value;
if (window && html) {
html.className = theme;
html.style.backgroundColor = "";
window.localStorage.setItem(THEME_STORAGE, theme);
}
}
function getModeClass() {
return MODE_LIST[mode];
}
return dropdown;
});