diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 1a690d6..022dbb9 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -5,6 +5,29 @@ import './public/css/font.css'
 import './public/css/bgTransparent.css'
 
 const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: 'Site color theme',
+      toolbar: {
+        title: 'Theme',
+        icon: 'mirror',
+        items: [
+          { value: 'light', icon: 'sun', title: 'Light' },
+          { value: 'dark', icon: 'moon', title: 'Dark' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'light',
+  },
+  decorators: [
+    (Story, { globals }) => {
+      document.documentElement.setAttribute('data-theme', globals.theme)
+      return Story()
+    },
+  ],
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
diff --git a/src/app/_layout/_components/consentBanner.tsx b/src/app/_layout/_components/consentBanner.tsx
index 9117dc8..c2c4e9c 100644
--- a/src/app/_layout/_components/consentBanner.tsx
+++ b/src/app/_layout/_components/consentBanner.tsx
@@ -57,7 +57,7 @@ const ConsentBanner = ({
   return (
     <section
       aria-label={region}
-      className="fixed inset-x-3 bottom-3 z-50 mx-auto max-w-xl rounded-md border border-line bg-paper-card p-5 shadow-[0_8px_30px_hsl(var(--ink)/0.12)] sm:inset-x-6 sm:bottom-6"
+      className="fixed inset-x-3 bottom-3 z-50 mx-auto max-w-xl rounded-md border border-line bg-paper-card p-5 shadow-[0_8px_30px_hsl(var(--shadow)/0.12)] sm:inset-x-6 sm:bottom-6"
     >
       <p className="font-mono text-xs leading-5 text-ink-soft">
         {text}{' '}
diff --git a/src/app/_layout/_components/siteHeader.tsx b/src/app/_layout/_components/siteHeader.tsx
index e0fb834..8eb3ea0 100644
--- a/src/app/_layout/_components/siteHeader.tsx
+++ b/src/app/_layout/_components/siteHeader.tsx
@@ -5,6 +5,7 @@ import { Container } from '@/components/Container'
 import { Brand } from './brand'
 import { LanguageToggle } from './languageToggle'
 import { Navigation } from './navigation'
+import { ThemeToggle } from './themeToggle'
 
 const SiteHeader = ({ locale }: { locale: Locale }) => {
   const { ui } = getContent(locale)
@@ -19,11 +20,10 @@ const SiteHeader = ({ locale }: { locale: Locale }) => {
       </a>
       <Container className="flex flex-wrap items-center justify-between gap-x-6 gap-y-3 py-4 md:h-16 md:flex-nowrap md:py-0">
         <Brand href={homeAnchor(locale, 'top')} />
-        <LanguageToggle
-          locale={locale}
-          label={ui.language}
-          className="md:order-last"
-        />
+        <div className="flex items-center gap-4 md:order-last">
+          <LanguageToggle locale={locale} label={ui.language} />
+          <ThemeToggle labels={ui.theme} />
+        </div>
         <Navigation
           items={ui.nav}
           label={ui.primaryNav}
diff --git a/src/app/_layout/_components/themeToggle.tsx b/src/app/_layout/_components/themeToggle.tsx
new file mode 100644
index 0000000..2209c2d
--- /dev/null
+++ b/src/app/_layout/_components/themeToggle.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+import { cn } from '@/utils/cn'
+import { Monitor, Moon, Sun } from 'lucide-react'
+
+import type { SiteContent } from '@/config/content'
+import { Theme, themes } from '@/config/theme'
+import { trackable } from '@/lib/analytics'
+import { readTheme, setTheme, subscribeTheme } from '@/lib/theme'
+
+const icons: Record<Theme, typeof Sun> = {
+  system: Monitor,
+  light: Sun,
+  dark: Moon,
+}
+
+type ThemeToggleProps = {
+  labels: SiteContent['ui']['theme']
+  className?: string
+}
+
+const ThemeToggle = ({ labels, className }: ThemeToggleProps) => {
+  const current = useSyncExternalStore<Theme>(
+    subscribeTheme,
+    readTheme,
+    () => 'system'
+  )
+
+  return (
+    <div
+      role="group"
+      aria-label={labels.label}
+      className={cn(
+        'flex items-center gap-0.5 rounded-md border border-line p-0.5',
+        className
+      )}
+    >
+      {themes.map((theme) => {
+        const Icon = icons[theme]
+        const active = theme === current
+
+        return (
+          <button
+            key={theme}
+            type="button"
+            aria-pressed={active}
+            title={labels[theme]}
+            onClick={() => setTheme(theme)}
+            {...trackable('theme_change', { theme })}
+            className={cn(
+              'grid h-6 w-6 place-items-center rounded transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-pen',
+              active ? 'bg-pen-soft text-ink' : 'text-ink-subtle hover:text-pen'
+            )}
+          >
+            <Icon aria-hidden="true" className="h-3.5 w-3.5" strokeWidth={2} />
+            <span className="sr-only">{labels[theme]}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export { ThemeToggle }
diff --git a/src/app/_layout/global.css b/src/app/_layout/global.css
index 6ba381e..f13613f 100644
--- a/src/app/_layout/global.css
+++ b/src/app/_layout/global.css
@@ -14,6 +14,7 @@
     --line: 43 12% 83%;
     --pen: 224 69% 46%;
     --signal: 146 64% 38%;
+    --shadow: 220 13% 10%;
 
     --background: var(--paper);
     --foreground: var(--ink);
@@ -60,6 +61,30 @@
     font-family: var(--font-sans);
   }
 
+  :root {
+    color-scheme: light;
+  }
+
+  :root[data-theme='dark'] {
+    color-scheme: dark;
+
+    --paper: 40 6% 8%;
+    --paper-card: 40 6% 10.5%;
+    --ink: 42 24% 91%;
+    --ink-soft: 40 9% 76%;
+    --ink-subtle: 40 5% 61%;
+    --line: 40 5% 20%;
+    --pen: 222 88% 73%;
+    --signal: 146 50% 55%;
+    --shadow: 0 0% 0%;
+
+    --muted: 40 5% 14%;
+    --muted-foreground: 40 9% 76%;
+    --primary: 40 5% 13%;
+    --primary-foreground: 42 24% 91%;
+    --secondary: 40 4% 36%;
+  }
+
   html {
     @apply custom-scroll;
     scroll-behavior: smooth;
diff --git a/src/app/_layout/index.tsx b/src/app/_layout/index.tsx
index ce20989..2a8baa0 100644
--- a/src/app/_layout/index.tsx
+++ b/src/app/_layout/index.tsx
@@ -4,6 +4,7 @@ import { cn } from '@/utils/cn'
 
 import { getContent } from '@/config/content'
 import { htmlLang, languageRedirect, Locale, paths } from '@/config/i18n'
+import { themeInit } from '@/config/theme'
 import { fontHand, fontMono, fontSans } from '@/lib/fonts'
 import { DevTools } from '@/components/DevTools'
 
@@ -22,11 +23,12 @@ const RootLayout = ({ locale, children }: RootLayoutProps) => {
 
   return (
     <html lang={htmlLang[locale]} suppressHydrationWarning>
-      {locale === 'en' && (
-        <head>
+      <head>
+        {locale === 'en' && (
           <script dangerouslySetInnerHTML={{ __html: languageRedirect }} />
-        </head>
-      )}
+        )}
+        <script dangerouslySetInnerHTML={{ __html: themeInit }} />
+      </head>
       <body
         className={cn(
           'min-h-screen bg-paper font-sans text-ink antialiased',
diff --git a/src/app/_layout/metadata.tsx b/src/app/_layout/metadata.tsx
index 176cf68..c3f1316 100644
--- a/src/app/_layout/metadata.tsx
+++ b/src/app/_layout/metadata.tsx
@@ -2,6 +2,7 @@ import { Metadata, Viewport } from 'next'
 
 import { Locale, ogLocale, paths } from '@/config/i18n'
 import { __site } from '@/config/site'
+import { themeColor } from '@/config/theme'
 
 const { metadata: meta } = __site
 
@@ -86,7 +87,10 @@ const buildMetadata = (locale: Locale): Metadata => ({
 })
 
 const viewport: Viewport = {
-  themeColor: [{ media: '(prefers-color-scheme: light)', color: '#f7f6f2' }],
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: themeColor.light },
+    { media: '(prefers-color-scheme: dark)', color: themeColor.dark },
+  ],
 }
 
 export { buildMetadata, viewport }
diff --git a/src/components/Mockups/window.tsx b/src/components/Mockups/window.tsx
index 4a1e4f7..821bbcc 100644
--- a/src/components/Mockups/window.tsx
+++ b/src/components/Mockups/window.tsx
@@ -8,7 +8,7 @@ type WindowProps = OptChildClassNameProps & {
 const Window = ({ children, className, chrome = true }: WindowProps) => (
   <div
     className={cn(
-      'rounded-md border border-line bg-paper-card p-4 text-[11px] text-ink shadow-[0_1px_2px_hsl(var(--ink)/0.04)]',
+      'rounded-md border border-line bg-paper-card p-4 text-[11px] text-ink shadow-[0_1px_2px_hsl(var(--shadow)/0.04)]',
       className
     )}
   >
diff --git a/src/config/content/en.ts b/src/config/content/en.ts
index 83fbe91..087025c 100644
--- a/src/config/content/en.ts
+++ b/src/config/content/en.ts
@@ -18,6 +18,7 @@ const en: SiteContent = {
       { id: 'contact', label: 'Contact', href: homeAnchor('en', 'contact') },
     ],
     language: 'Language',
+    theme: { label: 'Theme', system: 'System', light: 'Light', dark: 'Dark' },
     newTab: '(opens in a new tab)',
     stack: 'Stack',
     toolbox: 'Toolbox',
diff --git a/src/config/content/pt.ts b/src/config/content/pt.ts
index 28018dc..3b32edf 100644
--- a/src/config/content/pt.ts
+++ b/src/config/content/pt.ts
@@ -18,6 +18,7 @@ const pt: SiteContent = {
       { id: 'contact', label: 'Contato', href: homeAnchor('pt', 'contact') },
     ],
     language: 'Idioma',
+    theme: { label: 'Tema', system: 'Sistema', light: 'Claro', dark: 'Escuro' },
     newTab: '(abre em nova aba)',
     stack: 'Stack',
     toolbox: 'Ferramentas',
diff --git a/src/config/content/types.ts b/src/config/content/types.ts
index fc859a3..cba933d 100644
--- a/src/config/content/types.ts
+++ b/src/config/content/types.ts
@@ -84,6 +84,7 @@ type Ui = {
   primaryNav: string
   nav: LinkItem[]
   language: string
+  theme: { label: string; system: string; light: string; dark: string }
   newTab: string
   stack: string
   toolbox: string
diff --git a/src/config/privacy.ts b/src/config/privacy.ts
index 69fa027..4046841 100644
--- a/src/config/privacy.ts
+++ b/src/config/privacy.ts
@@ -54,7 +54,7 @@ const en: Policy = {
         'the site that referred you.',
       ],
       after: [
-        'Your answer to the consent banner is kept in your browser’s local storage, under the key “rafer.consent”, so you aren’t asked again. If you pick a language, that choice is kept the same way, under “rafer.lang”. Neither ever leaves your device.',
+        'Your answer to the consent banner is kept in your browser’s local storage, under the key “rafer.consent”, so you aren’t asked again. If you pick a language or a light or dark theme, those choices are kept the same way, under “rafer.lang” and “rafer.theme”. None of them ever leaves your device.',
       ],
     },
     {
@@ -142,7 +142,7 @@ const pt: Policy = {
         'o site que trouxe você até aqui.',
       ],
       after: [
-        'Sua resposta ao aviso de consentimento fica guardada no armazenamento local do seu navegador, na chave “rafer.consent”, para que a pergunta não se repita. Se você escolher um idioma, essa escolha fica guardada do mesmo jeito, na chave “rafer.lang”. Nenhuma das duas sai do seu dispositivo.',
+        'Sua resposta ao aviso de consentimento fica guardada no armazenamento local do seu navegador, na chave “rafer.consent”, para que a pergunta não se repita. Se você escolher um idioma ou um tema claro ou escuro, essas escolhas ficam guardadas do mesmo jeito, nas chaves “rafer.lang” e “rafer.theme”. Nenhuma delas sai do seu dispositivo.',
       ],
     },
     {
diff --git a/src/config/theme.ts b/src/config/theme.ts
new file mode 100644
index 0000000..9a2c096
--- /dev/null
+++ b/src/config/theme.ts
@@ -0,0 +1,42 @@
+const themes = ['system', 'light', 'dark'] as const
+
+type Theme = (typeof themes)[number]
+type Scheme = Exclude<Theme, 'system'>
+
+const THEME_KEY = 'rafer.theme'
+const THEME_EVENT = 'rafer:theme'
+const DARK_QUERY = '(prefers-color-scheme: dark)'
+
+const themeColor: Record<Scheme, string> = {
+  light: '#f7f6f3',
+  dark: '#161513',
+}
+
+const isTheme = (value: unknown): value is Theme =>
+  themes.includes(value as Theme)
+
+const themeInit = `(function () {
+  try {
+    var media = matchMedia('${DARK_QUERY}');
+    var apply = function () {
+      var saved = localStorage.getItem('${THEME_KEY}');
+      var dark = saved === 'dark' || (saved !== 'light' && media.matches);
+      document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
+    };
+    apply();
+    media.addEventListener('change', function () {
+      if (!localStorage.getItem('${THEME_KEY}')) apply();
+    });
+  } catch (e) {}
+})();`
+
+export {
+  DARK_QUERY,
+  isTheme,
+  THEME_EVENT,
+  THEME_KEY,
+  themeColor,
+  themeInit,
+  themes,
+}
+export type { Scheme, Theme }
diff --git a/src/lib/analytics.ts b/src/lib/analytics.ts
index 508139f..474ec5b 100644
--- a/src/lib/analytics.ts
+++ b/src/lib/analytics.ts
@@ -11,6 +11,7 @@ type AnalyticsEvents = {
   contact_click: { method: string }
   nav_click: { section: string }
   language_change: { language: string }
+  theme_change: { theme: string }
   section_view: { section: string }
 }
 
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
new file mode 100644
index 0000000..cc983c4
--- /dev/null
+++ b/src/lib/theme.ts
@@ -0,0 +1,76 @@
+import {
+  DARK_QUERY,
+  isTheme,
+  Scheme,
+  Theme,
+  THEME_EVENT,
+  THEME_KEY,
+  themeColor,
+} from '@/config/theme'
+
+const readTheme = (): Theme => {
+  try {
+    const saved = window.localStorage.getItem(THEME_KEY)
+    return isTheme(saved) ? saved : 'system'
+  } catch {
+    return 'system'
+  }
+}
+
+const systemScheme = (): Scheme =>
+  window.matchMedia(DARK_QUERY).matches ? 'dark' : 'light'
+
+const resolveScheme = (theme: Theme): Scheme =>
+  theme === 'system' ? systemScheme() : theme
+
+const withoutTransitions = (change: () => void) => {
+  const style = document.createElement('style')
+  style.textContent = '*,*::before,*::after{transition:none!important}'
+  document.head.appendChild(style)
+  change()
+  void window.getComputedStyle(document.body).opacity
+  style.remove()
+}
+
+const applyTheme = (theme: Theme) => {
+  const scheme = resolveScheme(theme)
+
+  withoutTransitions(() => {
+    document.documentElement.setAttribute('data-theme', scheme)
+  })
+
+  document
+    .querySelectorAll<HTMLMetaElement>('meta[name="theme-color"]')
+    .forEach((meta) => {
+      const media: Scheme = meta.media.includes('dark') ? 'dark' : 'light'
+      meta.content = themeColor[theme === 'system' ? media : scheme]
+    })
+}
+
+const setTheme = (theme: Theme) => {
+  try {
+    if (theme === 'system') window.localStorage.removeItem(THEME_KEY)
+    else window.localStorage.setItem(THEME_KEY, theme)
+  } catch {}
+
+  applyTheme(theme)
+  window.dispatchEvent(new Event(THEME_EVENT))
+}
+
+const subscribeTheme = (onChange: () => void) => {
+  const onStorage = (event: StorageEvent) => {
+    if (event.key !== THEME_KEY && event.key !== null) return
+    applyTheme(readTheme())
+    onChange()
+  }
+
+  window.addEventListener('storage', onStorage)
+  window.addEventListener(THEME_EVENT, onChange)
+
+  return () => {
+    window.removeEventListener('storage', onStorage)
+    window.removeEventListener(THEME_EVENT, onChange)
+  }
+}
+
+export { readTheme, setTheme, subscribeTheme }
diff --git a/tests/accessibility.spec.ts b/tests/accessibility.spec.ts
index ec81519..2a52759 100644
--- a/tests/accessibility.spec.ts
+++ b/tests/accessibility.spec.ts
@@ -2,18 +2,25 @@ import AxeBuilder from '@axe-core/playwright'
 import { expect, test } from '@playwright/test'
 
 const PAGES = ['/', '/privacy', '/pt', '/pt/privacidade']
+const SCHEMES = ['light', 'dark'] as const
 
 test.describe('Accessibility', () => {
-  for (const path of PAGES) {
-    test(`Should not have any automatically detectable accessibility issues on ${path}`, async ({
-      page,
-    }) => {
-      await page.goto(path)
-      await page.waitForLoadState()
+  for (const scheme of SCHEMES) {
+    for (const path of PAGES) {
+      test(`Should not have any automatically detectable accessibility issues on ${path} (${scheme})`, async ({
+        page,
+      }) => {
+        await page.emulateMedia({ colorScheme: scheme })
+        await page.goto(path)
+        await page.waitForLoadState()
+        await expect(page.locator('html')).toHaveAttribute('data-theme', scheme)
 
-      const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+        const accessibilityScanResults = await new AxeBuilder({
+          page,
+        }).analyze()
 
-      expect(accessibilityScanResults.violations).toEqual([])
-    })
+        expect(accessibilityScanResults.violations).toEqual([])
+      })
+    }
   }
 })
diff --git a/tests/screenshot.spec.ts b/tests/screenshot.spec.ts
index dc5de17..3d05520 100644
--- a/tests/screenshot.spec.ts
+++ b/tests/screenshot.spec.ts
@@ -1,17 +1,19 @@
 import { expect, test } from '@playwright/test'
 
 const HOME = '/'
+const SCHEMES = ['light', 'dark'] as const
 
 test.describe('Screenshot', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.addInitScript(() =>
-      localStorage.setItem('rafer.consent', 'denied')
-    )
-    await page.goto(HOME)
-    await page.evaluate(() => document.fonts.ready)
-  })
+  for (const scheme of SCHEMES) {
+    test(`Full page (${scheme})`, async ({ page }) => {
+      await page.addInitScript(() =>
+        localStorage.setItem('rafer.consent', 'denied')
+      )
+      await page.emulateMedia({ colorScheme: scheme })
+      await page.goto(HOME)
+      await page.evaluate(() => document.fonts.ready)
 
-  test('Full page', async ({ page }) => {
-    await expect(page).toHaveScreenshot({ fullPage: true, timeout: 10000 })
-  })
+      await expect(page).toHaveScreenshot({ fullPage: true, timeout: 10000 })
+    })
+  }
 })
diff --git a/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-1-Mobile-Chrome-linux.png b/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-1-Mobile-Chrome-linux.png
deleted file mode 100644
index 602c069..0000000
Binary files a/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-1-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-1-chromium-linux.png b/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-1-chromium-linux.png
deleted file mode 100644
index 0959939..0000000
Binary files a/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-1-chromium-linux.png and /dev/null differ
diff --git a/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-dark-1-Mobile-Chrome-linux.png b/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-dark-1-Mobile-Chrome-linux.png
new file mode 100644
index 0000000..1d07bfd
Binary files /dev/null and b/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-dark-1-Mobile-Chrome-linux.png differ
diff --git a/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-dark-1-chromium-linux.png b/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-dark-1-chromium-linux.png
new file mode 100644
index 0000000..ef44d12
Binary files /dev/null and b/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-dark-1-chromium-linux.png differ
diff --git a/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-light-1-Mobile-Chrome-linux.png b/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-light-1-Mobile-Chrome-linux.png
new file mode 100644
index 0000000..8e98e07
Binary files /dev/null and b/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-light-1-Mobile-Chrome-linux.png differ
diff --git a/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-light-1-chromium-linux.png b/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-light-1-chromium-linux.png
new file mode 100644
index 0000000..ed02464
Binary files /dev/null and b/tests/screenshot.spec.ts-snapshots/Screenshot-Full-page-light-1-chromium-linux.png differ
diff --git a/tests/theme.spec.ts b/tests/theme.spec.ts
new file mode 100644
index 0000000..5a9f043
--- /dev/null
+++ b/tests/theme.spec.ts
@@ -0,0 +1,122 @@
+import { expect, Page, test } from '@playwright/test'
+
+const THEME_KEY = 'rafer.theme'
+const DARK_PAPER = 'rgb(22, 21, 19)'
+const LIGHT_PAPER = 'rgb(247, 246, 243)'
+
+const toggle = (page: Page, name: string) =>
+  page
+    .getByRole('group', { name: 'Theme' })
+    .getByRole('button', { name, exact: true })
+
+test.describe('Theme', () => {
+  test('Expected - To follow a dark system preference', async ({ page }) => {
+    await page.emulateMedia({ colorScheme: 'dark' })
+    await page.goto('/')
+
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark')
+    await expect(page.locator('body')).toHaveCSS('background-color', DARK_PAPER)
+    await expect(toggle(page, 'System')).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  test('Expected - To follow a light system preference', async ({ page }) => {
+    await page.emulateMedia({ colorScheme: 'light' })
+    await page.goto('/')
+
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'light')
+    await expect(page.locator('body')).toHaveCSS(
+      'background-color',
+      LIGHT_PAPER
+    )
+  })
+
+  test('Expected - To switch live when the system preference changes', async ({
+    page,
+  }) => {
+    await page.emulateMedia({ colorScheme: 'light' })
+    await page.goto('/')
+    await page.emulateMedia({ colorScheme: 'dark' })
+
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark')
+  })
+
+  test('Expected - A manual choice to override the system and persist', async ({
+    page,
+  }) => {
+    await page.emulateMedia({ colorScheme: 'light' })
+    await page.goto('/')
+
+    await toggle(page, 'Dark').click()
+
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark')
+    await expect(toggle(page, 'Dark')).toHaveAttribute('aria-pressed', 'true')
+    expect(
+      await page.evaluate((key) => localStorage.getItem(key), THEME_KEY)
+    ).toBe('dark')
+
+    await page.reload()
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark')
+    await expect(toggle(page, 'Dark')).toHaveAttribute('aria-pressed', 'true')
+
+    await page.goto('/pt')
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark')
+    await expect(
+      page
+        .getByRole('group', { name: 'Tema' })
+        .getByRole('button', { name: 'Escuro', exact: true })
+    ).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  test('Expected - The theme to be set before the page paints', async ({
+    page,
+  }) => {
+    await page.addInitScript((key) => {
+      localStorage.setItem(key, 'dark')
+      document.addEventListener('DOMContentLoaded', () => {
+        document.documentElement.dataset.themeAtParse =
+          document.documentElement.getAttribute('data-theme') ?? ''
+      })
+    }, THEME_KEY)
+    await page.emulateMedia({ colorScheme: 'light' })
+    await page.goto('/')
+
+    await expect(page.locator('html')).toHaveAttribute(
+      'data-theme-at-parse',
+      'dark'
+    )
+  })
+
+  test('Expected - Choosing System to hand control back', async ({ page }) => {
+    await page.addInitScript(
+      (key) => localStorage.setItem(key, 'light'),
+      THEME_KEY
+    )
+    await page.emulateMedia({ colorScheme: 'dark' })
+    await page.goto('/')
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'light')
+
+    await toggle(page, 'System').click()
+
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark')
+    expect(
+      await page.evaluate((key) => localStorage.getItem(key), THEME_KEY)
+    ).toBeNull()
+  })
+
+  test('Expected - The browser theme color to match a manual choice', async ({
+    page,
+  }) => {
+    await page.emulateMedia({ colorScheme: 'light' })
+    await page.goto('/')
+
+    await toggle(page, 'Dark').click()
+
+    const colors = await page
+      .locator('meta[name="theme-color"]')
+      .evaluateAll((metas) =>
+        metas.map((meta) => (meta as HTMLMetaElement).content)
+      )
+    expect(colors.length).toBeGreaterThan(0)
+    expect(new Set(colors)).toEqual(new Set(['#161513']))
+  })
+})