Theme: DUNE

[Jopp]

Finally I found some time to put together this quick and non-exhaustive - overview of my community theme for Obsidian.

This project, which I want to present you in a few minutes, has got quite a lot of my attention and care and isn’t just a “colour play” but packed with features and some goodies useful in typography.

I present you Dune, a theme for Obsidian that supports both desktop and mobile devices and should help you to make better notes, even on tiny interfaces, like phones. Let’s see what Dune can do for you!

Since Dune’s first public release, user feedback allowed me to improve aspects I didn’t consider that important, until I fleshed them out - in fact, Dune was developed for the public and pkm community
And thanks to good feedback, Dune reached a new maturity, much to my enjoyment!

Dune does not play excessively with color effects or color combinations, but focuses more on a smooth, calm and also customizable appearance, a visual minimalism paired with powerful new tools under the hood, always available at your fingertips.

Note. To change Dune’s preferences, you will need to install mgMeyer’s Style Setting plugin

Some of Dune’s main features include:

Interface

• setting descriptions are resizable so everyone can learn how to use Obsidians features with ease, also more mature folks.
• phone buttons are easier to use, because slightly bigger to identify and with a slightly bigger touch area.
• buttons and icons on desktop are dimmed, so you’re more focused on your work. (Configurable in Dune’s settings)
• help is integrated: how to use Dune’s features is added to its setting descriptions and in second place, provided as info panel to access Dune’s online wiki
• improvements to Obsidian bottom toolbar on phones, so you get all commands in one grid
• multiple colour themes for day & night, custom theme
• option to dim bright pictures by night for eye care
• simple color variations to manipulate callouts, tables, fenced notes (differentiate notes)
• bigger popover previews
• hide panels to focus better on your work; this feature should be a updated and dynamic version of “readable line length”, but without its narrow line length. Of course, the toggle “readable line length” in settings>editor>display>readable line length must be off.

PDF export

• export as pdf converts dark-themed notes and this includes all my features, to a printer-friendly output

Tables

• Movie tables
• Recipes tables (a functional yet pleasing layout for recipes - compose your own with Dune’s features)
• Contact tables (simple, customizable contact sheet)

Pictures

• add true banners on top or bottom and change pictures’ height plus their vertical placement, if images internal alignment looks truncated / cut
• book pictures: place pictures on the Right/Left of your page, with the option to add a frame plus description text blocks
• change the size of embedded videos
• better readability of mermaid diagrams for both dark and light theme (separate css snippet)

Text

• simple yet powerful multicolor highlights, bold and italic text
• smart text tags to modify words, sentences and text blocks
• many new callouts, to organize your page layout and improve reading
• smart list placeholders (use checkbox lists instead of hyphen lists - in Dune they look the same but Dune makes lists actionable!)

If Dune sparked your interest, feel free to check out my ReadMe or go ahead and install my theme right away from Obsidian’s theme repo.
For any questions, let me know your ideas and suggestions - or in this thread or on my github repo!

[Duxs]

Thanks for the the theme, I’m liking it. To see if I can access the css for formation on iOS, where I’m often on is another thing. Unfortunately I haven’t found a decent way to let the iOS version save outside of local or iCloud.

That said, I wanted to point out on the iPad, the left slide control icon is just a little high when initially installed.

[Jopp]

Hey, I’m glad you like Dune and thanks for letting me know!
For tablets I’m dependant on users feedback, because I don’t use them myself. Issues on tablets are usually pretty easy to fix.

If you spot more bugs, take screenshots and open a bug report on my github repo or post your request here, if the bug is minor, thanks
Feature requests are welcome too if they fit into Dune’s design philosophy and if technically possible

Will see to include a fix in my next update and this would be… today evening, Eu time zone.

[Sobrio]

Installed the theme but now I can’t open Obsidian settings.

[Jopp]

I would like to include my fix but need your feedback first.

Haha, i talked to early about “easy to fix”, the tools at my disposal don’t give enough evidence, so I invite you to try this snippet, thanks:

body.is-tablet .sidebar-toggle-button {
  top: 20px;
  position: relative;
}

For the sake of completeness, a guide on how to install snippets

[Jopp]

Please tell me if you’re talking about the desktop or phone version, also if you’ve installed Style Settings, otherwise you won’t be able to access Obsidians and Dune’s preferences.

Tonight I’ll change the visibility behavior of the left ribbon from hidden to visible - I understand that new users may be confused if they can’t see anymore their preferences. Sorry and thanks for letting me know.

Meanwhile you can open the preferences if you go to

A. Obsidians top menu bar, generated by your system Obsidian>preferences or

B. Another way is to invoke your command palette and type: open settings

[Sobrio]

Windows. Style Settings plugin is installed.
I created the snippet but it does not work.

I found out I can open settings with ctrl+,
However, I still need the sidebar.

[Jopp]

I added more details to my last post

[Duxs]

Thanks for the quick turn around. Ha ha, a bit to low now. Not laughing at you, just at what are the chances, huh?

[Jopp]

Oh, Interesting result!

Today a small update to Dune’s preferences and…your sidebar button too.

Something unrelated, Dune looks too white on your device, did you install style settings and switch to some of the available themes in Dune?

[Duxs]

Better, up to you…not quite the same level as the right side button.

[Jopp]

Unluckily, I get unclear results in my console.

The easiest way to get a nicely aligned icon is to deactivate Dune, then add my snippet as already suggested in my previous post :

body.is-tablet .sidebar-toggle-button {
  top: 4px;
  position: relative;
}

Try to play around with diff pixel sizes ( unit is px).
Activate this new snippet and report back to me when your happy, so I can add this fix to my theme too, thanks.

[Papprolle]

Hello!

I would like to use this theme for the Mermaid charts. Strictly speaking for the zoom function. It works well on the phone, but not on the Chromebook. If Obsidian is on full screen, you can no longer zoom. However, if you start the app in the cell phone screen size, the zoom works.

[Jopp]

Hi,
to help you, I need some more info.

@Papprolle

It works well on the phone, but not on the Chromebook.

Since I don’t own a Chromebook, let me know what interface do you see on your Chromebook screen?
You can add a screenshot too.

Because if Obsidian sees Chromebooks as “mobile” devices, then mermaid zoom should work.

If Chromebooks are seen by Obsidian as desktop devices, i’ll look into it. Probably a Chromebook is defined as desktop device.

[tshare]

Is there a way to visually distinguish checkbox lists from hyphen lists? They look the same to me, and it is easier to read if they look different. Thanks.

[Jopp]

Hi @tshare and thanks for your interest in Dune

The reasoning behind this design choice is to drop simple hyphen lists in favour to checkmark lists.
This is only half the answer, however.

Dune makes lists “actionable”.
In Dune, checkmark lists are “the upgraded” version of hyphen lists. You can keep lists simple as they are, of course. That’s perfectly fine. At the same time, lists are actionable - all in one go.
But I understand your concern!

Typing - [ ] all times wouldn’t make sense! Dune wasn’t designed to be in your way, but to support you.

Let me show you how I insert lists. Please go to settings>hotkeys> and type “toggle checkbox status”.
Use the defaults (my recommendation) or change the shortcut to another key you’re comfortable with.

Basically, you insert the first checkbox with a shortcut, add your list text and press the return key, to auto generate the next checkbox, et cetera.

If you’ve further questions, feel free to ask.

[tshare]

Hi, and thanks for your reply. What if I want to make a non-actionable list or outline? There are many times I use hierarchical bullets when taking notes, but most of the notes are not actionable.

[Jopp]

In Dune, users are encouraged to switch to checkbox lists.

Example.

• Need a simple list?
  → Add a checkbox placeholder!
• Need an actionable list?
  → again, add a checkbox placeholder!

You can interact dynamically with your lists, whether you want them simple or actionable.

Still, if you’ve no use for checkbox lists, simply use hyphen lists.

[tshare]

I would like to use a combination of checkbox lists and hyphen lists. So there is no way to make checklists and hyphen lists look different using the Dune theme?

[Jopp]

Dune’s “dynamic list” can be both: simple or checked, depending your needs.
Therefore, Dune makes hyphen lists dated.

For the sake of simplicity, switch to checkbox lists - it makes no sense to mix both, as that would be confusing, if you get into the habit to check list items off.

Let’s see some examples:

• Case 1: If you’re sure to use only simple lists, use hyphens
• Case 2: if you need to mix both, use only checkbox placeholders
• Case 3: if you like hyphen lists, use only hyphens and on occasion, when you need checkboxes, change their status to checkboxes. To do so, place your cursor on the line to modify and press the shortcut to transform hyphens to checkboxes (please see previous post how to set or check your hotkeys)

Also, DUNE updates the print settings so you won’t see checkboxes instead of list placeholders in your exported PDFs.

Note, checkbox placeholders are slightly bigger and slightly less indented than hyphen bullets. I may change this look in future so that both list types look exactly the same.

Why using two list placeholders if you can have both in one? This, to simplify our life.