Obsidian Stats logoObsidian Stats

Tufte

by pleiadesm
Screenshot of the Tufte Obsidian theme
5
4
3
2
1
Code

Description

This theme supports Dark Mode
This theme supports Light Mode

README file from

Github

Tufte for Obsidian

Obsidian Theme license MIT Dark & Light Supported Mobile Supported

English | 简体中文

An Obsidian theme adapted from Tufte CSS, carrying Edward Tufte's book design — ET Book type, marginalia, restrained rules, one deliberate red — into every corner of the app, with a full Chinese typographic system (宋体正文、楷体示例、黑体数据) alongside the Latin one.

Tufte for Obsidian — the Bases bookshelf gallery, light and dark.

What the theme covers

  • Typography — ET Book (embedded, offline; MIT-licensed) with Palatino/Georgia fallbacks; Gill Sans for data and chrome; a 55rem reading measure with a marginalia gutter; lining tabular figures wherever digits stack.
  • Tables and Bases — prose tables and Obsidian's Bases database views share one specimen-table register modeled on Beautiful Evidence: a single hairline under the head, no vertical rules, alignment does the work. The Bases cards view renders as a bookshelf gallery — frameless covers on a shelf line with centered title-page captions.
  • Banners — a CSS-native [!banner] callout that opens a note with a full-bleed plate, the way Tufte's chapters open.
  • Quiet chrome — sidebars, tabs, menus, and the graph in paper-and-ink; glass chrome at 95% opacity with a frost, including a whole-window translucent mode (three Style Settings sliders).
  • Chinese typography — 宋体 body, 楷体 for italic contexts (epigraphs, captions, attributions), 黑体 for data labels, punctuation squeeze at wraps, and CJK-aware fallbacks for Windows.
  • Tags, highlights, callouts — colored text instead of pills; a six-hue accessory palette held below the accent's chroma so red keeps its pointer meaning.

Light and dark modes throughout; WCAG AA contrast documented in the stylesheet.

Sidenote Function as Edward Tufte's Handout Design

One of the core features of Tufte's handout and book design is the sidenote, which can be traced back to the Marginalia commentary. I found this feature helpful for my note-taking process—once I started to use it, I gradually found many places to insert a sidenote where I didn't notice before.

Backlink Renderer

Backlinks are a core feature of the Zettelkasten (or slipbox) note-taking method. I made a plugin so that it renders the Markdown format instead of displaying the source code directly.

Enhancing Figure Function

The theme supports three modes of figure display, including displaying figures on the sidenote area.

If you drag the image into the pane, a modal will pop up and ask you for more details of that figure, including captions, numbers, and names. It also supports multiple image displays and image quilts.

The companion plugin — Tufte Suite

The theme stands alone, but one plugin completes the Tufte writing system: Tufte Suite. It carries four modules, each switchable on its own in Settings → Tufte Suite:

Module What it does
Tufte Sidenotes Renders [^…] footnotes and [!sidenote]/[!marginnote] callouts as true sidenotes in the margin gutter (Reading view), keeping the editor single-column.
Tufte Figures Drop or paste an image to compose column, full-width, and margin figures with proper captions; multi-image rows; an image-quilt generator; auto-numbered references.
Tufte Inline Inline shorthands: ^^text^^ small-caps openers, &&text&& italic run-ins, @@字@@ two-line CJK drop caps.
Tufte Backlinks Renders Linked/Unlinked mention snippets as formatted Markdown — headings at body size, the backlink reference itself bold, underlined and accent red.

These four used to be four separate plugins, and are now archived. They shipped individually until August 2026 (Tufte Sidenotes 1.7.0, Tufte Figures 1.7.2, Tufte Inline 1.2.0, Tufte Backlinks 1.0.1); four installs, four update prompts, four sets of settings for what is one writing system. Tufte Suite 1.0.0 supersedes all four, and all future plugin work happens there — the standalone repositories and the frozen copies in plugins/ receive no further updates.

Nothing is lost in the move: the Suite embeds each plugin's code byte-for-byte as a module, so behavior is unchanged, and turning a module off leaves you exactly where the standalone plugin was uninstalled. If you already run the four, disable them before enabling the Suite — otherwise everything renders twice. The Suite imports their settings and image-quilt store on first load, and keeps the old command ids so bound hotkeys keep working.

Install

Theme (manual, until it reaches the community directory):

  1. Download theme.css and manifest.json from the latest release.
  2. Put them in YourVault/.obsidian/themes/Tufte/.
  3. Settings → Appearance → Themes → select Tufte.

Plugin (manual):

  1. Download main.js, manifest.json, and styles.css from the Tufte Suite release.
  2. Put all three in YourVault/.obsidian/plugins/tufte-suite/.
  3. Settings → Community plugins → enable Tufte Suite.

Optional: install the community Style Settings plugin to get sliders for the glass chrome (opacity, blur, translucent-window sheet).

Requirements

  • Obsidian 1.4.0 or newer (Bases styling targets 1.9+).
  • No fonts to install and no network access needed — ET Book is embedded in the stylesheet.

Credits

  • Tufte CSS by Dave Liepmann and contributors — the typographic source this theme adapts.
  • ET Book © Dmitry Krasny, Bonnie Scranton, Edward Tufte, Adam Schwartz — MIT license, embedded in theme.css.
  • Edward Tufte's books — The Visual Display of Quantitative Information, Envisioning Information, Visual Explanations, Beautiful Evidence — the design authority behind every decision here.

License

MIT © 2026 Daocheng Lin. The embedded ET Book fonts remain under their own MIT license and copyright.

Sponsors