Theme: DUNE

[Jopp]

Finally I found some time to put together a quick and non-exhaustive - overview of my community theme for Obsidian. This code project, which I want to present you a few minutes, has got quite a lot of my attention and care, especially features related to typography.

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

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.
If you want to change colors on the fly you can do so switching quickly to an alternative color scheme or get creative and re-imagine Dune’s color look with your own color taste.
You can customize colors and features comfortably from Dune’s preferences

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

Some of Dune’s main features include:

Sharing

• Obsidian’s core plugin Slide’ looks more minimal now. Navigate back and forth with arrows on your keyboard, close your slides with a popup close button
• display more text on-screen with smaller fonts for your slides, you’ll find a new option under Dune’s preferences
• since Dune’s slideshow uses more space on-screen, touch the bottom or top margins to navigate / swipe from one slide to the next (mobile) - to highlight your available touch area, open Dune’s preferences and toggle on “visible touch area”
• 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
• adjust zoom factor of small or big mermaid diagrams

Details

• simple yet powerful multicolor highlights, bold and italic text
• smart text tags to modify words, sentences and text blocks
• simple color variations to manipulate callouts, tables, fenced notes (differentiate notes)
• smart list markers (use checkbox lists instead of hyphen lists - in Dune they look the same but Dune makes lists actionable!)
• add a true profile picture / avatar to your vault
• add pretty or simple page/chapter breaks (to add some design and relax your page layout, add a page break in your pdfs)
• bigger popover previews
• text typsetting - text alignment R (right), A (axial), B (block)
• you can hide or obscure almost every button and icon in Obsidian’s User Interface to better focus on your work

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.