diff --git a/src/assets/scss/_styles.scss b/src/assets/scss/_styles.scss
index 5c185f2a..c30a105e 100644
--- a/src/assets/scss/_styles.scss
+++ b/src/assets/scss/_styles.scss
@@ -7,6 +7,10 @@ a {
   @extend %link;
 }
 
+.header-icon {
+  @apply text-site-header-text hover:text-site-header-text-hover;
+}
+
 /* Badge CSS */
 %badge {
   @apply px-3 py-2 border rounded-full border-style-primary;
diff --git a/src/components/AppHeader.astro b/src/components/AppHeader.astro
index 7b194b23..6dc0fa9b 100644
--- a/src/components/AppHeader.astro
+++ b/src/components/AppHeader.astro
@@ -1,14 +1,14 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
+import Icon from '@/components/Icon.astro'
+import ThemeSelector from '@/components/ThemeSelector.astro'
 import siteConfig from '@/configs/site'
 
-import Icon from './Icon.astro'
-
 export interface Props extends HTMLAttributes<'svg'> {}
 
 const { ...props } = Astro.props
-const { title, description, author } = siteConfig
+const { title, description, author, themes } = siteConfig
 ---
 
 <div class="header-container">
@@ -42,6 +42,12 @@ const { title, description, author } = siteConfig
       <a href="/rss.xml" class="header-icon">
         <Icon name="bi:rss-fill" size={20} class="ml-2" />
       </a>
+      <ThemeSelector
+        themes={themes}
+        fallbackLightTheme="leetcode-light"
+        fallbackDarkTheme="leetcode-dark"
+        iconClass="header-icon"
+      />
     </div>
   </div>
 </div>
@@ -52,10 +58,6 @@ const { title, description, author } = siteConfig
     @apply bg-site-header-bg border-b-site-header-border;
   }
 
-  .header-icon {
-    @apply text-site-header-text hover:text-site-header-text-hover;
-  }
-
   .site-title {
     @apply text-site-title hover:text-site-header-text-hover;
   }
diff --git a/src/components/ThemeSelector.astro b/src/components/ThemeSelector.astro
new file mode 100644
index 00000000..411c8234
--- /dev/null
+++ b/src/components/ThemeSelector.astro
@@ -0,0 +1,162 @@
+---
+import bi from '@iconify-json/bi/icons.json'
+
+import Icon from '@/components/Icon.astro'
+
+interface ThemeMeta {
+  name: string
+  icon: string
+}
+
+export interface Props {
+  themes: Record<string, ThemeMeta>
+  fallbackLightTheme: string
+  fallbackDarkTheme: string
+  iconClass: string
+}
+
+const STORAGE_KEY_THEME: string = 'theme'
+
+const { themes, fallbackLightTheme, fallbackDarkTheme, iconClass } = Astro.props
+const defaultTheme = fallbackDarkTheme
+const icons = bi.icons
+---
+
+<div class="group relative inline-block text-left">
+  <button
+    id="theme-switcher-btn"
+    type="button"
+    class="ml-2"
+    style="margin-top: 3px;"
+  >
+    <Icon
+      id="theme-switcher-icon"
+      class={iconClass}
+      name="bi:palette-fill"
+      size={20}
+    />
+  </button>
+  <div
+    id="theme-select"
+    class="hidden group-hover:block absolute right-0 z-10 w-40 origin-top-right focus:outline-none"
+    role="menu"
+    aria-orientation="vertical"
+    aria-labelledby="menu-button"
+    tabindex="-1"
+  >
+    <div class="theme-option" role="none">
+      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
+      {
+        Object.keys(themes).map((themeId: string) => (
+          <a href="#" role="menuitem" tabindex="-1" data-theme={themeId}>
+            <Icon
+              id={`theme-icon-${themeId}`}
+              class="inline"
+              name={themes[themeId]?.icon}
+              size={16}
+            />
+            {themes[themeId]?.name}
+          </a>
+        ))
+      }
+    </div>
+  </div>
+</div>
+
+<script
+  define:vars={{
+    icons,
+    STORAGE_KEY_THEME,
+    themes,
+    defaultTheme,
+    fallbackLightTheme,
+    fallbackDarkTheme,
+  }}
+>
+  const themeIds = Object.keys(themes)
+  const themeIcons = themeIds.map((themeId) => themes[themeId].icon)
+
+  const storedTheme = (() => {
+    if (
+      typeof localStorage !== 'undefined' &&
+      localStorage.getItem(STORAGE_KEY_THEME)
+    ) {
+      const storedTheme = localStorage.getItem(STORAGE_KEY_THEME)
+      return themeIds.includes(storedTheme) ? storedTheme : fallbackDarkTheme
+    }
+
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return fallbackDarkTheme
+    }
+
+    return fallbackLightTheme
+  })()
+
+  themeIds.forEach((themeId) => {
+    if (storedTheme === themeId) {
+      document.documentElement.classList.add(themeId)
+    } else {
+      document.documentElement.classList.remove(themeId)
+    }
+  })
+
+  window.localStorage.setItem(STORAGE_KEY_THEME, storedTheme || defaultTheme)
+
+  const themeSelectEl = document.getElementById('theme-select')
+  const toggleThemeMenu = () => themeSelectEl.classList.toggle('hidden')
+  const hideThemeMenu = () => themeSelectEl.classList.add('hidden')
+
+  const switchTheme = (evt) => {
+    let themeToSwitch = evt.target.getAttribute('data-theme')
+    const isSupportedTheme = themeIds.includes(themeToSwitch)
+
+    if (isSupportedTheme) {
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      themeToSwitch = fallbackDarkTheme
+    } else {
+      themeToSwitch = fallbackLightTheme
+    }
+    localStorage.setItem(STORAGE_KEY_THEME, themeToSwitch)
+
+    themeIds.forEach((themeId) => {
+      if (themeToSwitch === themeId) {
+        document.documentElement.classList.add(themeId)
+      } else {
+        document.documentElement.classList.remove(themeId)
+      }
+    })
+
+    const themeSwitcherIcon = document.getElementById('theme-switcher-icon')
+    const themeIcon = themes[themeToSwitch].icon
+    themeIcons.forEach((icon) => {
+      if (icon === themeIcon) {
+        themeSwitcherIcon.classList.add(icon)
+      } else {
+        themeSwitcherIcon.classList.remove(icon)
+      }
+    })
+
+    const iconId = typeof themeIcon === 'string' ? themeIcon.split(':')[1] : ''
+    if (iconId.length > 0) {
+      themeSwitcherIcon.innerHTML = icons[iconId].body
+    }
+    hideThemeMenu()
+  }
+
+  document
+    .getElementById('theme-switcher-btn')
+    ?.addEventListener('click', toggleThemeMenu)
+  document
+    .querySelectorAll('.theme-option a')
+    .forEach((item) => item.addEventListener('click', switchTheme))
+</script>
+
+<style lang="scss">
+  .theme-option {
+    @apply bg-theme-menu-bg;
+    & a {
+      @apply bg-transparent text-style-primary block px-4 py-2 text-sm;
+      @apply hover:bg-theme-menu-bg-hover hover:text-theme-menu-text-hover;
+    }
+  }
+</style>
diff --git a/src/configs/site.ts b/src/configs/site.ts
index 01ba0d13..ed0eb3af 100644
--- a/src/configs/site.ts
+++ b/src/configs/site.ts
@@ -16,6 +16,16 @@ export default {
   },
   favicon: '/favicon.ico',
   faviconMimeType: 'image/x-icon',
+  themes: {
+    'leetcode-light': {
+      name: 'LeetCode Light',
+      icon: 'bi:sun-fill',
+    },
+    'leetcode-dark': {
+      name: 'LeetCode Dark',
+      icon: 'bi:moon-fill',
+    },
+  },
   plugins: {
     counterAnalytics: {
       projectId: env.COUNTER_ANALYTICS_ID,
diff --git a/theme.config.cjs b/theme.config.cjs
index 7b0f1cea..c2455b4a 100644
--- a/theme.config.cjs
+++ b/theme.config.cjs
@@ -46,6 +46,9 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
         'header-text': baseColors.text,
         'header-text-hover': baseColors.fill,
       },
+      'theme-menu': {
+        'text-hover': baseColors.fill,
+      },
       difficulty: {
         ...textDifficultyColors,
       },
@@ -60,6 +63,10 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
         'bg': '#1a1a1a',
         'header-bg': '#282828',
       },
+      'theme-menu': {
+        'bg': colors.zinc['800'],
+        'bg-hover': tertiary,
+      },
       difficulty: {
         easy: themeColors.leetcode.easy,
         'easy-hover': baseColors.text,
@@ -118,6 +125,9 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
         'header-text': baseColors['text-inverted'],
         'header-text-hover': colors.gray['300'],
       },
+      'theme-menu': {
+        'text-hover': baseColors.fill,
+      },
       difficulty: {
         ...textDifficultyColors,
       },
@@ -132,6 +142,10 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
         'bg': colors.white,
         'header-bg': primary,
       },
+      'theme-menu': {
+        'bg': baseColors['text-inverted'],
+        'bg-hover': colors.gray['100'],
+      },
       difficulty: {
         easy: themeColors.leetcode.easy,
         'easy-hover': baseColors.text,