A template containing everything you need for creating your own Obsidian theme.

Overview

This is a sample theme for Obsidian (https://obsidian.md).

First Time publishing a theme?

Quick start

Pasted image 20220822135601

First, choose Use this template. That will create a copy of this repository (repo) under your Github profile. Then, you will want to clone your new repository to your computer.

Once you have the repo locally on your computer, there are a couple of placeholder fields you will need to fill in.

  1. Inside the manifest.json file, change the "name" field to whatever you want the name of your theme to be. For example:
{
  "name": "Moonstone",
  "version": "0.0.0",
  "minAppVersion": "0.16.0"
}
  1. Also inside the manifest.json file, you can include your name under next to the "author" field.

After you have those fields configured, all that's left to do is add your styles! All of your CSS needs to be inside the file theme.css which is located at root of your repository.

Adding your theme to the Theme Gallery

Add a screenshot thumbnail

Inside the repository, include a screenshot thumbnail of your theme. You can name the file anything, for example screenshot.png. This image will be used for the small preview in the theme list.

Your screenshot file should be 16:9 aspect ratio. The recommended size is 512x288.

Submit your theme for review

To have your theme included in the Theme Gallery, you will need to submit a Pull Request to obsidianmd/obsidian-releases.

Releasing Versions (Optional)

If your theme is getting more and more complex, you might want to start thinking about how your theme will stay compatible with different versions of Obsidian. Introduced in v0.16 of Obsidian, themes support Github Releases. This means that you can specify which versions of your theme are compatible with which versions of Obsidian.

Steps for releasing the initial version of your theme (1.0.0)

  1. From your theme's repository, click on "Releases".

Pasted image 20220822145001

  1. On the Releases page, there should be a button to Draft a new Release. Press it.

Pasted image 20220822145048

  1. Fill out the Release information form.
    • Choose a Tag: Type in the name of the version number here. At the bottom of the dropdown should be a button to create a new tag with your latest theme changes. Choose this option. Pasted image 20220822145648
    • Release Title: This can be the version number.
    • Description Optional: Anything that changed
    • Files: The most important part of this form is uploading the files. You can do this by dragging 'n dropping the manifest.json file and the theme.css file your for theme inside the file upload field.

Pasted image 20220822145356

  1. Click "Publish Release."
  2. Make sure that versions.json is set up correctly. This file is a map.
{
  "1.0.0": "0.16.0"
}

This means that version 1.0.0 of your theme is compatible with version 0.16.0 of Obsidian. For the initial release of your theme, you shouldn't need to make any changes to this file.

Steps for releasing new versions

Releasing a new version of your theme is the same as releasing the initial version.

  1. From your theme's repository, click on "Releases."

  2. On the Releases page, there should be a button to Draft a new Release. Press it.

  3. Fill out the Release information form.

    • Choose a Tag: Type in the name of the version number here. At the bottom of the dropdown should be a button to create a new tag with your latest theme changes. Choose this option. Pasted image 20220822145812
    • Release Title: This can be the version number.
    • Description Optional: Anything that changed
    • Files: The most important part of this form is uploading the files. You can do this by dragging 'n dropping the manifest.json file and the theme.css file your for theme inside the file upload field.
  4. Click "Publish Release."

  5. Update the versions.json file in your repository. For the initial release of your theme, you probably didn't need to make any changes to the versions.json file. When you release subsequent versions of your theme; however, it's best practice to include the new version as entry in the versions.json file. So this might look like:

{  
  	"1.0.0": "0.16.0",
  	"1.0.1": "0.16.0"
}

What's important to note here is: the new version is included as the "key" and the "value" is the minimum version of Obsidian that your theme compatible with. So if the new version of your theme is only compatible with an Insider version of Obsidian, it's important to set this value accordingly. This will prevent users on older versions of Obsidian from updating to the newer version of your theme.

You might also like...

In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaScript index file that imported all the modules and assets

In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaScript index file that imported all the modules and assets

To Do List In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaSc

Mar 31, 2022

This will create a REST API using Express JS and MongoDB removing the hassle of creating everything from scratch.

rest-api-init Fastest way to create REST API with Node.js, Express.js & MongoDB. Prerequisites Node.js needs to be installed. MongoDB Compass needs to

Dec 3, 2022

Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat

Dec 24, 2021

Logseq-craft-theme - Craft Theme for Logseq

Logseq-craft-theme - Craft Theme for Logseq

Craft for Logseq Almost all creativity requires purposeful play. A Craft insprir

Oct 26, 2022

"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. You will build a simple website that allows for doing that, and you will do it using ES6 and Webpack!

To-do-list Description "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark t

Oct 18, 2022

A superfast and easy to use knowledge base to help your customers get the info they need, when they need it most.

A superfast and easy to use knowledge base to help your customers get the info they need, when they need it most.

A superfast and easy to use knowledge base to help your customers get the info they need, when they need it most. helpkb is an open-source Next.js (A

Dec 5, 2022

This React-Based WebPage allows the client/user system to create their own blog, where users can publish their own opinions.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jul 28, 2022

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

Aug 25, 2022
Comments
  • Sample theme for 1.0?

    Sample theme for 1.0?

    AIA (apologies in advance :-) -- Has this template been updated for the Obsidian 1.0 release? (Congratulations! 🥂 🎆 👏🏾 )

    I'm considering trying my sad skills to create a theme.

    opened by easyas314 1
Owner
Obsidian.md
Obsidian.md
🌗 1 line of code to apply auto dark / light theme and support custom theme for your website. Super fast and lightweight theme library.

themes.js A super lightweight and fast Theme library with auto system color scheme detection in JavaScript. Features Auto detect Dark / Light mode by

SerKo 4 Nov 29, 2022
My XFCE dotties - The GTK theme as well as the kvantume theme used here are forks of the Matcha GTK/kvantum theme

DOTFILES OF MY XFCE SETUP The GTK theme as well as the kvantume theme used here

Mehedi Rahman Mahi 201 Dec 31, 2022
Theme Redone is a custom WordPress theme starter/framework with its own Gutenberg blocks solution and a CLI that speeds up the block creation process.

Theme Redone The Framework for Developing Custom WordPress Themes with its own Gutenberg Blocks creation solution. Theme Redone is a custom WordPress

null 103 Dec 30, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
🍞📅A JavaScript calendar that has everything you need.

A JavaScript schedule calendar that is full featured. Now your service just got the customizable calendar. ?? Table of Contents Collect statistics on

NHN 10.4k Jan 5, 2023
Everything you need to use NextJS with Brownie!

Brownie NextJS Mix This mix comes with everything you need to start using NextJS with a Brownie project. Installation Install Brownie, if you haven't

Rafael Abuawad 9 Jun 20, 2022
Eventually* Everything you'll need for successful feature flagging

remix-flags Eventually* Everything you'll need for successful feature flagging What's inside? This repo uses npm as a package manager. It includes the

Jacob Ebey 16 Jun 10, 2022
A plugin for Obsidian (https://obsidian.md) that adds a button to its search view for copying the Obsidian search URL.

Copy Search URL This plugin adds a button to Obsidian's search view. Clicking it will copy the Obsidian URL for the current search to the clipboard. T

Carlo Zottmann 6 Dec 26, 2022