The Encore theme aims to freshen up the UI of Obsidian.md with modern design, loosely based off Material 3.

  • By Lucas Maldonacho
  • Last update: Dec 17, 2022
  • Comments: 1

Promo image

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.

Preview of theme

Design Philosophy

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. Right click menu 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:

App UI

  • Main workspace area
  • Resize handles (proud of this one 😎 )
  • Tabs
  • Settings page
  • File browser
  • Command palette
  • Right click menu
  • Fix search box
  • Checklist plugin
  • Mobile support
  • Light theme

Markdown

  • Headers
  • Top level header
  • Highlights
  • Embedded notes
  • Checkboxes
  • Bullet lists
  • Bold
  • Italics
  • Strikethrough

Installation

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

  1. Clone the repo, and run npm install
  2. Use npm run dev to make SASS watch for changes and compile to themes/Encore.css
  3. Create a symbolic link from this themes folder over to the actual themes folder in Obsidian
  4. Edit the files inside ./source

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.

Code Structure

  • source/app contains styles that affect the app as a whole, like the title bar, status bar, and settings pages
  • source/components are for individual things like the file explorer, calendar, todo list, and so on
  • source/md have styles that affect the markdown preview
  • source/workspace are 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.

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

Github

https://github.com/Maldonacho/obsidian-encore-theme

Comments(1)

  • 1

    [BUG]Checkbox not working in reading mode

    Describe the Bug Impossible to check

    Relevant Screenshots Encore Theme imagen

    Any other Theme (Wasp) imagen

    To Reproduce Steps to reproduce the behavior, e.g.

    1. Open a Kanban Board
    2. Click on an TODO task, for example
    3. It desn't change. DONE task already checked are shown uncheked

    In which mode does the bug occur?

    • [ x] Reading/Preview Mode
    • [ ] Source Mode
    • [ ] Live Preview

    Which editor are you using?

    • [ ] Legacy Editor
    • [x] New Editor

    Which version of Obsidian are you using?

    • [x] Public Release (Desktop)
    • [ ] Public Release (Mobile)
    • [ ] Insider Release (Desktop)
    • [ ] Insider Release (Mobile)

    Checklist

    • [x] I have updated to the latest version of the theme (Obsidian Settings → Appearance → Themes - Manage → Update).
    • [x] I made sure that the issue is related to this theme, by checking that the issue does not occur with other themes or the default theme.