--- 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>