Add back translucency

Use case or problem

I love having the apps and tools I use daily in my life to look nice and clean and customized in a way that I personally like it, in a strange way it motivates me to be more productive. I understand that most people probably value function over form when it comes to the likes of productivity and PKM, but personally form is just as important for me. As an artist and designer, I value it a lot and translucency was one of those icings on the cake that made obsidian all the more worth seeping my teeth and time into.

Proposed solution

Just add it back the way it was before, sure it had its performance issues, but literally none of them bothered me. The only issue I ever ran into with translucency was the laggy window drag that most people are probably fond of, but this wasn’t an issue because most of the time I wouldn’t be dragging the app window all over the place and even when I did to put it on another monitor for example, it wasn’t a major bug that broke anything or got in the way of anything, it was just a slight lag that I was completely fine with dealing with.

Current workaround (optional)

I’m currently using the WindowTop app to make obsidian transparent, but it isn’t as good as the translucency obsidian once had, not only in terms of form but also in function, since it makes words, images, and iframes transparent too whereas obsidian’s translucency didn’t. Really annoying to deal with when I’m trying to take notes from an embedded youtube video in obsidian.

Per Joethei regarding the removal:

Unfortunately it seems that the recent Electron update completely broke our previous approach. They introduced a new API that only supports win11 22H2+ but we aren’t too sure how well that works.

Transparency on Windows was using a previously undocumented Win API, which also has a nasty bug that makes the app not respond well to being moved around the screen.

It can be done with a plugin now, previously it required some native code which is why it was included in core.

I found a way to reintroduce translucency by creating a simple plugin and tweaking the CSS of the theme I’m currently using with a CSS snippet. Unfortunately it only works with “Window frame style” set to “Native frame”, I believe that’s one of the main reasons why it was removed from Obsidian.

I’m thinking about creating an actual plugin for this so people can use it but the code is pretty simple, it works with Mica and Acrylic (which is more transparent):

import { Plugin } from 'obsidian';

export default class VibrancyPlugin extends Plugin {
  async onload() {
    const win = window.electronWindow
    win.setBackgroundMaterial('mica') // 'mica' or 'acrylic' if you prefer
  }
}

The CSS part is a little tricky because it depends on what parts of the UI you want to be translucent. The main class that has to be changed is

body {
  background: transparent !important;
}
...

My CSS file has 50+ lines and I’m still working on it, also it might not work with other themes other than Minimal and/or people might not want it to look the same as me so I won’t post it here but you can experiment however you like.

Mine looks like this with mica/acrylic:


4 Likes