A light & dark theme for Obsidian inspired by modern GitHub colors.

  • By Nikolaus Brunner
  • Last update: Nov 3, 2022
  • Comments: 13

Obsidian Deep Work Theme

A light and dark theme for Obsidian inspired by the modern GitHub colors.

Buy Me A Coffee

Mobile

The theme is hardly different from the default theme except for the colors, so it works well on mobile too!

Changes

For recent changes please take a look at the Changelog.

Roadmap

  • Dimmed, dark option to be enabled via a dedicated future PlugIn
  • publish.css

Fonts

The font-family declarations are taken directly from GitHub.

:root {
  /* ... */
  --default-font: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  --editor-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
  /* ... */
}

Respected PlugIns

  • Calendar
  • Buttons
  • Admonition
  • Sliding Panes
  • Todoist
  • Jump-To-Date
  • Kanban

Install

  • Recommended: You can install this theme very simply by downloading it from the Community Themes Finder from the Obisidian settings. This also works on mobile.
  • Manuall: You can download or clone this repository, rename the obsidian.css file to Deep Work.css and place it in your hidden .obsidian/themes/ folder.

Github

https://github.com/nikbrunner/obsidian-deep-work-theme

Comments(13)

  • 1

    Embed/transclusion has partial left margin

    Describe the bug An embed/transclusion in Preview shows a partial sidebar in accent color. It should not be there. The screenshots explain what I mean.

    To Reproduce Steps to reproduce the behavior:

    1. Go to '...'
    2. Click on '....'
    3. Scroll down to '....'
    4. See error

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots Embed in Edit (Live Preview) image

    Same embed in Preview: image

    The blue bit on the left should not be there.

    Desktop (please complete the following information):

    • OS: [e.g. iOS] MacOS 10.14.6
    • Browser [e.g. chrome, safari]
    • Version [e.g. 22]

    Smartphone (please complete the following information):

    • Device: [e.g. iPhone6]
    • OS: [e.g. iOS8.1]
    • Browser [e.g. stock browser, safari]
    • Version [e.g. 22]

    Additional context Add any other context about the problem here.

  • 2

    Pane icons suddenly large

    Describe the bug Pane icons appear large.

    image

    To Reproduce I switched to the default theme and then back again to Deep work. After this the pane icons appear very large and highlighted.

    Sorry can't add much info as I haven't been able to troubleshoot why this happens. Switching to another theme solves the problem but whenever going back to Deep work these big icons appear again.

  • 3

    Text Search Highlights barely indistinguishable

    Describe the bug Text Search Highlights are barely visible. Original Report

    To Reproduce Steps to reproduce the behavior:

    1. Search for Text Phrase inside document
    2. The highlighted phrases are very feint in contrast

    Expected behavior Text Search Highlights should be more visibile

    Screenshots 8bf8b42a20b29035f3a070c647aac80242b08051

  • 4

    Request - Wrap title of notes in file explorer

    Great theme!

    Your theme doesnt wrap name of the note (the vanilla Obsisidian doesn't do it too) image But some themes wrap the name (this is Dark Graphite Pie) image

    Do you consider adding name wrapping to your theme? If not, I will myself locally add it as and standalone CSS piece

  • 5

    Checkbox styling in live preview

    When using Reading-view, checkboxes with this style are shown as completed (ticked):

    [-]

    However, when using live-preview they show as empty (not ticked).

    Would it be possible for these checkboxes to show as completed also in live-preview?

  • 6

    can't resize panes

    While using the theme, I cannot resize the panes. It's my favorite theme, but I resize a lot! Help!

    When I use other themes, I can drag the edge of a pane to make it larger or smaller, but I can't figure out how to resize when I am using this theme. Using a Mac if that matters. Thanks!

  • 7

    'Link to blocks' do not focus on linked block

    👋 Hello

    When I click on a 'link to block,' the linked block is not focused on the linked note. The pages open up focused on the top - just like when you click a regular 'Link to Note.'

    This behaviour is different than the one from the default theme.

    I have quite a few long notes, and other notes link to various parts of these long notes, so it would be great if the focus were on the linked block when they are open.

    Thank you!

  • 8

    status bar covers find buttons

    Is your feature request related to a problem? Please describe. It's hard to use the find buttons because the status bar covers them.

    Describe the solution you'd like For the Find dialog to open above the status bar, like it does in the default theme.

    Describe alternatives you've considered Status bar could move up when the find dialog opens, rather than the find dialog appearing above, or the status bar could disappear when the find dialog opens.

    Additional context

    Thanks for making this theme, I find it really useful.

    In my setup, the path overlay covers the previous/next buttons of the note search. This is related to #53. I wonder if it's possible to have the path overlay move upwards when the search opens, or have it disappear entirely.

    I'm using Obsidian v0.13.19, MacOS 11.6.2.

    Thanks!

    CleanShot 2022-01-24 at 14 06 33

    CleanShot 2022-01-24 at 14 09 57

  • 9

    Code block indentation problem

    I don't know English; please excuse typing errors.

    I noticed that the first line of the code block would have a little space, just the first line

    similar #11

    image

  • 10

    Something Wrong in Preview mode

    Thanks a lot for your works!!, I really enjoy your theme.

    But, when I use frontmatter in preview mode, a 'space' is padded left side of first charater of first line.

    Thanks again!!

    -- Edit Mode 1

    -- Preview Mode 2

  • 11

    Scroll bar not showing

    Describe the bug There is no scroll bar in any windows with this theme. This makes it difficult to scroll long documents, since you must use the mouse scroll all the time.

    To Reproduce Steps to reproduce the behavior:

    1. Install theme
    2. Notice that the scroll bar has vanished

    Expected behavior The scroll bar shouldn't disappear.

    Screenshots 2022-03-31_20-19

    2022-03-31_20-20

    Desktop (please complete the following information):

    • OS: Ubuntu 20.04, Kali Linux 2021
  • 12

    feat: Support for style settings plugin and big design update

    • [x] Setup Semantic Variables
    • [x] Rename Theme Files: dark.scss & light.scss to dark_default.scss and so on
    • [ ] Setup dark-dimmed and light-dimmed color scheme
    • [ ] Update Design for dark-default and light-default for #42
  • 13

    Basic Customization with Obsidian Style Settings Plugin

    I want to setup some basic customization options, with the popular Style Settings Plugin.

    I need to make some research, but these links seems like a good starting point.

    • https://github.com/mgmeyers/obsidian-style-settings#obsidian-style-settings-plugin
    • https://github.com/ceciliamay/obsidianmd-theme-primary

    Some Examples:

    • Main Accent Color
    • Font Families
    • Theme Sub Type (Dark Default, Dark Dimmed etc.)
    • Visibility of Scrollbars