Encore - An Obsidian Theme
The Encore theme aims to freshen up the UI of Obsidian.md with modern design, while staying true to the original feel of the app (at least in my opinion lol). It's loosely based off Material 3.
The goal was to recreate the default theme, but with a more refined and modern look. The colour palette has been tweaked slightly; the greys now contain a touch of purple, and the accent colour was made warmer and more vibrant.
Usability is my biggest concern, I made sure to keep a good separation and contrast between things so you can quickly find what you're looking for.
The design of the main surfaces are kept fairly muted to stay out of your way, but things that aren't often on screen were made more vibrant, such as the right click menu and command palette. I like this contrast, keeps things fresh while using the app.
My To-Do List
I iterate on this theme as I use it, and whenever I get free time. Here's a list of things I want to change:
- Main workspace area
- Resize handles (proud of this one
- Settings page
- File browser
- Command palette
- Right click menu
- Fix search box
- Checklist plugin
- Mobile support
- Light theme
- Top level header
- Embedded notes
- Bullet lists
obsidian.css into your themes folder (there's a link to it in the app), you might want to rename it to Encore.css so you can see it's name in the theme browser.
How to Edit
Note to self in case I forgor
You'll need node.js, since I'm using SASS.
- Clone the repo, and run
npm run devto make SASS watch for changes and compile to
- Create a symbolic link from this themes folder over to the actual themes folder in Obsidian
- Edit the files inside
That's just the way I've set it up, you can also follow this article if you want to see another, simpler way.
The symbolic link is there so built css files are loaded straight into obsidian.
Note on code
I only just started using sass, I used it to split it into different files. I'll start to use sass features from now on.
Code quality should start improving now that I have actual tooling.
source/appcontains styles that affect the app as a whole, like the title bar, status bar, and settings pages
source/componentsare for individual things like the file explorer, calendar, todo list, and so on
source/mdhave styles that affect the markdown preview
source/workspaceare styles for the overall layout of the main UI, and things shared by components (like the tab header)
Each folder has a
.scss file with its name. This is the import file, that has a
@use for the other scss files in the folder.
It's also a place to store snippets of scss.
main.scss file defines all important global variables, if you want to make a colour variation of this theme, you can edit this one. It also imports all of the other import files mentioned above. This is the file that we compile.