New RemNote Dark Theme by eustachio

[Gabriela.AD]

That does fix the issue. Usually, dark mode themes would break when that’s turned on, so theme creators usually say to leave that off. I assumed that’d be the case here as well, my bad.

---

Have I mentioned how beautiful the colours for the Links, Todos and Blue & Purple Highlights are?
Didn’t expect for it to go from a Light to a Dark theme but you won’t hear any complaints from me.

---

Reports:
Extra space around email. Colour and spacing fixed on click:

There may some other paragraphs that shift around or hover or click (can’t remember), similar to the email behaviour. Will post them when I reencounter them, noticed them when I copied your code.

Also,
Image Occlusions are flickering unless the cursor is clicked into the Rem that holds them:

---

Feedback:
I can tinker with the following myself, but just pointing out:
I love the subtlety (size, round corners, colour), but I’d bump up the colour of the Hierarchical Editor drag-able scrollbar bit.
The Sidebar one is visible enough against the slightly darker Sidebar background but the monitor angles & size, and large documents (=> smaller drag-bit) do make the Hierarchical Editor one invisible at times. It does brighten up when hovered on, but finding it is a bit difficult. Could be my screen calibration, set-up and glasses interfering as well tho.

The blue line is from my monitor, ignore that. The drag bit is positioned lower than the middle of the image.

Also,
The Help Menu hover highlight is White while the Sidebar hover highlight is Grey/Blue (depending on the monitor & angle I look at). Is that intended? Both versions look good, is a question of adherence to consistency.

[Eustachio]

Hi Gabriela, no worries at all
Regarding the colours, you didn’t mention that before, I am very happy that you like the colours in fact I played a lot with this until I found colours that I thought looked pretty, so this is a very nice feedback. Thank you!!!

Reports:
Extra space around my email when you paste the code, I noticed on your screenshot that the text of my email is white and when you click on it and it is in focus it changes to the bluish colour, it should be bluish all the time. This is a quote element, can you please check if this happens with other quotes. I will have a look at this.

Image Occlusion, I am working on a new code block to cover this RemNote feature, it is something I haven’t used yet, I will cover/fix this soon.

Scrollbar, I have been fixing some small bugs that @Renzo_A Renzo reported earlier today. I have changed the scrollbar to a much simpler, wider and more visible version. I also find the current (very thin) scrollbar difficult to see, click and drag

The help menu hover is an inconsistency, it’s meant to be all dark, I will fix this.

I have always been a light theme person, but by creating this dark theme I have found that it is (IMO) more comfortable.

Thank you Gabriela for reporting this. Again, I really appreciate your feedback, it helps my debugging better!!!

I will be trying this theme on MacOS and Linux soon too.

I also got an update on RemNote for Windows today, so I am looking for changes if there are any. I am having some issues with checkboxes, I can’t check or uncheck them, I deactivated the theme and the app still has the issue.

Cheers,
Eustachio

[hannesfrank]

@Eustachio

I also got an update on RemNote for Windows today, so I am looking for changes if there are any. I am having some issues with checkboxes, I can’t check or uncheck them, I deactivated the theme and the app still has the issue.

Cannot "tick" a to-do item with mouse

You can use this Custom CSS to make them clickable until we deploy a fix: .rem-checkbox + div { margin-left: 16px; }

[Eustachio]

Hi hannesfrank,
It’s okay, thanks for sending this.

I will try the fix, I am using ctrl + enter at the moment, I’m sure it will be fixed soon.

Cheers,
Eustachio

[Eustachio]

**Currently trying the dark theme on MacOS Big Sur **

** Currently fixing some bugs **

** Quick reminder to turn on the Dark Mode in the settings **

[Remember]

So far, I love the theme! Great job @Eustachio!

Is there a way to change the background/border of the windowed panes to be a dark color to match this theme? I looked at the Windowed Panes in Depth post by @hannesfrank and tried to modify some of the CSS that he posted (along with some of the CSS that @ognsya posted in that thread) to change the color, but was unsuccessful.

Does anyone know how to do this? Is this impossible to do with the mosaic based panes? I know nothing about CSS, so any help is appreciated .

Below is a picture of what I had tried so far. I tried to change the colors/background-colors, but it didn’t seem to change anything. Also, I tried to change the “.mosaic.mosaic-blueprint-theme” in the “Panes” block that I made to “.mosaic.mosaic-blueprint-theme.bp3-dark” to match the dark theme on the demo mosaic website here, but that also didn’t work.

[Eustachio]

Hi @Remember
Thanks for your feedback, I’m glad you like the dark theme .
I will have a look at what you would like to do and find a solution for you. Please, bear with me on this.

Cheers,
Eustachio

[Henrik]

Hi @Remember,

here is my solution to the problem:

.mosaic-window-body {
	background: var(--body-background-color)!important;
}

.mosaic {
	background: var(--blackout-background-color)!important
}

.mosaic-window-toolbar.draggable,
.mosaic-preview .mosaic-window-toolbar, .mosaic-window .mosaic-window-toolbar {
	background-color: var(--body-background-color)!important;
}

.mosaic.mosaic-blueprint-theme .mosaic-preview .mosaic-window-toolbar.draggable:hover, .mosaic.mosaic-blueprint-theme .mosaic-window .mosaic-window-toolbar.draggable:hover
{
	background: var(--selected-background-color)!important;
}

.mosaic-default-control {
  color: var(--button-color)!important;
  background: none;
  border: none;
  cursor: pointer;
}

[Eustachio]

Brilliant!
I have researched about this feature Windowed Panes in Depth, I didn’t know about it . Thank you very much for the fix, I will include your code in the next update.
Cheers
Eustachio

[Eustachio]

• Version 1.1 - Released date: 10 June 2021
  • More visible scrollbars
  • No Quote text jumps
  • Help menu hover now matches the dark theme
  • Highlight text color margin/padding improvements
  • Show proper card types on bottom bar
  • No white background on bottom bar
  • No white top border on narrowed bottom bar
  • New Windowed panes code block - Thanks to Henrik. This fixes the white body background when this lab feature Windowed Panes is ON.
• Tested on MacOS (Big Sur) and Fedora 34 apps.
• Thanks you all for reporting bugs.

[awreccan]

This is so good!!!

One bug - My documents screen suddenly got a lot of Top Level “Todo” docs - can you please fix this?

[Eustachio]

Hi @awreccan, can you please share a screenshot pointing out that for me? This will help me to understand the issue.
Cheers,
Eustachio

[Eustachio]

I think I have found the issue, the markdown to be copied from GitHub was broken, sorry about this. There is a new update v.1.11 of the dark theme available which fixes this.

[JRY]

@Eustachio Thanks for all of your hard work. Contributing to you, RemNote is both functional and aesthetically pleasing now.

[Eustachio]

Thank you, I’m glad you like the theme and that it’s useful to you. RemNote is great!

[itsamy]

Hi, loved your light theme and now your dark theme! Makes RemNote much more appealing to use for sure. Thank you for making it!

One thing I noticed is that in the windowed panes, when viewing uploaded pdfs, the background is still white rather than dark (as in the original RemNote dark mode). I’m on macOS Big Sur using the desktop app. Is there a way to fix this?

[Eustachio]

Hi @itsamy you are welcome, thanks a lot for your feedback.
Yes, Pdf’s can be dark, this is actually on my list to include this option and image occlusion to be dark. I particularly prefer my pdf’s and images to keep their original colors , so I will make them optional.
Cheers,
Eustachio

[marcothesis]

@Eustachio, love your dark mode and especially the hover states of many elements. It’s a class above what is currently available.

I wonder if you have come across this bug in your mac desktop test with Big Sur? I get this black layover type block over the headers of the bottom portals. I deactivate all other CSS except for this so I don’t think that is an issue.

[Eustachio]

Hi @marcothesis thank you very much for your feedback and for reporting this issue.
I haven’t come across with that issue on MacOS, I will check this and let you know a fix.
Cheers,
Eustachio

[itsamy]

@Eustachio I know I sometimes prefer the original colours as well, so making the background optionally dark sounds like a great idea.