Theme: Reverie (Dark/Light)

Hey everyone,
I just made a new theme, would love to know your thoughts on it.

This Theme is now available oin Obsdian’s Community Themes in the settings, give it a try!

GitHub - santiyounger/Reverie-Obsidian-Theme: This is an Obsidian Theme with Dark Mode and Light Mode Functionality

Dark Mode

Light Mode

Theme Name:

Reverie

rev•er•ie rĕv′ə-rē

n.
A state of abstracted musing; daydreaming.
longer definition n. A state of mental abstraction in which more or less aimless fancy predominates over the reasoning faculty; dreamy meditation; fanciful musing.

Hope you like it, Would love to make it available on the community themes feel free to provide feedback/suggestions.

Thanks!

11 Likes

This is an awesome theme dude. Thanks.

1 Like

Happy you like it, means a lot!

This is a nice theme and I really like the way you implemented highlighted text in this theme.

However, when i copy naked embeds into the CSS, the bottom of the embeds leave a lot of spaces. Could you help guide me to the line to reduce this gap?

thank you, glad you like it!

Let me take a look at it. Currently, I’m not using naked embed so I didn’t keep this in mind, I’ll test it right now and see how to fix it.

just to make sure we are on the same page

There are two posts on how to achieve naked embed (there might be more)

Meta Post - Common CSS Hacks - #19 by MooddooM

"Naked" Embeds (CSS tweak)

Can you copy here the exact code you are using?
Thanks!

1 Like

this one:

/* Naked Embeds */
.markdown-embed-title { display: none; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0;}
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0;}

/*remove the following two line, you will get border and scroll*/
.markdown-preview-view .markdown-embed { border:none; padding:0; margin:0; }
.markdown-preview-view .markdown-embed-content { 
  max-height: unset;
  background-color: var(--background-secondary); /*define different bg color*/
}

/* the link on the top right corner*/
.markdown-embed-link {
color: var(--text-faint) !important;
}

.markdown-embed-link:hover {
color: var(--text-accent) !important;
}

got you, I know what you mean with the extra space, let me run a few tests

1 Like

Okay got it! so apparently there wasn’t anything in my theme interfering with naked embed.

What I did was delete all of the code of my theme from obsidian.css and just add the naked embed code to test.

Since the same was happening with the default theme, without any of my theme’s code, that means that it’s the naked embed code itself making that bottom margin.

I corrected it by changing the marging value in the 4rth line.

this line:

.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: -40px;}

All I did was make the marging bottom have -40px this gets rid of the big margin. (it was previously on 0)

so now it’s:

{ margin-bottom: -40px;}

You can of course change -40px to any other number to find the exact space you want, in case you want a bit more or a bit less space.


With that said if you copy this exact code at the end of my theme’s obsidian.css, that should work!

Let me know if it works alright!

/* Naked Embeds */
.markdown-embed-title { display: none; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0;}
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: -40px;}

/*remove the following two line, you will get border and scroll*/
.markdown-preview-view .markdown-embed { border:none; padding:0; margin:0; }
.markdown-preview-view .markdown-embed-content { 
  max-height: unset;
  background-color: var(--background-secondary); /*define different bg color*/
}

/* the link on the top right corner*/
.markdown-embed-link {
color: var(--text-faint) !important;
}

.markdown-embed-link:hover {
color: var(--text-accent) !important;
}
1 Like

This work! Thank you so much!

1 Like

My pleasure, happy to help!

Great theme! I’m quite a noob in markdown, css and obsidian. But I saw your publicly available notes in your website and you use this theme, but there, the links are displayed inside a nice circular shape, which is absent in your theme presented here. How do I replicate this?

I’m referring to this:

Thank you very much for this public good!

2 Likes

Hey @acvalerio happy you like it! and thanks for checking out my work, it means a lot!

This is where I got it from:

Meta Post - Common CSS Hacks - #64 by rsdimitrov

the original code is originally intended for tags, but I made some modifications to be able to do the same with links.


You are right, it’s not currently included in my public theme, because it’s still a work in progress code I want to make sure it works correctly before I make it public for others to use.

Also I want to make my public theme work for all types of skill levels, and if I put it there by default some might not be able to remove it.


If you’d like, I can make a video tutorial on how to add it, similar to this one I made:

Explaining the process and some of the things to keep in mind to activate this links style.

If you really want to set things up straight away, feel free to contact me directly contact and I can help you set it up!

1 Like

Thank you very much, I will take a look at the post!

1 Like

for me, highlighting makes the text of Headers 4, 5 & 6 unreadable, as the font color is virtually identical to the ”highlight” color when lines are highlighted in the edit window (I.e., the mouse is clicked while its pointer is on that line), and also when specific text in these headers is selected. so, changed the .css file (just copying the text-title colors from Headers 1, 2 & 3), but the changes made didn’t have any effect at all on the text when highlighted in the edit pane, or even when displayed normally in the edit and preview panes… didn’t make any change to text-highlight-bg, as other highlighted text reads just fine (and am not confident enough to experiment that much!)

otherwise, this is one of the nicer themes, and – despite the header highlighting – my daily-use theme…
blessings

1 Like

Great Video! :nerd_face:

1 Like

Hey @lwb52 thanks for your kind words, I really appreciate you using my theme and pointing out those visual issues with highlighting.

I don’t tend to make heavy use of headings 4, 5 and 6, but after trying to highlight them you are right. I appreciate the feedback.

There are two ways I could solve this, it would really depend on what would be better, and I’d like to hear your thoughts on it.


Option 1

  • Changing the text highlight color

is the easiest solution, I would play around with different tones to see what works nicely.

Option 2

  • Changing headings color to stand out from the text highlight color

option 2.1

changing only the colors of headings 4, 5 and 6

option 2.2

Making all the headings the same color as heading 2 (or a different color)


Would appreciate your thoughts on this, and thanks again for using Reverie, means a lot!

I tried option 2.1 – just copied the colors from 1-3: but, the resulting CSS didn’t (seem to) have any effect on the edit or preview panels. that’s very likely ’cause I don’t really know what I’m doing—just cut & paste (in BBEdit, as vsCode was way too picky in the color-code lines to use [spaces kept disappearing]).

option 2.2 seems too simplistic, and distracting from the final view; opt.2.0 seems more work than justified (too much tweaking)

if I correctly understood opt.1 (all simply /highighted/ in the same color), using a single color to contrast with the working highlight-block color seems simple, and without detracting from the final result, since the edit-highlight is only used briefly, while editing, and not at all used in the preview panel (I believe)

thanks again, and happy holidays

awesome, thanks for the awesome feedback @lwb52 after running a few tests, I do think changing the color of the highlight works best.

This is what it looks like now

If you download the theme again.

Settings > Apperance > Browse > Reverie (Click on “Use” again to redownload)

It should work!

Let me know what you think!

Big improvement, thanks!!
( just for my picky taste, the highlight could be a tad brighter, but the contrast really is superb :upside_down_face: )

1 Like

awesome glad you enjoy it! In the future I might try to play with different tones to make it look even cooler, thanks for the feedback