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!

https://github.com/santiyounger/Reverie-Obsidian-Theme

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!

8 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

"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

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 https://santiyounger.com/contact and I can help you set it up!

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

1 Like