Dark theme for RemNote inspired by Solarized Dark theme - Updated

Plugins and Custom CSS CSS
#1

Updated to second version: The link given under the heading “first version” has been updated. Some subtle styling changes were made. Some elements which were missed in the first release has also been included in this new version

First version: Here is the link for a Dark theme for RemNote inspired by Solarized Dark theme. It’s made in RemNote itself. You just have to import this into the your knowledge base and it will get applied automatically. It may take some time to load since it is a large document. Once the theme is applied, I haven’t experienced any lags. The code can be seen in the Custom CSS page.

Don’t try to open the entire descendants of the rem named “Code” in this document all together at a time in case you want to see the code used. If you expand all descendants together, this can cause lag while viewing that document since it is very large in size. Expand the parent rems first and depending on the need, expand the relevant child rems. Once you are familiar with the code, you can use hierarchical search to open the relevant rem easily.

You can also change the colours to your own liking. I have listed the colours used in the theme within the document itself. Also each CSS element is grouped hierarchically so that you easily search and find the element to be tweaked.

Once I get enough time to work, I can clean up the code and reduce the size of the document.

image
image1666×1640 394 KB

image
image1666×1640 184 KB

image
image1776×1504 253 KB

image
image2330×1590 180 KB

image
image2330×1590 267 KB

19 Likes
Working on my first theme, dark purples/maroon and red and light blues. Work in progress
Print screened pictures when pasted are distorted in dark mode
#2

I was waiting for this since so long! Thanks a million arunnbabu81 for uploading this amazing Solarized Dark theme!

1 Like
#8

Thanks for sharing, it looks brilliant!

1 Like
#9

Hello,
just thought to drop a message on how lovely this theme is! :star_struck: It does take a bit to load, but it’s all good now, so no worries. Thank you all for putting this together! :pray:

1 Like
#10

Thanks for the feedback. Its made entirely within remnote itself. Also I have made each element into a seperate code block so that I can learn and make corrections easily if needed (because I am not a programmer). So the document has become very large in size with more than 1000 rems I guess. That’s why it takes time to load. Once loaded it won’t affect the functioning of your knowledge base. Anyone can change the styling if they want to since everything is arranged in a hierarchical fashion.

2 Likes
#11

hi, even I have tried this but it isn’t working for me and when I highlight the text then only the theme shows up.

Capture
Capture1918×1044 77.5 KB

#12

It may take some time initially for the entire document to get saved to your database. Wait till the entire theme document to get saved. Theme usually gets applied gradually only over a period of few minutes provided your internet access is adequate.

Let me know if this persist even after doing like that?

Also I have added codes for new multi windows and portal sorting by dates and many other changes. I am waiting for the mac update of remnote to roll out to release the update.

#13

Thank you for this. RemNote’s native dark mode is not easy on the eye. Haha

2 Likes
#14

Hey @arunnbabu81
The theme works like a charm and its pleasing to the eyes. Thank you for sharing. The only thing that I found a bit odd is that the “document” button in the sidebar does not have a matching font color to the background. I know I am nutpicking here but I figured it wouldn’t take much time to fix it so just reporting it here. And one more thing, when I imported the document, all the rems were expanded so it froze the app right then and there and I still cannot open that document from my knowledge base without it breaking the app. Is there something you could do to keep the rems closed for everyone opening the doc link ?

#15

I am aware of the bug regarding the colour of document button in the sidebar. I have already listed it in the known bugs category (you can see the “known bugs” listed within the theme document itself). Since I don’t have any coding background, I couldn’t find any solution for it yet. It might be due to conflict with some other code I have used in this theme. Hope to find a solution for it soon.

The app becomes slow while importing the theme since its a very large document. When I am sharing the theme, I have to expand all the rems so that all rems gets shared. Rems which are not expanded don’t get shared I guess. So there is no way to avoid the app becoming slow while you import the document. Best practice to follow here will be to click the “import to my knowledge base” and wait for may be 2 or 3 minutes (might have to wait longer depending on your net connectivity). Once imported into your knowledge base, the theme gets automatically applied, which you can identify by the colour change. Wait till the theme is applied fully. Only after that do any work in remnote. Once fully imported, their won’t be any lag or sluggishness. I hope once the sharing and collaboration feature in remnote gets updated, and once the software gets optimised to deal with very large document like this, the slow loading get corrected.

I will release a new update today or tomorrow with some experimental feature. Hope you all like it.

#16

I had to unshare the link given here for releasing an update. But after unsharing, I found some bugs in the new updated version. It may take a few days for me to correct it and re-share the link again since I am little busy with my job these days. Sorry for the trouble.

1 Like
#17

Here is the link for the second update. Expect this to take some time to load in your remnote as I have added more customization in this update. It might take even unto 10 minutes or more to load the theme fully. So be patient while you import this document into your remnote.

I have enabled some experimental things by default. In case you don’t like them, you can easily disable it by ticking on the checkbox at experimental features as shown in the picture below. If you are disabling all the experimental features together, make sure to re-enable 5 rems in the 3 portals as shown in the picture by unticking the checkboxes. Disable them when you re-enable the experimental features. Also you can try out other experimental features separately or as a group following the instruction given along with each CSS snippet.

image
image2292×1344 357 KB

For using on safari, you might need to change a value in the rem titled Tree Node - rem focussed- adapted from Eustachio light theme. Change the margin-left to 25.5 as shown in this pic.

image
image1348×400 42.1 KB

Edit (02/06/2021):

Small Update for compatibility with 1.3.12

  1. Search for Sorting portal results using bullet hover or Cmd+P.
  2. Under Sorting portal results parent rem, add a new child rem called Division between portals contents and add this code

#hierarchy-editor .rem-container__top-level-rem-in-portal-border .rem-container__top-level-rem-in-portal-border__inner {
border-top: thin solid #033e4e;
border-width: thin;
bottom: 15px;
position: relative;
}

  1. Also open the child rem titled Date headers for sort by date under the same parent rem Sorting portal results and delete the part text-decoration: underline;
  • The code should look like as shown in the image below

image
image1360×1206 111 KB

  • Once you make these changes, the portals will change from as like in the image 2 to be like as in image 3

image
image2748×1350 348 KB

image
image2764×1344 349 KB

2 Likes
#18

hi arunnbabu81,
thanks for updating the document and fixing the bugs in the custom CSS you wrote, and now the whole theme loads without any lags, and the new updates for customization are also a great addition to your document. even though I don’t know whether your bug fixes fixed my problem of the theme not loading up, it is great to see it working. keep up the great work pal.

#19

Happy to see that it’s working for you now. Were you using the “windowed panes” feature when you had tried to import this CSS initially. If yes, that might have been the cause for theme not getting applied. I hadn’t updated the theme for working with windowed pane when it was was released. Only in the current update code for windowed panes were added.

If you like dark themes, you might like this yet to be released dark theme by Eustachio. He might release it this week.

1 Like
#20

I have edited this post to add a small update for compatibility with remnote 1.3.12 which was released yesterday

#22

Add this code to the theme document, the bug in the document button should get resolved

#homepage #content #document-sidebar a:hover, #homepage #content #document-sidebar a:visited, #main #content #document-sidebar a:hover, #main #content #document-sidebar a:visited {
color: #2aa198!important;
}
#document-sidebar__document-buttons:hover:not(.document-sidebar__linkOpen) {
background-color: #002b36;
}

1 Like
Request for new UI
#23

Where can i get CSS codes for this theme?

#24

Check this post…import remnote shared document given in that post into your knowledge base…theme gets applied automatically although it may take some time to load it fully. Wait for sometime so that the theme gets applied fully before doing any further work in remnote.

3 Likes