好用的 Darkmode.js

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
xxxxxxxxxx
 
1
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>

var options = {
    bottom: '32px', // default: '32px'
    right: '32px', // default: '32px'
    left: 'unset', // default: 'unset'
    time: '0.3s', // default: '0.3s'
    mixColor: '#fff', // default: '#fff'
    backgroundColor: '#fff',  // default: '#fff'
    buttonColorDark: '#100f2c',  // default: '#100f2c'
    buttonColorLight: '#fff', // default: '#fff'
    saveInCookies: true, // default: true,
    label: '🌓' // default: ''
};


new Darkmode(options).showWidget();
​x
 
1
var options = {
2
    bottom: '32px', // default: '32px'
3
    right: '32px', // default: '32px'
4
    left: 'unset', // default: 'unset'
5
    time: '0.3s', // default: '0.3s'
6
    mixColor: '#fff', // default: '#fff'
7
    backgroundColor: '#fff',  // default: '#fff'
8
    buttonColorDark: '#100f2c',  // default: '#100f2c'
9
    buttonColorLight: '#fff', // default: '#fff'
10
    saveInCookies: true, // default: true,
11
    label: '' // default: ''
12
};
13
​
14
​
15
new Darkmode(options).showWidget();

.darkmode-layer, .darkmode-toggle {
    z-index: 500;
}


.darkmode-toggle {
    border-radius: 50% ;
}


.darkmode-layer--button {
    border-radius: 50% ;
}
xxxxxxxxxx
 
1
.darkmode-layer, .darkmode-toggle {
2
    z-index: 500;
3
}
4
​
5
​
6
.darkmode-toggle {
7
    border-radius: 50% ;
8
}
9
​
10
​
11
.darkmode-layer--button {
12
    border-radius: 50% ;
13
}