dark-mode
/
demo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>dark-mode</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌓</text></svg>" type="image/x-icon">
  <meta description="🌓 Add dark mode/night mode custom elements to your website." />
  <script type="module" src="https://unpkg.com/@uiw/github-corners?module"></script>
  <script src="./main.js"></script>
  <style>
    body {
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    }
    a {
      color: var(--color-theme-text);
    }
  </style>
</head>
<body style="margin: 0 auto; max-width: 520px;">
  <github-corners target="__blank" position="fixed" href="https://github.com/jaywcjlove/dark-mode"></github-corners>
  <dark-mode dark="Dark" light="Light" style="position: fixed;left: 10px;top: 8px;"></dark-mode>
  <h1>Hi there!</h1>
  <div>I'm your cool new webpage! Use the toggle in the <dark-mode style="border: 2px solid blue"></dark-mode> 👈  button to switch my theme.</div>
  <dark-mode onclick="console.log('Hello')" mode="light"></dark-mode>
  <dark-mode dark="Dark" light="Light" style="border: 1px solid red; font-size: 12px;"></dark-mode>
  <br /><br />
  Github: <a href="https://github.com/jaywcjlove/dark-mode.git" target="__blank">@jaywcjlove/dark-mode</a>
  <br />
  <br />
  <script>
    const toggle = document.querySelector('dark-mode');
    const button = document.createElement('button');
    button.textContent = 'Change Theme';
    button.style = 'line-height: 16px';
    button.onclick = () => {
      const theme = document.documentElement.dataset.colorMode;
      toggle.mode = theme === 'light' ? 'dark' : 'light';
      // document.documentElement.setAttribute('data-color-mode', theme === 'light' ? 'dark' : 'light');
    }
    document.body.appendChild(button);
    document.addEventListener('colorschemechange', (e) => {
      console.log(`colorschemechange: Color scheme changed to "${e.detail.colorScheme}" or .`);
      button.textContent = toggle.mode === 'dark' ? 'Change Theme 🌞' : 'Change Theme 🌒';
    });
    document.addEventListener('permanentcolorscheme', (e) => {
      console.log(`~permanentcolorscheme: Color scheme changed to "${e.detail.colorScheme}" or .`);
    });
    const removePermanent = () => document.querySelectorAll('dark-mode').forEach((item) => item.removeAttribute('permanent'));
  </script>
  <button onclick="toggle.light = '明(Light)主题';toggle.dark = '暗(Dark)主题'">Change Label</button>
  <button onclick="removePermanent();">Change permanent</button>
  <br />
  <br />
  <dark-mode permanent></dark-mode>
  <span>👈 The <b>mode</b> is remembered after clicking it.</span>
  <br /><br />
  <script>
    const buttonClean = document.createElement('button');
    document.body.appendChild(buttonClean);
    buttonClean.textContent = `Clean localStorage (${toggle.LOCAL_NANE})`;
    buttonClean.style = 'line-height: 16px';
    buttonClean.onclick = () => {
      localStorage.removeItem(toggle.LOCAL_NANE);
    }
  </script>
  <br /><br />
  <div id="markdown">loading...</div>
  <link rel="stylesheet" href="https://unpkg.com/@wcj/markdown-to-html/dist/marked.css">
  <script src="https://unpkg.com/@wcj/markdown-to-html"></script>
  <script type="text/javascript">
    ;(() => {
      const str = `<%- markdownString.replace(/\`/g, '\\\`').replace(/<\//g, '<\\/').replace(/\$\{/g, '$\\{') %>`;
      const div = document.getElementById('markdown');
      div.className = 'markdown-body';
      div.style = 'padding: 15px 0 25px 0;';
      div.innerHTML = markdown.default(str)
      document.body.appendChild(div)
    })()
  </script>
</body>
</html>