59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
import modeOptions from './modeOptions'
|
|
|
|
function render (mode) {
|
|
|
|
switch (mode){
|
|
case 'dark':
|
|
case 'light':
|
|
var script1=document.createElement('script');//创建script标签节点
|
|
script1.setAttribute('type','text/javascript');//设置script类型
|
|
script1.setAttribute('src','https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/sakura.js');//设置js地址
|
|
document.body.appendChild(script1);//将js追加为body的子标签
|
|
}
|
|
|
|
const rootElement = document.querySelector(':root')
|
|
const options = modeOptions[mode]
|
|
let temp = 'dark'
|
|
switch (mode){
|
|
case 'dark':
|
|
case 'simple':
|
|
case 'light':
|
|
temp = mode
|
|
}
|
|
// const opposite = mode === 'dark' ? 'light' : 'dark'
|
|
const opposite = temp
|
|
for (const k in options) {
|
|
rootElement.style.setProperty(k, options[k])
|
|
}
|
|
|
|
rootElement.classList.remove(opposite)
|
|
rootElement.classList.add(mode)
|
|
}
|
|
|
|
/**
|
|
* Sets a color scheme for the website.
|
|
* If browser supports "prefers-color-scheme", 'auto' mode will respect the setting for light or dark mode
|
|
* otherwise it will set a dark theme during night time
|
|
*/
|
|
export default function applyMode (mode) {
|
|
if (mode !== 'auto') {
|
|
render(mode)
|
|
return
|
|
}
|
|
|
|
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
|
|
const isSimpleMode = window.matchMedia('(prefers-color-scheme: simple)').matches
|
|
|
|
if (isDarkMode) render('dark')
|
|
if (isLightMode) render('light')
|
|
if (isSimpleMode) render('simple')
|
|
|
|
if (!isDarkMode && !isLightMode && !isSimpleMode) {
|
|
console.log('You specified no preference for a color scheme or your browser does not support it. I schedule dark mode during night time.')
|
|
const hour = new Date().getHours()
|
|
if (hour < 6 || hour >= 18) render('dark')
|
|
else render('light')
|
|
}
|
|
}
|