Style Tweaker

approved

by Kevin

Customize the app's appearance with fine-grained style tweaks. - This plugin has not been manually reviewed by Obsidian staff.

116 downloadsUpdated 10d agoMIT

Style Tweaker

Obsidian Downloads GitHub Downloads

[中文 | English | Русский]

Style Tweaker is an Obsidian plugin that lets you fine-tune and customize the app's appearance with fine-grained style adjustments — tweak colors, spacing, fonts, and layout without writing your own CSS snippets.

Features

  • No CSS required — tweak colors, spacing, fonts and layout from the settings UI instead of writing snippets
  • Live preview — every change applies instantly as you adjust it
  • Zero dependencies — no runtime libraries, only Obsidian APIs
  • Multi-language UI — English, 中文, Русский

What you can tweak

The settings tab is grouped into the following pages, and all changes take effect immediately:

  • Appearance — interface background (solid colors or wallpaper images) and theme accent colors. Wallpapers are configured independently for desktop/mobile and dark/light themes, with per-theme opacity, frosted-glass blur and automatic switching.
  • Interface — overall layout (default / border / cards), tab-bar highlighting, desktop and mobile sidebars, and status bar.
  • Editor — 17 style groups for notes, including editor background, active-line highlight, page title, properties, headings, inline code, code blocks, dividers, blockquotes, links, embeds, tables, callouts, lists, tasks and tags.
  • New tab — a custom new-tab page with a logo, a title and an interactive particle wordmark.
  • Plugins — style enhancements for the built-in file explorer (colorful folders, file/folder icons, folder badges) and for the Recent Files community plugin (file icons and colorful rows).
  • Reset — restore every setting to its default with a single click.

Requirements: Obsidian 1.14.1 or later.

Installation

From the Official Community Plugin Market (Recommended)

  1. Open Obsidian and go to Settings → Community plugins
  2. Turn off Safe mode
  3. Click Browse and search for "Style Tweaker"
  4. Click Install, then Enable

Manual Installation

  1. Download the latest main.js, manifest.json and styles.css from Releases
  2. Create a style-tweaker folder in your vault's plugin directory (e.g. YourVault/.obsidian/plugins/style-tweaker/) and place the three files inside
  3. Enable the plugin in Settings → Community plugins

Install via BRAT (Recommended for Testers)

  1. Install the BRAT plugin
  2. Open BRAT settings and click Add Beta plugin
  3. Enter TracingOrigins/obsidian-style-tweaker-plugin
  4. Enable the plugin

Development Guide

  1. Clone the repository:

    git clone https://github.com/TracingOrigins/obsidian-style-tweaker-plugin.git
    cd obsidian-style-tweaker-plugin
    
  2. Copy .env.example to .env and set VAULT_PATH to your Obsidian vault path:

    VAULT_PATH=C:/Users/YourName/Documents/MyVault
    
  3. Install dependencies and start developing:

    npm install          # install dependencies
    npm run dev          # watch mode (auto-deploys to vault)
    npm run build        # production build (auto-deploys to vault)
    npm run lint         # run eslint
    npm run format       # format code with prettier
    npm run format:check # verify formatting
    

Support & Feedback

If this plugin helps you, please consider:

Credits

This plugin's design and implementation draw inspiration from the following great open-source projects. Special thanks to their authors:

ProjectAuthorGitHubSupport
Blue Topaz themeWhyI (whyt-byte)PKM-er/Blue-Topaz_Obsidian-cssBuy Me a Coffee
AnuPpuccin themeAnubis (AnubisNekhet)AnubisNekhet/anuppuccinBuy Me a Coffee
Home Tab Plus pluginMoyf (Moyf)Moyf/home-tab-plusKo-fi
Style Context pluginMoyf (Moyf)Moyf/style-contextKo-fi
File Explorer Note Count pluginOzan Tellioglu (ozntel)ozntel/file-explorer-note-countKo-fi

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.