function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    } else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light');
    }
}

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
toggleSwitch.addEventListener('change', switchTheme, false);

const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

:root {
  /* colors */
  --theme-border: #d7d7d7;
  --theme-foreground: #212121;
  --theme-background: #ffffff;
  --theme-footer-foreground: #ffffff;
  --theme-footer-background: #212121;
  --theme-gray: #282828;
  --theme-note: #4040ae;
  --theme-note-foreground: #ffffff;
  --theme-link: #0000c0;
  --theme-link-visited: #001087;
  --theme-inverted-link: #00bcff;
  --theme-inverted-link-visited: #80b2f0;

  /* -- Code Block Colors -- */

  /* --- Light Theme */
  --theme-code-light-background:   #f0f0f0;
  --theme-code-light-foreground:   #505050;
  --theme-code-light-comment:      #75715e;
  --theme-code-light-red:          #f92672;
  --theme-code-light-orange:       #fd971f;
  --theme-code-light-light-orange: #e69f66;
  --theme-code-light-yellow:       #e6db74;
  --theme-code-light-green:        #a6e22e;
  --theme-code-light-blue:         #66d9ef;
  --theme-code-light-purple:       #ae81ff;

  /* --- Dark Theme */
  --theme-code-dark-background:   #191a1b;
  --theme-code-dark-foreground:   #a8a8a8;
  --theme-code-dark-comment:      #75715e;
  --theme-code-dark-red:          #f92672;
  --theme-code-dark-orange:       #fd971f;
  --theme-code-dark-light-orange: #e69f66;
  --theme-code-dark-yellow:       #e6db74;
  --theme-code-dark-green:        #a6e22e;
  --theme-code-dark-blue:         #66d9ef;
  --theme-code-dark-purple:       #ae81ff;

  /* --- Theme Variables */
  --theme-code-background:           var(--theme-code-light-background);
  --theme-code-foreground:           var(--theme-code-light-foreground);
  --theme-code-builtin:              var(--theme-code-light-green);
  --theme-code-comment:              var(--theme-code-light-comment);
  --theme-code-function-name:        var(--theme-code-light-green);
  --theme-code-keyword:              var(--theme-code-light-red);
  --theme-code-string:               var(--theme-code-light-yellow);
  --theme-code-type:                 var(--theme-code-light-blue);
  --theme-code-variable-name:        var(--theme-code-light-orange);
}

[data-theme="dark"] {
  --theme-border: #323232;
  --theme-foreground: #ffffff;
  --theme-background: #000000;
  --theme-footer-foreground: #ffffff;
  --theme-footer-background: #212121;
  --theme-gray: #e0e6f0;
  --theme-note: #9d9def;
  --theme-note-foreground: #ffffff;
  --theme-link: #00bcff;
  --theme-link-visited: #80b2f0;
  --theme-inverted-link: #00bcff;
  --theme-inverted-link-visited: #80b2f0;
  /* --theme-inverted-link: #0000c0; */
  /* --theme-inverted-link-visited: #001087; */

  /* --- Theme Variables */
  --theme-code-background:           var(--theme-code-dark-background);
  --theme-code-foreground:           var(--theme-code-dark-foreground);
  --theme-code-builtin:              var(--theme-code-dark-green);
  --theme-code-comment:              var(--theme-code-dark-comment);
  --theme-code-function-name:        var(--theme-code-dark-green);
  --theme-code-keyword:              var(--theme-code-dark-red);
  --theme-code-string:               var(--theme-code-dark-yellow);
  --theme-code-type:                 var(--theme-code-dark-blue);
  --theme-code-variable-name:        var(--theme-code-dark-orange);
}