AMOLED Serenity

---

AMOLED Serenity is a dark Obsidian theme built for screens that can switch a pixel off. Deep blacks, a low-contrast Nord palette, and 160 settings you can change without opening a single line of CSS.

Who this is for

This theme is built for long sessions on a good panel. Specifically:

• Displays with a contrast ratio above 1:3000. OLED, AMOLED, and the better VA panels. On those, #0e0e0e reads as genuinely black and the dark greys stay separate from it.
• People who stare at notes for hours. The palette is deliberately low-contrast. Pure white text on pure black is the harshest combination a screen can produce, so the body text sits at #dddddd instead, and the accents are Nord rather than anything saturated.
• Battery, on OLED. A black pixel on an OLED panel draws no power. On an LCD it draws exactly as much as a white one, because the backlight is on regardless. Physics does not care which theme you picked.

Now, the honest caveat. On a cheap IPS panel with a 1:800 contrast ratio, the darker greys smear into the background and the sidebar looks like it is switched off. That is a display limitation, not a bug, and it is fixable: open Text Colors and Sidebar and Navigation in Style Settings and raise them. Every one of those values is exposed for exactly this reason.

Features

• Real AMOLED black. --color-base-00 drives every surface, so nothing is "nearly" black while one panel stays grey. There is a toggle for true #000000 if you want it.
• Nord accent palette. Six accents plus two frost tones, all adjustable.
• 160 Style Settings controls, including on/off toggles for each styled area. Colors, fonts, sizes, spacing, radii, scrollbars, callouts, tables, code syntax. The full list is below.
• Three embedded fonts, plus a free-text field for any font installed on your system.
• Custom background images, with opacity and blur, off by default.
• Contrast you can raise. Text, sidebar, tab, and icon colors are all individually exposed.
• Callouts, tables, canvas and graph view are all themed and all adjustable.

Installation

From Obsidian

Settings → Appearance → Themes → Manage → search AMOLED Serenity → Use.

Manually

git clone https://github.com/darthdemono/AMOLED-Serenity.git

Copy theme.css and manifest.json into <your vault>/.obsidian/themes/AMOLED Serenity/, then pick the theme under Settings → Appearance.

N.B: The folder name has to be exactly AMOLED Serenity. Obsidian matches it against the name field in manifest.json, and it will silently ignore the theme if they disagree.

Customization

Install the Style Settings plugin, then open Settings → Style Settings → AMOLED Serenity. Everything below is there. Nothing requires editing CSS.

Every setting writes to a CSS variable, listed in the tables so you can override it in a snippet if you prefer that. The theme is checked on every build to make sure each control writes a variable that something actually reads, which was not true before version 1.2.0.

The two things worth knowing first

Pure AMOLED Background forces #000000 everywhere and overrides your Base Dark choice while it is on. That is intended. If you want a custom background color, leave this toggle off and set Base Dark instead.

Custom fonts beat the dropdowns. Each font has a dropdown and a free-text field. Fill in the text field and it wins; leave it empty and the dropdown applies. So you are not limited to the list.

Custom background images

Turn on Custom Background Image, then put a URL in Background Image URL. It has to keep the url() wrapper:

url("app://local/C:/Users/you/Pictures/wall.jpg")

On Linux and macOS the path looks like url("app://local/home/you/Pictures/wall.jpg"). Remote URLs work too.

Then set opacity. The default is 0.25 and that is deliberate: this is an AMOLED theme, and anything above roughly 0.4 lights up every pixel behind your notes and throws away the reason you installed it. Blur is there if the image competes with your text.

The image sits on a fixed layer behind the workspace, and the app chrome is made transparent so it shows through. When the toggle is off, none of that CSS applies.

Every setting

160 controls, grouped as they appear in the Style Settings panel.

Features

Typography

Heading Sizes

Heading Colors

Note Title

Accent Colors

Base Colors

The greyscale ramp. Base Dark is the page background; the rest step up toward white.

Text Colors

Raise these if you are on a panel with a contrast ratio below about 3000:1, where the darker greys stop separating from the background.

Sidebar and Navigation

The file explorer, outline and tab headers. Raise these if the sidebar reads too dark.

Buttons

Selection and Focus

Markdown Elements

Tables

Code

Callouts

Canvas

Canvas node colours follow the accent palette above, because Obsidian derives them from it.

Graph View

Scrollbar

Corners

Status Bar

Callouts, tables, canvas and graph view

All four are themed, all four are adjustable, and all four can be switched off.

Under Features there is a toggle for each: Style Tables, Style Callouts, Style Canvas, Style Graph View. They are on by default. Turn one off and that area falls back to Obsidian's own appearance, using the values read out of Obsidian's own stylesheet rather than an approximation of them.

Switching a feature off also overrides anything you configured for it, instead of leaving half of your changes applied. If Style Tables is off, the table settings do nothing until you turn it back on.

Tables have three further toggles of their own: Header Styling, Zebra Striping, and Column Striping.

Callouts are the interesting case. Obsidian defines fourteen callout types (note, tip, warning, bug, and so on) but it does not give each one its own colour. It derives them from an eight-colour palette: --color-red, --color-orange, --color-yellow, --color-green, --color-cyan, --color-blue, --color-purple, --color-pink.

So this theme overrides the palette rather than the fourteen callout variables. Change Red under Accent Colors and every red callout follows, along with the red canvas nodes and everything else Obsidian tints from it. One control, and the whole app stays consistent.

That also makes it version-proof. Older Obsidian reads the palette as RGB triplets, current Obsidian reads it as hex, and the accent pickers write both. Nothing to keep in sync by hand.

The one thing overridden directly is the callout background tint. Obsidian hardcodes it at 10%, which lights up a block of pixels behind your text. The default here is 8% and it is a slider, so you can take it to zero. That override is wrapped in an @supports check, so builds without color-mix() keep Obsidian's stock behaviour instead of losing the background entirely.

Tables are driven by the 21 table variables Obsidian actually reads — header background and hover, alternating rows and columns, cell text size, line height, wrapping, vertical alignment, selection colour, border widths. No custom selectors, so an Obsidian update cannot break them.

Canvas gets its background, dot grid, card label colour, and control radius. Node colours follow the accent palette, same as callouts.

Graph view gets all seven of its variables: link lines, ordinary nodes, focused nodes, tag nodes, attachment nodes, unresolved nodes, and label text.

N.B: None of this is done with hand-written selectors matching Obsidian's internal class names. It is variables the whole way down, which is why it keeps working when Obsidian ships a new version and renames a container.

Fonts

Three fonts are embedded in theme.css as base64. They are opt-in. The default is Inter, which ships with Obsidian, so a fresh install loads none of them.

Roboto and Montserrat are subsets, so anything outside Latin-1 falls back to another font mid-word. If you write Polish, Czech, Turkish, Hungarian, or any Baltic language, use Inter or Bricolage Grotesque. The unicode-range in the CSS declares this, so the fallback is clean rather than a row of boxes.

The dropdowns also list system fonts (Georgia, Segoe UI, JetBrains Mono, and others). Those only work if the font is installed on your machine. If it is not, Obsidian falls back and nothing breaks.

For anything not in the list, use the Custom Header Font, Custom Body Font, and Custom Monospace Font fields. Type the family name exactly as the system reports it.

Editing the CSS directly

If you would rather not use the plugin, the variables are all at the top of theme.css under .theme-dark:

• --color-base-00 through --color-base-100 — the greyscale ramp. 00 is the background.
• --red, --orange, --yellow, --green, --purple, --frost0, --frost2 — the Nord accents.
• --primary-accent / --secondary-accent — links, active states, hover.
• --text-primary, --text-secondary, --text-tertiary — the text ramp, brightest to dimmest.

Below those sits a block labelled Obsidian core variable mapping. Leave it alone unless you know why you are changing it. Those lines alias the theme's own names onto the variables Obsidian actually paints with, and they are the reason the settings above them do anything at all.

Building

theme.css is generated. Do not hand-edit the @settings block or the .theme-dark block — edit dev/theme_spec.py and regenerate:

pip install pyyaml tinycss2 fonttools brotli
python3 dev/build_theme.py      # regenerate theme.css from the spec
python3 dev/build_docs.py       # regenerate the settings table in this README
python3 dev/validate_theme.py   # 12 checks, exits non-zero on failure

Both the settings panel and the CSS variables come from one table, which is what stops a control from writing a variable nothing reads. The validator also confirms the embedded fonts still decode after any edit. build_theme.py reads the font blobs back out of the existing theme.css, so the payload is never re-encoded and the build is reproducible byte-for-byte.

What is not covered

Light mode. Everything lives under .theme-dark, so switching Obsidian to light mode gives you stock Obsidian. This is an AMOLED theme and a white AMOLED theme would be a contradiction.

Inspiration

• SakuraIsayeki's Vanilla AMOLED Theme
• Sskki-exe's Vanilla AMOLED Theme Color
• Insanum's Obsidian Nord Theme
• VSCode Amoled Black Theme
• Colineckert's Obsidian Things Theme

Changelog

1 September 2026 (1.5.0)

• Feature toggles. Tables, callouts, canvas and graph view can each be switched off, falling back to Obsidian's own appearance. All on by default.
• Table sub-toggles: Header Styling, Zebra Striping, and Column Striping (off by default, for the reason in 1.4.1).
• Switching a feature off overrides anything you set for it in Style Settings, rather than half-applying. Off means off.
• The off states restore Obsidian's real defaults, read out of its stylesheet rather than guessed.

1 September 2026 (1.4.2)

• Table headers are now visibly distinct. The header sat at 1.12:1 against the row stripe, which reads as the same shade. It is now #363636: 1.60:1 against the page and 1.44:1 against the stripe.
• Fixed header hover going the wrong way. Hover was darker than the header itself, so hovering dimmed it. It is now lighter.
• Fixed header hover not working at all. The header-background rule added in 1.4.1 outranked Obsidian's own hover rule and suppressed it. Restated at higher specificity.
• Added Header Border, so header and body are separated by a rule as well as a fill.

1 September 2026 (1.4.1)

• Fixed the checkerboard pattern in tables. Row striping and column striping were both switched on. Obsidian paints row stripes on the row and column stripes on the cell, and the cell wins, so odd rows came out solid and even rows came out checkered. Column striping is now off by default, which is Obsidian's own default, and it is still there as a setting if you want it.
• Fixed the table header losing every second cell. Obsidian applies the alternating-column background to <th> too, and that rule outranks the header background. With column striping off it would have blanked every second header cell. The header background is now reasserted at matching specificity.
• Softened the row stripe from #242424 to #1a1a1a (1.11:1 against the background). A strong stripe on an AMOLED panel is a row of lit pixels.
• Row hover is now uniform whether or not the row is striped.

1 September 2026 (1.4.0)

• Callouts, tables, canvas and graph view are themed. 32 new controls. All of it driven by Obsidian's own variables, with no hand-written selectors, so an Obsidian update cannot break it.
• Accent colors now drive the whole app. The seven accents each write both a hex value and an RGB triplet, and those feed Obsidian's eight-color palette. Change Red once and every red callout, canvas node and tinted surface follows, on old and current Obsidian alike.
• Callout background tint is adjustable and defaults to 8% rather than Obsidian's hardcoded 10%.
• 21 table controls, 7 graph view controls, 4 canvas controls.
• Author details updated.

1 September 2026 (1.3.0)

• 120 Style Settings controls, up from 22. New groups: Sidebar and Navigation, Markdown Elements, Tables, Code, Callouts, Scrollbar, Corners, and Note Title.
• Fixed the sidebar being too dark. File explorer text ran at a 3.36:1 contrast ratio against the background. It now runs at 10.06:1, and hover and active states are separately adjustable.
• Raised the text ramp. Muted text went from 3.36:1 to 6.78:1, and faint text from 2.18:1 to 3.36:1. The old faint value failed WCAG outright, which is a problem on a theme people use at low brightness.
• Custom background images, with opacity, blur, size, and position.
• Custom font fields. Any font on your system, for headers, body, and monospace. The dropdowns gained 22 more options.
• Font licences are now shipped. See below.
• Background reverted to #0e0e0e. 1.2.0 darkened it to #0a0a0e; that was too far.

1 September 2026 (1.2.0)

• Fixed Style Settings. A duplicate, non-functional block of --style-settings-* declarations was removed, and the real block gained the base, text, button, and selection groups that had been advertised but were unreachable.
• Fixed the accent colors. Primary and Secondary Accent wrote variables that nothing read, so changing them did nothing at all. They now drive links, hover states, and interactive highlights.
• Fixed Pure AMOLED Background. The selector was a descendant combinator, but Style Settings applies its class to the same element that carries .theme-dark, so it never matched once.
• Fixed theme variables not reaching Obsidian. Text, selection, focus, border, and interactive colors were declared under names Obsidian does not read.
• Fixed the embedded fonts. Bricolage Grotesque is a variable font declared without weight descriptors, which pins it to its default instance — ExtraBold 800. It would have rendered every glyph extra-bold.
• Heading sizes gained real defaults, so the settings panel stopped reporting values the theme was not using.

31 January 2025 (1.1.0)

• Style Settings compatibility introduced.
• Improved code syntax highlighting.
• Optimized performance.

Licence

The theme is MIT.

The three fonts embedded in theme.css are not. Bricolage Grotesque and Montserrat are under the SIL Open Font License 1.1; Roboto is under Apache 2.0. If you fork this theme or vendor theme.css into something else, you are redistributing those fonts and their licences come with them.

• THIRD-PARTY.md — per-font copyright, designer, licence, and what was modified.
• LICENSES/ — the full licence texts.

Author

darthdemono — https://darthdemono.com

Open an issue for bugs or requests. If a setting does not do what its name says, that is a bug and I want to know.