---
title: "Light and dark mode"
space: "Wiki"
url: "https://docs.frappe.io/wiki/reading/light-and-dark-mode"
updated: "2026-11-02"
---

The reader and the app have a light theme and a dark theme. Each person picks a theme for their own browser.

## Change the theme in the reader

Do one of these:

- Click the moon or sun button in the header. On a phone, the button is in the header too.
- Press `Ctrl K` (`Cmd K` on a Mac), type `dark` or `light`, and pick **Theme: Dark** or **Theme: Light**.

<picture>
  <source srcset="/files/gitimg-b84a444374e1b2642473cd0dae2e47d5863eac75.webp" media="(prefers-color-scheme: dark)">
  <img src="/files/gitimg-4b9a7c9873a4282ada5c548373dfe376afc37e4a.webp" alt="The theme button in the reader header">
</picture>

## Change the theme in the app

Do one of these:

- Click **Frappe Wiki** at the top of the sidebar and click **Toggle Theme**.
- Press `Ctrl K` and pick **Toggle theme**. Type `dark` or `light` to get **Theme: Dark** or **Theme: Light**.

## How the wiki picks the theme

- The browser stores your choice. The reader and the app use the same choice, so a change in one also applies to the other.
- Until you pick a theme, the app follows the theme of your operating system.
- The reader also follows your operating system when the app has done so in the same browser. If you have never opened the app or picked a theme, the reader uses the light theme.

## Images with a dark version

An author can give an image a second version for the dark theme. Readers then see the version that matches the theme of the wiki. When you change the theme, the image changes without a reload. An image without a dark version shows the same in both themes.

See [Images](/wiki/authoring-content/images).

<picture>
  <source srcset="/files/gitimg-085ef4daf3aceb70ac1ee21d634e6607d22fa3bf.webp" media="(prefers-color-scheme: dark)">
  <img src="/files/gitimg-a4127cef52e53266ce60af64d223417154ae6446.webp" alt="A screenshot on a reader page that matches the current theme">
</picture>