Lagom

Main

A phone-focused theme for Obsidian

Lagom tries to focus on just the right amount of changes needed to make it look aesthetically more conventional and modern. It's not about reinventing the wheel or offering a unique or special theme. I simply think Obsidian is a diamond in the rough that needs to be polished to shine on its own.✨

The theme attempts to follow the following principles:

Avoid, as much as possible, extreme minimalism that prevents me from recognizing what is and what is not in the UI.
Make subtle changes that are noticeable and make a difference both aesthetically and functionally, but are not a distraction when using Obsidian.
Symmetry and visual consistency.
Focused exclusively on phones or tablets.
Does not follow a specific color palette or typeface (so you can use it with the one you prefer!)
Complementary and modular

Work in progress...

Screenshots

IMG_20241214_172439 IMG_20241009_142625 IMG_20241009_142756 IMG_20241009_142848 IMG_20241009_142919

Fonts

Main font: Akrobat Semibold or Pragati Regular, but Interphases Pro Condensed Regular is more pleasant and perhaps more suitable for reading.

Headers: Playfair Display

Mono: Iosevka Regular.

Code: JetBrains

Quotes: Caecilia

Download snippet

Features

The file panel occupies 100% of the screen to take advantage of the available space (optional pop-up style)
Files show their full name on multiple lines. No more unfinished titles or ellipses!
Nested folders with a subtle open-folder indicator
Separator inspired by the book A Psalm for the Wild-Built
Code blocks more similar in appearance to a macOS terminal (colorful for dark mode and monochromatic for light mode)
Quotes with classic style
Touching the right side of a heading will collapse or expand its contents
Embedded notes have been slightly redesigned
Inline title separator in editor mode
Translucent navigation bar (optional)
Chat bubble style callouts (optional)
An elegant inline title inspired by The New Yorker covers

Note

Make sure to use Commander, Iconize, Custom file explorer sorting, Style Settings and File explorer note count with this theme for a complete experience.

Snippets

To use the file name at the vault root to categorize a group of folders, it is necessary to use a snippet:

.nav-file-title[data-path*=".md"]:before {
	content: "" !important;
}

.nav-file-title:not([data-path*="/"]) {
  left: 0px !important;
  margin: -10px !important;
  color: var(--text-accent);
}

To remove the separator lines at the root of the vault, so it doesn't interfere with the files that will be used as categories, you can use this snippet:


.nav-file {
  border-bottom: none !important;
}

.nav-folder:not(.mod-root) .nav-file {
  border-bottom: var(--filename-line-thickness) var(--filename-separator-style) var(--background-modifier-border) !important;
}

The following snippet can be pasted directly into the style settings to achieve the Lagom look as shown in the screenshots.

{
  "files-folders@@nav-item-size": 16,
  "notes-values@@letter-spacing-note": 0,
  "others-values@@theme-dark-opacity": 0.5,
  "notes-values@@inline-title-always-uppercase": false,
  "notes-values@@inline-title-size": 21,
  "notes-values@@headers-align": "left",
  "notes-values@@p-spacing": 32,
  "notes-values@@quote-hide-top-line": "1.5px",
  "notes-values@@quote-hide-down-line": "1.5px",
  "yaml-values@@hide-separator-yaml": "unset",
  "notes-values@@wrap-code-blocks": "pre",
  "notes-values@@code-size": 13,
  "notes-values@@code-size-edit-mode": 14,
  "notes-values@@h1-size": 23,
  "notes-values@@h2-size": 21,
  "notes-values@@h3-size": 19,
  "notes-values@@h4-size": 16,
  "notes-values@@h5-size": 13,
  "notes-values@@h6-size": 11,
  "notes-values@@page-style-read-mode": false,
  "notes-values@@enable-shadows-borders-img": false,
  "notes-values@@hide-embed-title": true,
  "others-values@@navbar_blur_level": "8px",
  "hide-elements@@scrollbars": "none",
  "hide-elements@@files-bookmarks-search-bar": "none",
  "hide-elements@@show-explorer-buttons": "none",
  "hide-elements@@show-editor-text-bar": "none",
  "hide-elements@@hide-navbar": "block",
  "others-values@@nav-bar-blur": true,
  "notes-values@@active-line-indicator": "\"\"",
  "notes-values@@show-dotted-line": "1.5px",
  "yaml-values@@hide-add-button": "flex",
  "files-folders@@popup-explorer": true,
  "files-folders@@icon-file": "•",
  "hide-elements@@show-vault-name": "none",
  "notes-values@@headers-space-simetry": 1.2,
  "notes-values@@page-style-editor-mode": true,
  "notes-values@@separator-icon-color": "#9090906B",
  "notes-values@@default-font-size": 16.4,
  "notes-values@@inline-title-bold": 600,
  "notes-values@@line-height-note": 23,
  "notes-values@@focus-non-active-line-opacity": 1,
  "notes-values@@focus-active-line-opacity": 1,
  "notes-values@@hide-icon-link-embed-notes": "transparent",
  "hide-elements@@icon-settings": "none",
  "hide-elements@@num-of-notes": "none",
  "notes-values@@padding-note-content": 0,
  "notes-values@@padding-default-note-style": 35
}

Comparison

IMG_20241014_094621

If you want to use Lagom alongside another theme (Gruvebox, Rosé Pine, Borealis, etc.) you can simply move the theme.css file into your snippets folder and activate it.

Roadmap

~~Clean and improve the CSS code~~
Adapt it for the rest of the platforms
~~Fix some aesthetic issues~~
~~Add options for Style Settings~~

Special thanks

@Bluemoondragon07 For their fantastic theme that encouraged me to choose Obsidian as my replacement for Evernote.

@ariehen In this post for the properties snippet in notes

@death_au

AlanG for the code block snippet

@LuisaKart For the code to modify the new tab view

Changelog

V1.7.1

Fixed visual inconsistencies in tables, code blocks, and pop-ups
Added Aliases with a pill-shaped design (optional)
Added chat bubble-style callouts: [!IN] and [!OUT]

V1.7.0

Fixed the issue of overlapping settings in Style Settings
Now the divider line can be hidden in files at the vault root

V1.6.9

Bug fixes (this time using Claude)
Added a separator in editor mode for the inline title
Fixed the page style that was being applied unnecessarily to embedded notes
Fixed the issue with the icons next to the filenames

V1.6.8

Added option to revert the position of some elements in the new Obsidian UI
General improvements and fixes for (hopefully) the theme's correct functioning with the latest Obsidian update.

V1.6.7

Added a new style to the inline titles!

V1.6.6

Bug fixes

V1.6.5

Minor visual fixes for the latest Obsidian update.
Improvements in the appearance of the settings panel.
Fixed issue that prevented setting a symbol preceding the file name in the file explorer.

V1.6.4

Collapsible Heading Indicators: A visual indicator now appears in headings when their content is collapsed. This indicator has been repositioned to the right margin for improved readability and to minimize interference with text.
Independent Page Style Selection: Users can now select page styles independently for both the editor and reading modes.
Title Corrections: Minor corrections have been applied to the title display within notes.
Interface Enhancements: Border lines have been added to several previously missing interface elements for improved visual consistency.

V1.6.3

Option to enable a translucent glass effect on the navigation bar.
Fixed the issue with the small selector icon in dates within properties.
Option to adjust the padding of note content.
Some aesthetic corrections to the appearance of global search.
Fixed several inconsistencies when hiding or showing the settings button, vault name, number of notes, etc.

V1.6.2

The version number in the GitHub changelog now matches the one shown in Obsidian to avoid confusion regarding changes
Improvements to the navigation bar: now it takes up less screen space with a floating design
Added an option to turn off image borders and shadows (resolves problems with transparent images)
You can now choose between two note styles for reading mode: page style and card style (though it still conflicts if the note has embedded notes)

V1.9

Now the macOS style buttons in the Code Blocks (Light Mode) are images instead of symbols. It is no longer necessary to modify their size in Style Settings
The line borders of code blocks, callouts and embedded notes share the same design.
Some other small details fixed

V1.8

Small fixes in the search and replace bar
Option to show or hide the link icon in embedded notes(!)
Option to choose text alignment in the notes list within the file explorer

V1.7

Option to change the background color of the active line
Images are now centered by default and occupy the full width for better visual consistency with the rest of the content.
New option to activate grayscale images when dark mode is active.
You can now choose the underline style for local links
Small changes in Style Settings

V1.6

Added option to prevent changes to the Inline Title in reading mode.
Fixed list inconsistency caused by the latest Obsidian update.

V1.5

New design for quotes
You can now modify the padding of the quote blocks.
Option to choose a local image or URL as the note background in the text editor
You can now always capitalize the title inside notes.
Extra options to customize the dividing line between notes in the file explorer (style and thickness)
Small changes in search boxes

V1.4

Fixed disproportionate margin in images
New option to change the size of headers
Removed the option to change the font size of the active line (apparently it was not useful) as it caused display problems in editor mode.
New option to adjust the height of the tab preview.
The note name in the tab list is displayed on multiple lines.
It is now possible to choose the font size of YAML metadata in editor mode.
The icon next to each file was slightly misaligned; it is now centered correctly relative to the text height.
Some other minor changes

V1.3

Fixed the position of the date and labels in properties. They are now aligned with the other values.
A tiny correction in the embedded notes (the bottom padding was too short)
Tables now show vertical separator lines inside.
New option to separately choose font size inside code blocks in edit mode and preview mode.
Fixed top margin of the Command palette
Small changes in tables

Contribution

This is my personal Obsidian theme, but since I'm not a CSS expert, there'll probably always be things to fix or improve. Contribute by reporting bugs and code improvements, any feedback is welcome!

Please open an issue on GitHub, DM me on Twitter / Bluesky or via Email. I will try to fix it as soon as possible.

If you really like this theme, please consider supporting me ᵔᴥᵔ

Lagom

Description

README file from

Lagom

Screenshots

Fonts

Features

Note

Snippets

Comparison

Roadmap

Special thanks

Changelog

Contribution