How to make titlebar looks like native windows

Help
,
1

Hi,
Did anyone know how to change this titlebar button in obsidian like this:
image
to something like this (Github Desktop):

image
image1487×65 3.13 KB

or like this (VSCode):
image
image1342×55 6.13 KB

I don’t know how to make that button look bigger in CSS, I use Windows and I think is weird because obsidian not have UI consistency for Windows, especially the button of titlebar (It looks fine though in OSX)

Any ideas?

2

This is what I did

.titlebar {
  height: 32px !important;
}

html, body{
  padding-top: 16px !important;
}

.titlebar-button {
  opacity: 1;
    padding: 5px 20px;
  }
1 Like
3

Hi,

Here is my solution, it is also able to check for updates and change the frame on installation.

best regards

4

Hi @TheEmperor, this would be great, I am new to Obsidian.md, where do you make this change, which file/folder?

5

Unfortunately this implementation I posted a year ago breaks the titlebar on mobile. I’ve recently updated it on my own theme to not cause issues if my theme is used on mobile. My theme, CyberGlow, is the only one i know of that at this point in time changes the height of the titlebar, i’ve been trying to make it fit the Windows10/11 look to fit in better with the other apps…

you need to go into your vault → .obsidian folder → themes and create a new .CSS file if there isn’t one there. Alternatively you can start by using a theme you like using.
You can find community themes via Obsidian settings.

6