How to Create a Custom Typora Theme (Step-by-Step Tutorial)

type

status

date

slug

summary

What You'll Need

Before you start, gather these tools:

Typora (obviously) with the latest version installed

A code editor like VS Code, Sublime Text, or even a good text editor like Notepad++

Basic CSS knowledge (but honestly, you can learn as you go)

30-60 minutes of uninterrupted time

Optional: Browser DevTools knowledge for inspecting elements (I'll show you the basics)

Don't worry if you're not a CSS expert. I'll explain everything as we go, and I'll give you copy-paste-friendly code that you can customize.

Understanding How Typora Themes Work

Before we start coding, let's understand the system.

Typora themes are just CSS files. That's it. One CSS file controls every color, every font, every spacing decision in your editor. The file lives in Typora's theme folder, and its filename becomes the theme name in your menu.

The naming rules are strict:

✅ my-theme.css → appears as "My Theme"

✅ dark-mode.css → appears as "Dark Mode"

❌ My Theme.css → won't work (spaces and capitals)

❌ my_theme.css → won't work (underscores)

Use lowercase letters and hyphens only.

Here's the beautiful part: Typora loads CSS in a specific order, and later styles override earlier ones. This means you can start with a minimal theme and build up, or you can modify existing themes without breaking them.

The loading sequence:

Base styles (Typora's core CSS)

Your theme CSS (the file you're creating)

User override CSS (optional custom tweaks)

This structure means your theme is safe, reversible, and easy to iterate on.

Step 1: Create Your Theme File

Let's get hands-on.

Open Typora's theme folder:

Windows/Linux: File → Preferences → Appearance → Open Theme Folder

macOS: Typora → Preferences → Appearance → Open Theme Folder

You'll see a folder containing CSS files (the built-in themes) and possibly some folders with theme assets.

Create a new file in this folder called my-first-theme.css.

Open it in your code editor.

Congratulations. You've just created a theme. It doesn't do anything yet, but it exists, and that's the first step.

Step 2: Start With a Minimal Template

Here's where the magic begins.

Paste this starter template into your my-first-theme.css file:

Save the file.

Step 3: Test Your Theme

Now for the moment of truth.

Restart Typora (or go to View → Themes and reload)

Select your theme: Themes → My First Theme

Open a test document with various elements (headings, lists, code, tables, quotes)

What do you see?

You should see a clean, minimal theme with a light gray background, dark blue headings, and blue links. It's simple, but it's yours.

If nothing changed: Check that your filename follows the rules (lowercase, hyphens only). Make sure you restarted Typora completely.

Step 4: Customize Colors to Match Your Style

Now comes the fun part: making it personal.

The color palette lives in the :root {} section at the top of your CSS. These are CSS variables—think of them as theme settings you can change in one place.

Let's experiment:

For a warm, cozy theme:

For a cool, professional theme:

For a dark theme:

Change the values, save, and switch to another theme and back to yours to see the changes. (Typora doesn't auto-reload themes, so you need to toggle away and back.)

Pro tip: Use a color picker tool (like Adobe Color or Coolors.co) to build a cohesive palette, or steal colors from designs you love.

Step 5: Customize Typography

Colors set the mood. Typography sets the personality.

Change the body font:

Or for a modern look:

Want to use a custom font? You can import Google Fonts:

Add this @import line at the very top of your CSS file, before everything else.

Play with these values. Save. Refresh. See how it feels.

There's no right answer—only what feels right to you.

Step 6: Fine-Tune Spacing and Layout

Spacing is the secret ingredient of good design.

Control the maximum width of your content:

This keeps your lines at a comfortable reading length (around 70 characters) and centers the content on wide screens.

Adjust paragraph spacing:

Give your headings more breathing room:

These small changes make a huge difference in readability.

Resources

Official documentation:

Typora Theme Guide

Typora Theme Gallery

Design inspiration:

Adobe Color — Build color palettes

Google Fonts — Free web fonts

Coolors.co — Generate color schemes

Learning CSS:

MDN CSS Guide

CSS-Tricks — Practical CSS examples

Got questions about theme customization? Want to share what you've built? Drop a comment below or reach out—I'd love to see what you create. ✨