---
aliases:
- "Resources and Guides for Theme Designers"
tags:
- seedling
- MOC
---
# for Theme Designers
This note collects resources and guides for beginner and expert theme designers for [[Obsidian]].
## FAQ
- [[How to add your theme to the community theme store]]
- [[Adding plugin compatibility for themes to the Obsidian Hub]]
## Guides
- [[How to Style Obsidian]] by [[ryanjamurphy|Ryan J. A. Murphy]]
- [[Default Obsidian Theme Colors]]
- [[How to update your plugins and CSS for live preview]]
- [[Why and How to use Stylelint for your Obsidian Theme]] by [[chrisgrieser|pseudometa]]
- [[Want some Sass with your obsidian theme‽ here's How and Why]] by [[jdanielmourao]]
- [[Best Practices and Tips for Theme Development]]
- [[css-obsidian-layout.png|Visual guide to primary Obsidian CSS Classes]]
- [🎬 Create a Custom Theme in Obsidian](https://www.youtube.com/watch?v=lyaEnxgow4E)
- [custom-css at Obsidian Forum](https://forum.obsidian.md/tag/custom-css)
- [Getting comfortable with Obsidian CSS](https://forum.obsidian.md/t/getting-comfortable-with-obsidian-css/133)
- [Common Selectors for Custom CSS](https://forum.obsidian.md/t/common-selectors-for-custom-css/1984)
- [[Using Visual Studio Code for Theme Development]] by [[damiankorcz|Damian Korcz]]
- [[Graph view customization|Styling the graph view]]
## Community Talks
- [[CSS 101 - Community Talk]]
## Tools
- [**Obsidian Theme Template**](https://github.com/obsidian-community/obsidian-theme-template) A GitHub repository template with everything you need to get started. Click `Use this template` to get a ready-to-go theme repository.
- [**Theme Dev Vault**](https://github.com/obsidian-community/theme-dev-vault) An obsidian vault to aid in theme development
- [[obsidian-theme-design-utilities|Theme Design Utilities Plugin]]
- [**Transfonter**](https://transfonter.org/) Online `@font-face` generator for offline fonts
- [**Iconify Icon Sets**](https://icon-sets.iconify.design/) Website to search and find icons from multiple icon sets
- [**URL-encoder for SVG**](https://yoksel.github.io/url-encoder/) Encodes icon's svg code into useful `background-image` url
- [obsidian-style-settings:](https://github.com/mgmeyers/obsidian-style-settings) allows snippet, theme, and plugin CSS files to define a set of configuration options. It then allows users to see all the tweakable settings in one settings pane.
%% Hub footer: Please don't edit anything below this line %%
# This note in GitHub
<span class="git-footer">[Edit In GitHub](https://github.dev/obsidian-community/obsidian-hub/blob/main/04%20-%20Guides%2C%20Workflows%2C%20%26%20Courses/for%20Theme%20Designers.md "git-hub-edit-note") | [Copy this note](https://raw.githubusercontent.com/obsidian-community/obsidian-hub/main/04%20-%20Guides%2C%20Workflows%2C%20%26%20Courses/for%20Theme%20Designers.md "git-hub-copy-note") | [Download this vault](https://github.com/obsidian-community/obsidian-hub/archive/refs/heads/main.zip "git-hub-download-vault") </span>