New RemNote Dark Theme by eustachio

Code Blocks

see Hannes’ answer:

Branches

I don’t have the parent branches either and branches aren’t visible if I focus on a rem that is a multi-line card item or the rem has a multi-line card item as a parent. See the pictures below:

I can do some testing/debugging if you can’t reproduce the issue.
Just for information:

  • I’m using v1.2 of your great theme
  • I’m using Microsoft Edge (Chromium)
  • RemNote v1.3.17 beta
2 Likes

thank you very much for your answers

blocks: I’ve tested it, I have the same result without your theme, sorry for this confusion from my part :sweat_smile:
branch: I’ve reinstalled your theme, and disabled other CSS. I really don’t understand why I’m not seeing the parents ‘branch’… any idea on how to track the problem?

widemode:
So, I’ve installed the fix:


the result is the same :confused:
image

You are very kind to help us with these issues, thank you :slight_smile:

Hi @Henrik
Thanks for sharing the article about the code blocks, I didn’t know about that. Cheers!
Thanks for your help, yes I will appreciate some help :grin:.
I will investigate the branches in more details, maybe I will move them to another level, I know that I made them not to show within multi-card items as I thought that could have been confusing but maybe it is more confusing if they don’t appear :thinking: , I will do some testing next week and I will let you know. Cheers!

2 Likes

Hi @_yb
It is okay, you’re welcome!
CodeBlocks: No problem.
Branches: I will investigate the branches system in more details next week, I will let you know.
Full Width mode: Can you please try this new code in 1 Body:
Replace this code:

/*----- this makes the 3 dots visible when in multiple window mode -----*/
#multiple-windows .multiple-windows__document .document--narrow {
    padding-left: 42px;
    margin-top: -10px;
    padding-right: 25px;
}
#document {
    width: calc(100% - 65px);
}
/*----------------------------------------------*/

with this new code:

/*----- this makes the 3 dots visible when in multiple window and full width mode -----*/
#multiple-windows .multiple-windows__document .document--narrow {
    padding-left: 42px!important;
}
#multiple-windows .multiple-windows__document {
    padding-right: 42px!important;
}
.document--full-width {
    margin-left: 42px!important;
}
.pane {
	padding-right: 42px!important;
}
/*----------------------------------------------*/

I hope it works this time.
Cheers,
Eustachio

Thanks :smiley:

it does move the whole thing to the right a bit, the “…” is indeed now visible, I’m super happy with that :slight_smile:

This has created another problem to the right of the window(s). This happens in wide mode, both in multi windows and single windows. Text is cut out, the power up and tags also as you can see on the picture.

If you have a solution for the branches don’t hesitate also to reach out to me :slight_smile: Also thank you so much for your work, it is really really appreciated.

Hi @_yb,
.pane was supposed to fix that and for some reason is not happening. I will check that again soon, sorry about that. Thanks for letting me know. Quick question, what operating system are you using?

Thanks for your answer,
I’m using Edge on Windows 10

1 Like

@Eustachio,

Thank you for sharing your theme’s CSS; it makes using RemNote more enjoyable.

2 Likes

Hi @_yb , I think I have found why the code I posted wasn’t fully working, I think it is because you might have the lab feature Windows Pane activated. If that is the case, can you please try this new code:
Again, in the 1 Body block, replace this code:

/*----- this makes the 3 dots visible when in multiple window mode -----*/
#multiple-windows .multiple-windows__document .document--narrow {
    padding-left: 42px;
    margin-top: -10px;
    padding-right: 25px;
}
#document {
    width: calc(100% - 65px);
}
/*----------------------------------------------*/

with this new code:

/*----- this makes the 3 dots visible when in multiple window, full width and windows pane modes -----*/
#multiple-windows .multiple-windows__document .document--narrow {
    padding-left: 42px!important;
}
#multiple-windows .multiple-windows__document {
    padding-right: 42px!important;
}
.document--full-width {
    padding-left: 27px!important;
}
.pane {
	padding-right: 42px!important;
}
.mosaic-window-body {
    padding-right: 42px!important;
}
.tile__document {
	padding-right: 42px!important;
}
/*----------------------------------------------*/

I hope this time works :nerd_face:

Cheers,
Eustachio

you are an actual wizard, aren’t you? :+1:

This works perfectly! Thank you so much, see below

I’m perfectly happy with your implementation because I use full width mode, however people using multipanel + “constrained width” will still have the same behaviour as before, but only when the width of the browser window is < than the constrained width; I hope you understand what I mean. Not really a problem I think, but I thought I might let you know about it :slight_smile:

thank you so much :slight_smile:

@_yb I am happy to hear that it works, thanks for pointing that out.
This is the final code for everyone to use it. I will include this code in the next update too.
It should work in every scenario:
Windows Pane ON and OFF
Full Width ON and OFF

In the 1 Body block, replace this code:

/*----- this makes the 3 dots visible when in multiple window mode -----*/
#multiple-windows .multiple-windows__document .document--narrow {
    padding-left: 42px;
    margin-top: -10px;
    padding-right: 25px;
}
#document {
    width: calc(100% - 65px);
}
/*----------------------------------------------*/

with this new code:

/*----- this makes the 3 dots visible when in multiple windows, 
default and full width modes and when windows pane lab feauture is ON and OFF -----*/
#multiple-windows .multiple-windows__document .document--narrow {
    padding-left: 42px!important;
}
#multiple-windows .multiple-windows__document {
    padding-right: 42px!important;
}
.document--full-width {
    padding-left: 27px!important;
}
.pane {
	padding-right: 42px!important;
}
.mosaic-window-body {
    padding-right: 42px!important;
}
.tile__document {
	padding-right: 42px!important;
}
.mosaic-window-body .document--narrow {
	padding-left: 42px!important;
}
/*----------------------------------------------*/

here some gifs
Windows Pane ON - Full Width OFF

Windows Pane ON - Full Width ON

Cheers,
Eustachio

2 Likes

thank you! its works wonderfully :slight_smile:

one last thing, could you point me to which chunk of the css is responsible for the branches? I will also try to play with your code and try to understand why it is limited to the active rem, and not its parents and grandparents

image

cheers !

Yes, I was actually investigating the branches yesterday, can you please tell me if the branches work on hover like in the gif below:

Cheers

Would love to see that code as well or just to see as its won snippet

Reminds me of the one that Roam has
It is great

1 Like

Hello Eustachio!

This is what happens for me (all other CSS being off):
eustachio2

@ftfk Thank you! That gif is very helpful. I will come up with some code for you guys @Badjer to try soon.

1 Like

Hello Eustachio. First of all let me congratulate you for your wonderful theme.

I’m here to ask you if it’s possible in a future update to create a css block checkbox which serves like a toggle between your dark theme, and a normal White Theme. Or in other words, a toggle checkbox to disable the dark theme.

This is because besides I’m using Desktop RemNote version, I usually go to RemNote website version to make a full document screen, using the GoFullPage Chrome extension, in order to print some of my remnote pages. And It would be painful to change my black toner every hour xD

It would be very helpfull to have this toggle to make the bodypage white in order to print it.

(I’m completely noob in CSS)

Hope you can help me with this.

Thanks

2 Likes

Is there a way that we can fund you for doing all these works? I am more than happy to contribute and thus appreciate your hard works for the RemNote community. I am pretty that I am not the only one thinking of it.

2 Likes

Hello!

From my limited understanding of how Remnote deals with CSS, this is already possible!

The checkboxes, when ticked, deactivate the corresponding CSS codes, for all children. That means you could simply have the two entire eustachio themes (dark and light) in your css custom and toggle between the two at will.
Here the light theme is off and the dark theme is on:

1 Like

Hi @JRY thank you very much, I appreciate your kindly words.
I do like and enjoy doing this for the community, I started the light and dark themes for my own use as I wanted to do some changes to the UI since RemNote thankfully allows us to do that through custom CSS. I am very happy with the feedback I have received from you and all, thank you very much. I am more than happy to keep the themes up to date, fix bugs, also helping other (within my scope) with their own suggestions or needs.

I haven’t thought about getting any funds from this, but I will consider adding a Paypal link in the next update v.1.3 of the dark theme for anyone who would like to contribute.

Cheers!
Eustachio

1 Like