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.
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.
I was about to make a new feature request but then found this thread, haha. Fancy seeing the solution I found already here. win.setBackgroundMaterial() was only merged on May 16 last year, so maybe the developers havenāt found it yet, or more likely that itās way down their list of priorities.
Apparently itās possible to make a frameless Mica/Acryllic window, but maximising it would cause the following issue. Another requirement of the function would be that the system is Windows 11 22H2+, so support for Windows 10 (which I am on) is still up in the air. Still, I think having Native frame be the only requirement for background transparency is a trade well worth doing.
For developers (main or plugin), please refer to this:
Sorry, but i still canāt figure it out. My understanding is that setBackgroundMaterial only works if transparency is set to true for the BrowserWindow, which we canāt change after the fact on the console or with scripts. Were you able to replicate this effect yourself?
