Dark Reader for Web Viewer
ducktapekiller52 downloadsApplies Dark Reader to pages opened in Obsidian's native Web viewer.
- Overview
- Scorecard
- Updates4
Dark Reader for Web Viewer
Read the web in your Obsidian theme.
Dark Reader for Obsidian's built-in Web viewer.
Web pages take your theme's background, text color and font, in dark mode and in light.
Contents
- Features
- See it in action
- Installation
- Settings
- Commands
- How it works
- Known limitations
- Development
- License
Features
- Matches your theme exactly. A page's background and text become your theme's own
--background-primaryand--text-normal. Links, buttons and accents keep their colors, so pages stay readable. - Dark and light. Pages follow Obsidian as you switch between light and dark, change themes or toggle CSS snippets. No reload needed.
- Your font, too. Optionally shows pages in your theme's text font, even when the theme embeds that font itself.
- No white flash. Pages are painted in your colors from the moment they start loading, not after.
- Every Web viewer tab, including tabs in popout windows, and after every navigation.
- Fine-tuning. Brightness, contrast and sepia, like the browser extension.
- Private and offline. Dark Reader is bundled with the plugin. Nothing is downloaded while it runs.
See it in action
Before and after
| Without the plugin | With the plugin |
|---|---|
 |
 |
Light mode
When Obsidian is light, pages take your theme's light colors instead.
Any theme, its colors and its font
Each page below uses the theme's own background, text color and text font, with Match Obsidian font on.
| Halftone, light | Brutalist, dark |
|---|---|
 |
 |
| Nunito Sans, embedded in the theme | Lora |
| Blade Runner, dark | Aubade, light |
 |
 |
| Tomorrow | iA Writer Quattro |
Installation
[!IMPORTANT] This plugin needs Obsidian 1.8.3 or newer on desktop, with the Web viewer core plugin turned on: Settings → Core plugins → Web viewer. It does not run on mobile, because it relies on the desktop app's
<webview>.
Manual installation
- Download
main.jsandmanifest.jsonfrom this repository, or from a release when one is available. - In your vault, create the folder
.obsidian/plugins/dark-reader-web-viewer/. - Put both files in that folder.
- Restart Obsidian, or reload it from the command palette.
- Turn on Dark Reader for Web Viewer in Settings → Community plugins.
Open any page in a Web viewer tab, and it follows your theme.
Build from source
git clone https://github.com/DuckTapeKiller/dark-reader-web-viewer.git
cd dark-reader-web-viewer
npm install
npm run build
Then copy main.js and manifest.json into your vault as above.
Settings
| Setting | Default | What it does |
|---|---|---|
| Enable Dark Reader | On | Turns page theming on or off. |
| Follow Obsidian theme | Off | Leaves pages unchanged while Obsidian is light. Only applies when Match Obsidian base colors is off. |
| Match Obsidian base colors | On | Gives pages your theme's background and text colors, light or dark to match Obsidian. |
| Match Obsidian font | Off | Shows page text in your theme's text font. Code and icon fonts are left alone. |
| Brightness | 100% | Dark Reader's brightness. |
| Contrast | 90% | Dark Reader's contrast. |
| Sepia | 0% | Dark Reader's sepia tint. |
What pages look like
| Obsidian is… | Match Obsidian base colors | Follow Obsidian theme | Pages are… |
|---|---|---|---|
| Dark | On | any | Dark, in your theme's colors |
| Light | On | any | Light, in your theme's colors |
| Dark | Off | any | Dark, in Dark Reader's own colors |
| Light | Off | Off | Dark, in Dark Reader's own colors |
| Light | Off | On | Unchanged |
Commands
| Command | What it does |
|---|---|
| Toggle web viewer dark mode | Turns page theming on or off. |
| Reapply web viewer dark mode | Reinstalls Dark Reader in every open page, in case a site misbehaves. |
How it works
The plugin bundles Dark Reader's public API and installs it into each page opened in Obsidian's Web viewer. It does not need the browser extension.
The details
- Installing. The plugin watches for Web viewer tabs and uses
webview.executeJavaScript()to install Dark Reader in each page. Before every update it asks the page whether it already runs this build's copy. Navigation, reloads, in-page links and plugin updates are therefore all handled the same way. Updates to a page run one at a time, and the latest settings always win. - No white flash. Electron holds
executeJavaScript()until a page has finished loading, images included.webview.insertCSS()is not held back, so the plugin paints each new page in the target colors as soon as it starts loading. It removes that style once Dark Reader is running. - Light and dark sites. Pages normally follow the system's light or dark preference, so with the system in dark mode a site like GitHub serves its dark design even while Obsidian is light. While pages are themed, the plugin has them prefer a light scheme through the page's own DevTools protocol. Dark Reader then always starts from a site's light design, which it maps exactly onto Obsidian's colors in both modes. Obsidian and the system setting are not affected.
- Exact colors. Obsidian's colors are passed to Dark Reader as its scheme colors. Dark Reader turns a page's white background and black text into those colors, then applies brightness, contrast and sepia. The plugin hands it colors with that filter already undone, so the result matches Obsidian.
- Fonts. Match Obsidian font sets your text font with a constructed stylesheet. A theme that embeds its font as a data URL has that font recreated in the page with the
FontFaceAPI. Such fonts are sent once per page, and they load even on sites whose content security policy blocks web fonts. - Offline. The bundled injector is built from the
darkreaderpackage. No third-party script is fetched at run time.
Known limitations
- Images are left as they are. Dark Reader does not recolor images, so a dark logo on a dark page can be hard to see. The browser extension fixes some sites with its own per-site rules, which this plugin does not include.
- Low contrast lifts the darkest colors. Below about 80% contrast, Dark Reader cannot make colors as dark as a very dark theme, so backgrounds or black text come out a little lighter. Bright colors are compensated at any contrast. Brightness below 100% dims pages below your theme's colors, as you would expect.
- Fonts must be installed on your system or embedded in the theme. Pages cannot reach the fonts Obsidian ships inside the app, so the next font in your theme's list is used instead.
- Web viewer only. Markdown previews, Canvas and other embedded pages are not affected.
- Internal API. The Web viewer's internals are not a public plugin API, so a future Obsidian update may need a plugin update.
Development
npm install
npm run dev # rebuild on every change
npm run build # lint, type-check and bundle into main.js
Every build runs the official Obsidian ESLint plugin first, over the TypeScript sources, the build scripts and package.json. Any warning fails the build. npm run update:lint moves the lint toolchain to its latest versions.
src/generated-injector.ts is written by esbuild.config.mjs during the build. Don't edit it by hand.
License
MIT. Dark Reader is included under its own MIT license; see THIRD-PARTY-NOTICES.md. This plugin is not affiliated with Dark Reader Ltd.
HealthGood
ReviewSatisfactory
About
Read web pages using your Obsidian theme's background, text color and font inside the Web viewer while keeping links and accents readable. Sync light/dark theme changes instantly without reload, tweak brightness/contrast/sepia, and run fully offline with no external downloads.Details
Current version
0.1.3
Last updated
2 days ago
Created
3 days ago
Updates
4 releases
Downloads
52
Compatible with
Obsidian 1.8.3+
Platforms
Desktop only
License
MIT
Sponsor