https://github.com/takeokunn/readthezero
Modern, accessible HTML export theme for Org-mode — 15 color themes, dark mode, and WCAG 2.2 AA compliance. Successor to readtheorg, built with lightningcss.
https://github.com/takeokunn/readthezero
accessibility css dark-mode emacs html lightningcss nix org-mode theme wcag
Last synced: 23 days ago
JSON representation
Modern, accessible HTML export theme for Org-mode — 15 color themes, dark mode, and WCAG 2.2 AA compliance. Successor to readtheorg, built with lightningcss.
- Host: GitHub
- URL: https://github.com/takeokunn/readthezero
- Owner: takeokunn
- License: mit
- Created: 2026-04-05T01:46:52.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-05-02T12:21:56.000Z (about 2 months ago)
- Last Synced: 2026-05-02T14:21:23.533Z (about 2 months ago)
- Topics: accessibility, css, dark-mode, emacs, html, lightningcss, nix, org-mode, theme, wcag
- Language: CSS
- Homepage: https://takeokunn.github.io/readthezero
- Size: 68.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.org
- License: LICENSE
Awesome Lists containing this project
README
#+TITLE: readthezero
#+OPTIONS: toc:t num:nil ^:nil
[[https://github.com/takeokunn/readthezero/actions/workflows/ci.yml][https://github.com/takeokunn/readthezero/actions/workflows/ci.yml/badge.svg]]
[[https://github.com/takeokunn/readthezero/blob/main/LICENSE][https://img.shields.io/badge/license-MIT-blue.svg]]
*readthezero* is a modern, accessible HTML export theme for [[https://orgmode.org/][Org-mode]].
It is the successor to [[https://github.com/fniessen/org-html-themes][readtheorg]], rebuilt from scratch with contemporary CSS.
[[https://takeokunn.github.io/readthezero][Live Demo]]
* Features
- *2-column layout* --- Left TOC sidebar and main content area (CSS Grid)
- *Dark mode* --- Automatic via =prefers-color-scheme= with =light-dark()= support
- *Multiple themes* --- 15 themes included (default, ocean, forest, nord, dracula, tokyo-night, gruvbox, solarized, arctic, autumn, cherry, contrast, lavender, peach, rose); easily extensible
- *WCAG 2.2 AA* --- Accessible color contrast, focus indicators, and skip navigation
- *CSS-first* --- Minimal JavaScript; layout and theming handled entirely in CSS
- *RTL support* --- Right-to-left layout via CSS logical properties
- *Print optimized* --- Clean print stylesheet with no sidebars or UI chrome
- *Responsive* --- Collapses to single column on tablet and mobile
* Quick Start
1. Add the setup file reference to your =.org= file:
#+BEGIN_EXAMPLE
#+SETUPFILE: https://takeokunn.github.io/readthezero/readthezero-default.setup
#+END_EXAMPLE
2. Export to HTML with =C-c C-e h h=.
* Installation
** From GitHub Pages CDN
Add to your Org file header:
#+BEGIN_EXAMPLE
#+SETUPFILE: https://takeokunn.github.io/readthezero/readthezero-default.setup
#+END_EXAMPLE
Replace =default= with any available theme name: =ocean=, =forest=, =nord=, =dracula=, =tokyo-night=, =gruvbox=, =solarized=, =arctic=, =autumn=, =cherry=, =contrast=, =lavender=, =peach=, or =rose=.
** Local Build
Requires [[https://nixos.org/][Nix]] with flakes enabled:
#+BEGIN_SRC shell
nix build .#default
#+END_SRC
The output directory contains the CSS, JS, and setup files.
Copy or symlink them and point =#+SETUPFILE= to the local =.setup= file.
* Available Themes
| Theme | Description |
|-------------+-----------------------------------------------|
| default | Neutral palette with blue accents |
| ocean | Cool blue tones inspired by deep water |
| forest | Warm green tones inspired by nature |
| nord | Arctic, north-bluish palette |
| dracula | Dark theme with vivid purple accents |
| tokyo-night | Dark theme inspired by Tokyo city at night |
| gruvbox | Retro groove with warm earthy tones |
| solarized | Precision colors for machines and people |
| arctic | Clean cool whites and icy blues |
| autumn | Warm oranges and reds of the fall season |
| cherry | Soft pinks and cherry blossom tones |
| contrast | High-contrast theme for maximum readability |
| lavender | Soft purple and lavender tones |
| peach | Warm peach and apricot palette |
| rose | Elegant rose and dusty pink tones |
* Custom Themes
Create a CSS file that defines =--rtz-*= custom properties on =:root=.
See =src/themes/_variables.css= for the full variable schema.
#+BEGIN_SRC css
:root {
--rtz-primary: oklch(0.55 0.2 250);
--rtz-bg: light-dark(#ffffff, #0f0f0f);
--rtz-text: light-dark(#1a1a1a, #e5e5e5);
/* ... see _variables.css for all properties ... */
}
#+END_SRC
Place your theme file in =src/themes/= and add its name to the =themes= list in =flake.nix=.
* Development
Enter the development shell:
#+BEGIN_SRC shell
nix develop
#+END_SRC
Build all themes:
#+BEGIN_SRC shell
nix build .#all
#+END_SRC
Build a specific theme:
#+BEGIN_SRC shell
nix build .#ocean
#+END_SRC
Build the example documentation:
#+BEGIN_SRC shell
nix build .#example
#+END_SRC
Preview the site locally:
#+BEGIN_SRC shell
nix run .#serve # serves at http://localhost:8080
nix run .#serve -- 3000 # use a custom port
#+END_SRC
Run all checks (build + lint + examples):
#+BEGIN_SRC shell
nix flake check
#+END_SRC
The dev shell provides =lightningcss= and =esbuild=.
* Browser Support
Baseline Widely Available. Targets browsers with >= 0.25% global usage via =lightningcss=.
* Accessibility
readthezero targets *WCAG 2.2 AA* compliance:
- Color contrast ratios meet AA thresholds in both light and dark modes
- Focus indicators are visible on all interactive elements
- Skip-to-content link for keyboard navigation
- Semantic HTML structure with proper heading hierarchy
- Reduced motion support via =prefers-reduced-motion=
* License
MIT. See [[file:LICENSE][LICENSE]].
Inspired by [[https://github.com/fniessen/org-html-themes][readtheorg]] by Fabrice Niessen.
Built with [[https://lightningcss.dev/][lightningcss]].