Apply these snippets on top of the default Obsidian theme.
To use snippets, add the .css
files to yourvault/.obsidian/snippets/
and then go into the Obsidian Appearance preferences and toggle them on.
(These are snippets so they can be adjusted for light vs dark mode)
accent-blue.css
uses Apple's Blue accent colorsaccent-yellow.css
uses Apple Notes' accent colors
The accent color snippets are mutually exclusive in use.
pickiness.css
,cleanup.css
makes minor UI changes to reduce visual clutter. Note this does hide the file directory sort options because I don't use them. Delete lines 10–12 ofcleanup.css
to show them.
safaritabs.css
offers Safari style UI tabs on macOSsquare-tabs.css
offers Figma style UI tabs on macOS
The tab snippets are mutually exclusive in use.
mobile.css
provides iPhone specific changesipad.css
provides iPad specific changes (these still need work...)
faint-yaml.css
is pretty particular—it minimizes the diaply of YAML frontmatter in a very opinionated and pretty fragile way. Disclaimer is this might not work for you at all if you use a lot of YAML. My use for it is to take frontmatter that includes only the created date in a specific format, and display it as shown below:
![CleanShot 2023-07-05 at 10 26 37@2x](https://private-user-images.githubusercontent.com/59900904/251230670-f45a4e62-ebd6-4232-840c-1d031133a1b4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyMTUwODgsIm5iZiI6MTcyMTIxNDc4OCwicGF0aCI6Ii81OTkwMDkwNC8yNTEyMzA2NzAtZjQ1YTRlNjItZWJkNi00MjMyLTg0MGMtMWQwMzExMzNhMWI0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE3VDExMTMwOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRmNTM1MmY4ZTA0MTlkOGY3YzMyMGI5NTNiMzg2MzM1MGEyZGVmNDYwZWE5NGFmZDlhYmQ4NmQ2N2ViYjJlNWMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.PhsvtuzGn19GfysODc_S4mz6oEhxu5Qybbf8X2LNjgI)
sidebar-redesign.css
cleans up the sidebar a bit and removes a lot of UI detail on Mobilesf-symbols.css
replaces the Obsidian checkmark svg with the SF Symbols checkmarkhighlight-color.css
changes the highlight color to a tealcode-color.css
changes inline code styling to use blue