Dark mode for random html
Toggle light/dark mode for any web page.
Read more on: https://darkmodejs.learn.uno/
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<p
style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; margin-top: 1.5em; margin-bottom: 1.5em; font-size: 1.1875em; font-family: "Mercury SSm A", "Mercury SSm B", Georgia, Times, "Times New Roman", "Microsoft YaHei New", "Microsoft Yahei", 微软雅黑, 宋体, SimSun, STXihei, 华文细黑, serif; line-height: 1.5; animation: 1000ms linear 0s 1 normal none running fadeInLorem;">
<font color="#0a0a0a" style="background-color: rgb(255, 255, 255);">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac turpis egestas
maecenas pharetra convallis posuere. Pulvinar mattis nunc sed blandit libero. Eget velit aliquet sagittis id
consectetur purus ut. Quis blandit turpis cursus in hac. Euismod elementum nisi quis eleifend. Neque
volutpat ac tincidunt vitae semper quis lectus. Dui id ornare arcu odio ut. Cursus mattis molestie a
iaculis. Odio ut sem nulla pharetra diam sit.</font>
</p>
<p
style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; margin-top: 1.5em; margin-bottom: 1.5em; font-size: 1.1875em; font-family: "Mercury SSm A", "Mercury SSm B", Georgia, Times, "Times New Roman", "Microsoft YaHei New", "Microsoft Yahei", 微软雅黑, 宋体, SimSun, STXihei, 华文细黑, serif; line-height: 1.5; animation: 1000ms linear 0s 1 normal none running fadeInLorem; background-color: rgb(85, 98, 113);">
<font color="#f7f5f5">Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Metus
aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Ultrices tincidunt arcu non sodales
neque. Ipsum nunc aliquet bibendum enim facilisis gravida. Consequat ac felis donec...
JavaScript
var options = {
bottom: '64px', // default: '32px'
right: 'unset', // default: '32px'
left: '32px', // default: 'unset'
time: '0.5s', // default: '0.3s'
mixColor: '#fff', // default: '#fff'
backgroundColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: false, // default: true,
label: '🌓' // default: ''
}
const darkmode = new Darkmode(options);
darkmode.showWidget();