Notion Style

A full Notion visual overhaul for Obsidian. Every part of the interface — typography, sidebar, code blocks, callouts, tables, and interactive elements — is redesigned to match Notion's clean, minimal aesthetic. Supports light and dark mode, and is optimized for both desktop and mobile.

Screenshots

light theme:

dark theme:

Features

Typography

• Font stack — -apple-system, BlinkMacSystemFont, Segoe UI, with full CJK coverage: Simplified Chinese (Microsoft YaHei, Noto Sans SC), Traditional Chinese (Microsoft JhengHei, Noto Sans TC), Japanese (Meiryo, Yu Gothic, Noto Sans JP), Korean (Malgun Gothic, Noto Sans KR)
• Heading scale — six levels with a clear size gradient (H1 1.875em → H6 0.875em), bold weights, and tight letter-spacing on H1/H2
• Body text — 16px base, 1.4 line-height, optimized with -webkit-font-smoothing: subpixel-antialiased
• Inline code — soft gray background with red text (#eb5757 light / #ff7b72 dark), compact border radius
• Monospace font — SFMono-Regular, Menlo, Consolas fallback stack

Page Layout

• Content width — 1080px (wider than the default Obsidian reading line)
• Page padding — 96px horizontal on desktop, automatically collapses on smaller screens
• Editor and reading view are in sync — live-preview headings match reading-view headings pixel-for-pixel

Sidebar & File Tree

• Notion-style file tree with generous row height (30px min) and subtle hover/active states
• Page icon (📄) prefix on file items
• Original Obsidian collapse chevron retained for folders

Code Blocks

• Syntax highlighting — GitHub Light palette in light mode, GitHub Dark palette in dark mode (same as Notion)
• Languages with full token coloring: keywords, strings, functions, properties, operators, comments, tags, punctuation
• Block background uses a soft warm gray (rgba(135, 131, 120, 0.07)) in light mode and #232829 in dark mode
• Language label displayed in the top-right corner of each block
• Copy button on hover

Callouts

Five color families with colored left border, tinted background, and styled title:

Collapsible callouts ([!note]-) are supported with a smooth fold animation.

Tables

• Gray header row with light background
• Subtle row hover highlight
• Clean borders matching Notion's table style

Lists

• Unordered lists: three-level bullet symbols (●, ◦, ▪)
• Ordered lists: consistent decimal style with proper indent
• Task lists: Notion-blue checkbox with strikethrough on completed items
• Nested list spacing preserved

Other Elements

• Tags — pill-shaped with soft gray background
• Blockquotes — left border + muted text
• Dividers (---) — thin, low-contrast separator
• Front-matter / Properties panel — styled to blend with the page background
• Inline page title — large, bold, matches Notion's page header
• Graph view — dark nodes on matching background
• Command palette & modals — consistent rounded corners and border
• Scrollbars — thin, minimal, auto-hidden
• Selection highlight — subtle, non-distracting

Dark Mode

Fully styled dark theme using Notion's latest dark palette:

• Unified background for sidebar and content (#191919)
• Dimmed text hierarchy: rgba(255,255,255,0.81) → 0.50 → 0.35
• GitHub Dark syntax palette for code blocks
• All callout colors adapted for dark backgrounds

Installation

Via Community Themes (recommended)

1. Open Obsidian → Settings → Appearance
2. Click Manage → Browse Community Themes
3. Search for Notion Style and install
4. Enable the theme and enjoy the new writing experience

Manual installation

1. Download theme.css from this repository
2. Copy it to your vault's .obsidian/themes/Notion Style/ folder (create the folder if it doesn't exist)
3. In Obsidian → Settings → Appearance → select Notion Style

Recommended Settings

1. Open Obsidian → Settings → Appearance
2. Click Accent color→ Input rgb(37, 131, 226)

Callout Usage

Use the following Markdown syntax to create Notion-style callout blocks:

> [!info] Information
> A blue callout for general notes and explanations.

> [!tip] Tip
> A green callout for suggestions, best practices, or success states.

> [!warning] Warning
> A yellow callout for cautions that need attention.

> [!danger] Danger
> A red callout for errors, critical issues, or destructive actions.

> [!quote] Quote
> A gray callout for quotations or example content.

> [!note]- Collapsible callout (collapsed by default)
> Click the title to expand. Add `-` after the type to collapse by default,
> or `+` to expand by default.

All supported callout keywords:

Color System (CSS Variables)

All colors are defined as CSS custom properties at the top of theme.css under Section 1 — DESIGN TOKENS. You can override any value without touching the rest of the file.

Light Mode

Dark Mode

Callout Colors

Customization

To override any value, open theme.css and edit the variables in Section 1. You can also paste overrides into Obsidian's CSS snippets (Settings → Appearance → CSS snippets) so your changes survive theme updates.

/* Change page background to warm white */
.theme-light {
  --notion-bg-primary: #fefdf9;
}

/* Change link color to purple */
.theme-light {
  --notion-text-link: #7c4dff;
}

/* Wider content area */
.theme-light, .theme-dark {
  --notion-content-width: 1200px;
  --file-line-width: 1200px;
}

Disclaimer

This theme is provided as is, and is designed for my personal use of Obsidian on macOS. As such it is not thoroughly tested across all operating systems and use cases.

This theme modifies significant parts of the Obsidian interface, so it may break with future updates. It may also be incompatible with other bits of custom CSS you have.