Dark Mode For "Rename" pop-up

Feedback Archive
1

Like many others, I’m a huge fun of dark mode for everything in my computer. I don’t really stand looking at a white screen for too long. Specially at night.

There’s this little detail that would hopefully be simple to implement

When renaming a file, even if I’m using logseq in dark mode, the Rename box / pop-up is extremely white. Specially at night this causes a flash of brightness and I really wish it could be adapted for dark mode.

Screenshot

image
image880×310 18 KB

CSS workaround?

I’d love for this feature to be implemented into Logseq, but in the midtime I’d be happy to know if there’s a css workaround for this

Thanks a lot!

2

Hi, you can use this

.dark-theme .ui__modal-overlay div {
    background: #252525;
}

.dark-theme .ui__modal-panel {
    background: #1e1e1e;
}

.dark-theme #modal-headline {
    color: #d5d5d5;
}

.dark-theme .ui__modal-panel .form-input {
    color: #fff !important;
}

.dark-theme .ui__modal-panel button.inline-flex.justify-center.w-full.rounded-md.border.border-gray-300 {
    background: #222;
    border: none;
    box-shadow: none;
    color: #d5d5d5;
}

Opera Zrzut ekranu_2021-03-03_013734_logseq.com
Opera Zrzut ekranu_2021-03-03_013734_logseq.com1492×1308 48.4 KB

2 Likes
3

That’s amazing thanks a lot @Piotr that’s exactly what I needed! It looks great

Just out of curiosity do you know if there’s any reason why it wouldn’t work on the desktop app?

I got it working in the browser, but not in the desktop app after re-indexing and reloading several times.

I’m on Garuda Linux, however when I get a chance I can test it in the mac desktop app just to make sure.

Thanks a lot!

4

You’re welcome. There were changes recently made in the app html for this and some other elements. Desktop is behind web version so until next release this snippet will not work there. Try this one in the meantime (I didn’t test it)

.fixed.bottom-0.inset-x-0.px-4.pb-4 > div:first-child > div {
   background: rgba(0 0 0 / 70%);
}
.fixed.bottom-0.inset-x-0.px-4.pb-4 > div:last-child {
    filter: invert(.9);
}
5

Thanks for the awesome tip, I’m glad I asked, that version worked without issues on the desktop app.

If anyone else is interested this is what it looks like like with my Logseq Theme: Cobra

image
image882×340 10.8 KB

Thanks a lot for the help @Piotr

6