Obsidian Stats logoObsidian Stats

Apple System Colors

by overjoyde
Screenshot of the Apple System Colors Obsidian theme
5
4
3
2
1
New Theme
Code

Description

This theme supports Dark Mode

README file from

Github

Apple System Colors

An Obsidian theme based on the Apple System Colors terminal scheme (macOS system colours). Dark mode only.

Apple System Colors — headings, formatting, lists and tasks

Callouts Code highlighting Tables and code Project note
Callouts Code samples Table and code Garden project

Palette

Role Colour Used for
Background #1E1E1E Editor
Foreground #FFFFFF Body text
Faint #636366 Comments, unresolved links, finished tasks
Red #FF453A H1, note title, tags and properties in code
Yellow #FFD60A H2, values in code
Green #32D74B H3, inline code, strings, checkboxes
Cyan #76D6FF H4, tags, external links
Blue (accent) #0A84FF H5, accent, internal links, functions
Purple #BF5AF2 H6, italics, quote bar, keywords

Text uses the scheme's bright colours; the normal ANSI colours are too dark for readable text on #1E1E1E.

Features

  • Headings H1–H6 follow the ANSI order: red → yellow → green → cyan → blue → purple
  • Code syntax highlighting, callouts, tables, tags, graph view and checklists use the same palette
  • Accent line on the active tab, like a terminal
  • Monospace font order: Cascadia Code → JetBrains Mono → SF Mono → Menlo, using fonts already on your computer (no remote assets)
  • Built only on Obsidian CSS variables with low-specificity selectors and no !important, so you can override anything with a snippet

Installation

From Obsidian (recommended)

  1. Open Settings → Appearance.
  2. Under Themes, select Manage.
  3. Search for Apple System Colors and select Install and use.

Manual installation

  1. Download manifest.json and theme.css from the latest release.
  2. In your vault, create the folder .obsidian/themes/Apple System Colors/ and put both files in it.
  3. Restart Obsidian or reload the theme list, then pick Apple System Colors under Settings → Appearance → Themes.

Usage

  • Dark mode only: set Settings → Appearance → Base colour scheme to Dark. In light mode Obsidian's default light colours are used.
  • Code font: install Cascadia Code to get the Windows Terminal font in code blocks.

Customising

The theme has no Style Settings options. You customise it with a CSS snippet instead:

  1. Open Settings → Appearance → CSS snippets and select the folder icon to open the snippets folder.
  2. Create a file such as obsidian-apple-system-colors-tweaks.css and add your overrides (examples below).
  3. Back in Obsidian, reload the snippets and switch on your snippet.

Every colour is set once at the top of theme.css as a --term-* variable (--term-red, --term-yellow, --term-green, --term-cyan, --term-blue, --term-purple, --term-bg, --term-fg and so on), and everything else is built from them.

/* Plain foreground-coloured bold text */
.theme-dark {
  --bold-color: var(--term-fg);
}

/* All headings in one colour */
.theme-dark {
  --h1-color: var(--term-blue);
  --h2-color: var(--term-blue);
  --h3-color: var(--term-blue);
  --h4-color: var(--term-blue);
  --h5-color: var(--term-blue);
  --h6-color: var(--term-blue);
}

Credits

The palette comes from the "Apple System Colors" colour scheme in the iTerm2 Color Schemes collection (MIT), as listed on windowsterminalthemes.dev. The theme structure is shared with One Half Dark.

License

MIT

Sponsors