# for Theme Designers This note collects resources and guides for beginner and expert theme designers for [[Obsidian]]. ## Starter Guides - [[How to Style Obsidian]] by [[ryanjamurphy|Ryan J. A. Murphy]] - [[Default Obsidian Theme Colors]] - 🎬 [[CSS 101 - Community Talk]] - [[css-obsidian-layout.png|Visual guide to primary Obsidian CSS Classes]] - [🎬 Create a Custom Theme in Obsidian](https://www.youtube.com/watch?v=lyaEnxgow4E) - [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) - [[Graph view customization|Styling the graph view]] - [[Adding plugin compatibility for themes to the Obsidian Hub]] - [[How to update your plugins and CSS for live preview]] - [[How to add your theme to the community theme store]] ## Advanced Guides - [[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]] - [[Using Visual Studio Code for Theme Development]] by [[damiankorcz|Damian Korcz]] - [🎬 How To Work with Obsidian 1.0's new CSS Variables](https://www.youtube.com/watch?v=yl0pvIRTWWo) by [[chrisgrieser|pseudometa]] ## Tools & Resources - [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]] - [Style Settings Plugin](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. - [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-repos-downloader](https://github.com/claremacrae/obsidian-repos-downloader) - Download every approved Obsidian.md community Plugin and Theme - [[Obsidian Design System Community File]] A community built, component and styles library in [[Figma]] for reference and use while designing user interfaces for Obsidian %% 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>