Skip to main content
CodeInk offers light and dark themes that adapt to your preferences. Switch themes anytime with a single click.

​
Theme Toggle

The theme toggle button is located in the header toolbar, next to the GitHub icon.
1

Locate the theme toggle

Look for the sun/moon icon in the top-right corner of the CodeInk interface.
2

Click to switch themes

Click the theme toggle button to switch between light and dark modes.The theme changes instantly without page reload.
3

Persistent preference

Your theme preference is saved to localStorage and persists across sessions.

​
Available Themes

Light Theme

A clean, bright theme optimized for well-lit environments. Features high contrast for readability.

Dark Theme

A comfortable dark theme that reduces eye strain in low-light conditions. The default theme.

​
Theme Implementation

The theme system is controlled by a data-theme attribute on the document root:
src/components/ThemeToggle.astro
const toggleTheme = () => {
  const nextTheme: Theme = getCurrentTheme() === "dark" ? "light" : "dark"
  document.documentElement.setAttribute("data-theme", nextTheme)
  
  try {
    localStorage.setItem("codeink-theme", nextTheme)
  } catch {}
  
  window.dispatchEvent(
    new CustomEvent("codeink-theme-change", { 
      detail: { theme: nextTheme } 
    })
  )
}

​
Theme Storage

Your theme preference is stored in localStorage under the key codeink-theme: 
const storageKey = "codeink-theme"
localStorage.setItem(storageKey, nextTheme)
If localStorage is unavailable (e.g., in private browsing mode), the theme resets to dark mode on page reload.

​
Theme Events

CodeInk dispatches a custom event when the theme changes: 
window.addEventListener("codeink-theme-change", (e) => {
  const theme = e.detail.theme // "light" or "dark"
  console.log(`Theme changed to: ${theme}`)
})

​
Components That React to Theme Changes

Several components automatically update when the theme changes:
  1. CodeMirror Editor - Switches between light and dark editor themes
  2. Mermaid Diagrams - Re-renders with theme-appropriate colors
  3. Syntax Highlighting - Switches between One Dark Pro (dark) and GitHub Light (light)
src/scripts/editor.ts
window.addEventListener("codeink-theme-change", (e: CustomEvent) => {
  const nextTheme = e.detail?.theme === "light" ? "light" : "dark"
  setEditorTheme(nextTheme)
  
  // Force Mermaid diagrams to re-render with new theme
  const mermaidNodes = previewTarget.querySelectorAll(".mermaid[data-processed]")
  for (const node of Array.from(mermaidNodes)) {
    node.removeAttribute("data-processed")
  }
  
  window.dispatchEvent(new Event("mermaid-rerender"))
  renderPreview(getEditorContent(), previewTarget)
})

​
Default Theme

CodeInk defaults to dark mode on first visit. The initial theme is determined by:
  1. localStorage - If a theme preference exists, use it
  2. System preference - Detect OS theme preference (if available)
  3. Default - Fall back to dark mode
The dark theme is optimized for extended coding sessions and reduces eye strain in low-light environments.

​
Theme-Aware Syntax Highlighting

Syntax highlighting themes automatically match your selected CodeInk theme:
CodeInk ThemeEditor ThemeSyntax Theme
DarkOne Dark ProOne Dark Pro
LightLight (CodeMirror default)GitHub Light
The theme switch is instant and requires no page reload, preserving your editor content and cursor position.

​
Accessibility

The theme toggle button includes proper ARIA labels:
  • Dark mode active: “Switch to light theme”
  • Light mode active: “Switch to dark theme”
btn.setAttribute("aria-label", 
  isDark ? "Switch to light theme" : "Switch to dark theme"
)

​
Best Practices

Match your environment

Use light theme in bright rooms and dark theme in dim lighting.

Try both themes

Experiment with both themes to find which you prefer for different tasks.

Reduce eye strain

Dark theme can reduce eye fatigue during long editing sessions.

Preview diagrams

Check Mermaid diagrams in both themes to ensure proper contrast.

Build docs developers (and LLMs) love

Get started for freeTalk to us