{ "componentChunkName": "component---src-templates-post-js", "path": "/pensieve/dark-mode-toggle", "result": {"data":{"markdownRemark":{"html":"

Dark mode toggle without the flash of default theme. Important bits:

\n\n

HTML

\n
<!DOCTYPE html>\n<html lang=\"en\" data-theme=\"light\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    ...\n    <script>\n      // If there's a theme stored in localStorage, use it on the <html>\n      const localStorageTheme = localStorage.getItem('theme');\n      if (localStorageTheme) {\n        document.documentElement.setAttribute('data-theme', localStorageTheme);\n      }\n    </script>\n  </head>\n  <body>\n    <div class=\"theme-toggle\">\n      <button\n        class=\"theme-toggle-btn js-theme-toggle\"\n        aria-label=\"Activate dark mode\"\n        title=\"Activate dark mode\"\n      >\n        <!--\n        <svg class=\"light-mode\">\n          <use xlink:href=\"#sun\"></use>\n        </svg>\n        <svg class=\"dark-mode\">\n          <use xlink:href=\"#moon\"></use>\n        </svg>\n        -->\n      </button>\n    </div>\n\n    <script src=\"app.js\"></script>\n  </body>\n</html>
\n

CSS Variables

\n
:root {\n  --bg: #ffffff;\n  --text: #000000;\n}\n\n[data-theme='dark'] {\n  --bg: #000000;\n  --text: #ffffff;\n}
\n

JavaScript

\n
app.js
\n
const themeToggleBtn = document.querySelector('.js-theme-toggle');\n\nthemeToggleBtn.addEventListener('click', () => onToggleClick());\n\nconst onToggleClick = () => {\n  const { theme } = document.documentElement.dataset;\n  const themeTo = theme && theme === 'light' ? 'dark' : 'light';\n  const label = `Activate ${theme} mode`;\n\n  document.documentElement.setAttribute('data-theme', themeTo);\n  localStorage.setItem('theme', themeTo);\n\n  themeToggleBtn.setAttribute('aria-label', label);\n  themeToggleBtn.setAttribute('title', label);\n};
\n

Resources

\n","frontmatter":{"title":"Dark Mode Toggle","description":"Dark mode without the flash of default theme","date":"2021-04-21T00:00:00.000Z","slug":"/pensieve/dark-mode-toggle","tags":["Theming","Dark Mode"]}}},"pageContext":{}}, "staticQueryHashes": ["1994492073","2009693873","2031412112","3825832676"]}