Make Obsidian Feel Like Bear

I like Obsidian’s open ecosystem and flexible feature set, but I really love Bear’s user interface. Last year, I figured out that you can configure Obsidian to feel a lot more like Bear by doing a few simple things:

• Use the Minimal theme
• hide the extra chrome
• replace the default sidebar with Notebook Navigator
• use Bear-like fonts
• add a small CSS snippet to fix heading spacing

This post includes a more complete guide for anyone who wants to make the switch.

Use these settings:

{
  "theme": "system",
  "cssTheme": "Minimal",
  "accentColor": "#cd4849",
  "showViewHeader": false,
  "showRibbon": false,
  "baseFontSize": 16,
  "textFontFamily": "Bear Sans UI",
  "interfaceFontFamily": "Bear Sans UI",
  "enabledCssSnippets": ["header_spacing"]
}

To get the Bear Sans UI font, follow these steps:

1. Go to finder ->
2. Applications ->
3. Right Click on Bear + Click “Show Package Contents” ->
4. Open “Contents” folder" ->
5. Open “Resources Folder”

The BearSansUI font should be stored there. Double click to install it.

Use these app settings:

{
  "attachmentFolderPath": "attachments",
  "showInlineTitle": false,
  "propertiesInDocument": "visible",
  "alwaysUpdateLinks": true,
  "promptDelete": false
}

Then install Filename Heading Sync. This plugin gives you the Bear-like pattern where the note title is just the first # Heading, and the filename stays in sync.

Install Notebook Navigator. This is the plugin that really makes Obsidian feel like Bear. It replaces Obsidian’s default file explorer with something much closer to Bear’s notebook + note list model.

The settings that matter most are:

• startView: navigation
• autoRevealActiveFile: true
• collapseBehavior: all
• smartCollapse: true
• defaultFolderSort: modified-desc
• showRecentNotes: true
• recentNotesCount: 5
• showNoteCount: true
• showFileDate: true
• showFileTags: true
• showParentFolder: true
• showFilePreview: true
• previewRows: 3
• showFolderIcons: false
• showQuickActions: false

I also keep the right sidebar collapsed and use Notebook Navigator as the active left tab.

Two other optional plugins that I use are:

• Completed Tasks
• Auto Link Title

I had to make a few other CSS tweaks to get the spacing and colors right. Here’s the full CSS snippet I use:

.cm-line.HyperMD-header {
  padding-block: 0 !important;
  color: rgb(64,63,64);
  font-weight: 600;
}

.markdown-rendered h1,
.markdown-source-view.mod-cm6 .cm-header-1 {
  font-size: calc(var(--h1-size) * 1.5) !important;
}

.markdown-rendered h2,
.markdown-source-view.mod-cm6 .cm-header-2 {
  font-size: calc(var(--h2-size) * 1.4) !important;
}

.markdown-rendered h3,
.markdown-source-view.mod-cm6 .cm-header-3,
.markdown-rendered h4,
.markdown-source-view.mod-cm6 .cm-header-4 {
  font-size: calc(var(--h3-size) * 1.2) !important;
}

.markdown-source-view.mod-cm6 .cm-line {
  line-height: 1.5;
}

.markdown-preview-view {
  line-height: 1.6;
}

.nn-file-name {
  color: rgb(64,63,64) !important;
}