Theme: Nosedive UI

Share & showcase
#1

A CSS theme for obsidian.md based on the Fictional UI shown in the episode “Nosedive” from Black Mirror season 3. It can be toggled between a light theme and a dark theme.

nosedive-ui
nosedive-ui1920×1044 227 KB

nosedive-ui-modal
nosedive-ui-modal1920×1047 107 KB

Goals:

  • Reproduce the Fictional UI From the show in Obsidian
  • Prioritize usability over style
  • Provide a clean, minimal, focused UI

This is version v0.1 because I know that the theme in its current state doesn’t fully meet my criteria, but I think its ready to have more eyes on it.

Let me know what you think and feel free to open issues on the github as well! :v:

4 Likes
#2

Man, Nosedive is a great episode! I think the blue side lacks a bit of contrast between the light-grey-blue and the white text :blush:

#3

Thanks for the reply. I agree, I need to work on contrast for both light and dark in some places. I’m trying to hunt down all the problematic areas so I can make improvements. If you have any specific areas to call out, please do so.

From the screenshot alone, H6 stands out

#4

I agree with the H6. I think the menu pictograms are similarly low contrast, although that one is of course more of a balance.

#5

This is a great work man, maybe give the Nord colors a peek and see if you can’t get that text to pop more. Just an idea here, you’re on to something great.

Keep up the good work!

1 Like
#6

Loved the episode, love this theme (dark version)! I have been stress testing your theme for the past few days. As others noticed, contrast needs some work. If I have any fixes or suggestions in order to meet your goals I’ll create a PR.

Keep it up!

#7

Thanks for the feedback! I’ve recently updated the theme to improve contrast. Minor improvements in Light mode, but in Dark mode especially.

Make sure to call out specific areas you’re having issues. Especially with respect to plugins you use that may be problematic.

#8

For now I have only activated the Todoist plugin. The only issue being the large Icons when rendered (activated). I do not have these enabled as I use the plugin as general overview of my todos within the daily template.

image
image714×774 22.4 KB

#9

Yowza, that is indeed a large icon. I don’t use todoist myself, I’ll have to pull that down and see what’s going on.

#10

Looks like this issue presents itself in any theme. The plugin author is going to have to handle this formatting.

#11

Seems indeed an issue with pretty much all themes.

Another issue. The box-shadow, applied to views outside of the active one, is far from smooth and somewhat distracting. Which invalidates goal (3).

See printscreen below. Not sure if it is just me, present on both my screens (ultrawide screen and 1080p 15inch laptop screen).

image
image534×839 9.84 KB

Apparently layering should smooth things out. Below css is the best I could get:

   div.workspace-leaf.mod-active {
      box-shadow: 0 0 10rem rgba(0,0,0,0.01),
                  0 0 20rem rgba(0,0,0,0.02),
                  0 0 40rem rgba(0,0,0,0.03),
                  0 0 70rem rgba(0,0,0,0.04),
                  0 0 100rem rgba(0,0,0,0.05)
    ;}