您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Add a Dark Mode / Night Mode to your website in a few seconds
当前为
- // ==UserScript==
- // @name Dark Mode (1point3acres alone)
- // @version 1.2
- // @description Add a Dark Mode / Night Mode to your website in a few seconds
- // @author theabbie
- // @match *://www.1point3acres.com/*
- // @namespace https://theabbie.github.io
- // @license MIT
- // ==/UserScript==
- const IS_BROWSER = true;
- class Darkmode {
- constructor(options) {
- if (!IS_BROWSER) {
- return;
- }
- const defaultOptions = {
- bottom: '32px',
- right: '32px',
- left: 'unset',
- time: '0.3s',
- mixColor: '#fff',
- backgroundColor: '#fff',
- buttonColorDark: '#100f2c',
- buttonColorLight: '#fff',
- label: '',
- saveInCookies: true,
- autoMatchOsTheme: true
- };
- options = Object.assign({}, defaultOptions, options);
- const css = `
- .darkmode-layer {
- position: fixed;
- pointer-events: none;
- background: ${options.mixColor};
- transition: all ${options.time} ease;
- mix-blend-mode: difference;
- }
- .darkmode-layer--button {
- width: 2.9rem;
- height: 2.9rem;
- border-radius: 50%;
- right: ${options.right};
- bottom: ${options.bottom};
- left: ${options.left};
- }
- .darkmode-layer--simple {
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- transform: scale(1) !important;
- }
- .darkmode-layer--expanded {
- transform: scale(100);
- border-radius: 0;
- }
- .darkmode-layer--no-transition {
- transition: none;
- }
- .darkmode-toggle {
- background: ${options.buttonColorDark};
- width: 3rem;
- height: 3rem;
- position: fixed;
- border-radius: 50%;
- border:none;
- right: ${options.right};
- bottom: ${options.bottom};
- left: ${options.left};
- cursor: pointer;
- transition: all 0.5s ease;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .darkmode-toggle--white {
- background: ${options.buttonColorLight};
- }
- .darkmode-toggle--inactive {
- display: none;
- }
- .darkmode-background {
- background: ${options.backgroundColor};
- position: fixed;
- pointer-events: none;
- z-index: -10;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- }
- img, .darkmode-ignore {
- isolation: isolate;
- display: inline-block;
- }
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
- .darkmode-toggle {display: none !important}
- }
- @supports (-ms-ime-align:auto), (-ms-accelerator:true) {
- .darkmode-toggle {display: none !important}
- }
- `;
- const layer = document.createElement('div');
- const button = document.createElement('button');
- const background = document.createElement('div');
- button.innerHTML = options.label;
- button.classList.add('darkmode-toggle--inactive');
- layer.classList.add('darkmode-layer');
- background.classList.add('darkmode-background');
- const darkmodeActivated = window.localStorage.getItem('darkmode') === 'true';
- const preferedThemeOs =
- options.autoMatchOsTheme && window.matchMedia('(prefers-color-scheme: dark)').matches;
- const darkmodeNeverActivatedByAction = window.localStorage.getItem('darkmode') === null;
- if (
- (darkmodeActivated === true && options.saveInCookies) ||
- (darkmodeNeverActivatedByAction && preferedThemeOs)
- ) {
- layer.classList.add(
- 'darkmode-layer--expanded',
- 'darkmode-layer--simple',
- 'darkmode-layer--no-transition'
- );
- button.classList.add('darkmode-toggle--white');
- document.body.classList.add('darkmode--activated');
- }
- document.body.insertBefore(button, document.body.firstChild);
- document.body.insertBefore(layer, document.body.firstChild);
- document.body.insertBefore(background, document.body.firstChild);
- this.addStyle(css);
- this.button = button;
- this.layer = layer;
- this.saveInCookies = options.saveInCookies;
- this.time = options.time;
- }
- addStyle(css) {
- const linkElement = document.createElement('link');
- linkElement.setAttribute('rel', 'stylesheet');
- linkElement.setAttribute('type', 'text/css');
- linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(css));
- document.head.appendChild(linkElement);
- }
- showWidget() {
- if (!IS_BROWSER) {
- return;
- }
- const button = this.button;
- const layer = this.layer;
- const time = parseFloat(this.time) * 1000;
- button.classList.add('darkmode-toggle');
- button.classList.remove('darkmode-toggle--inactive');
- button.setAttribute('aria-label', 'Activate dark mode');
- button.setAttribute('aria-checked', 'false');
- button.setAttribute('role', 'checkbox');
- layer.classList.add('darkmode-layer--button');
- button.addEventListener('click', () => {
- const isDarkmode = this.isActivated();
- if (!isDarkmode) {
- layer.classList.add('darkmode-layer--expanded');
- button.setAttribute('disabled', true);
- setTimeout(() => {
- layer.classList.add('darkmode-layer--no-transition');
- layer.classList.add('darkmode-layer--simple');
- button.removeAttribute('disabled');
- }, time);
- } else {
- layer.classList.remove('darkmode-layer--simple');
- button.setAttribute('disabled', true);
- setTimeout(() => {
- layer.classList.remove('darkmode-layer--no-transition');
- layer.classList.remove('darkmode-layer--expanded');
- button.removeAttribute('disabled');
- }, 1);
- }
- button.classList.toggle('darkmode-toggle--white');
- document.body.classList.toggle('darkmode--activated');
- window.localStorage.setItem('darkmode', !isDarkmode);
- });
- }
- toggle() {
- if (!IS_BROWSER) {
- return;
- }
- const layer = this.layer;
- const isDarkmode = this.isActivated();
- const button = this.button;
- layer.classList.toggle('darkmode-layer--simple');
- document.body.classList.toggle('darkmode--activated');
- window.localStorage.setItem('darkmode', !isDarkmode);
- button.setAttribute('aria-label', 'De-activate dark mode');
- button.setAttribute('aria-checked', 'true');
- }
- isActivated() {
- if (!IS_BROWSER) {
- return null;
- }
- return document.body.classList.contains('darkmode--activated');
- }
- }
- new Darkmode().showWidget();