Clair de Lune Theme [Dark only] (v1.5.0)

Share & showcase
1

Hi all, I’m pleased to share the theme I’ve been working on over the last few weekends, inspired heavily by the Moonlight VSCode and GitHub themes!

image
image2559×1440 778 KB

I’ll be maintaining this on GitHub so check it out there for installation instructions and the CSS files and to follow along with the development.

Feedback and bug reports very welcome (either here or on GitHub)!

Features

Edit: This theme was originally called ‘Moonlight’, but it was brought to my attention that there was already a theme with this name. So it’s been renamed to ‘Clair de Lune’.

18 Likes
2

I’ve just released an update for this theme including a bunch of bugfixes along with support for some Mermaid diagrams (flowchart, sequence, gantt, class).

Check it out at Clair de Lune v1.1 :tada:

3

I’m using your theme as my current drive of Obsidian. I like it very much and I want to thank you for your work. I made some modifications myself: added a Monospace font that can render better tables and changed dimension of H1, H2… etc. plus I added bullet relationship in preview mode as I found it in this forum.

I’m not an expert in CSS at all. I just experiment. I have to use WinMerge app to see the differences and to update my Clair de Lune Theme.

I don’t know how to compile .scss files in order to update only stuffs I need and keep mine as it is already. Can you help me, by pointing me to a tutorial?
Thanks again for your work!

4

Hey @mafsi, I’m glad you like the theme!

As for adding in modifications, I see you’ve forked the repository on GitHub!

To compile the theme:

  1. You need npm and NodeJS installed on your machine.
  2. Open a command prompt in the theme directory and run npm install.
  3. Once this is complete, run npm build to build the obsidian.css files.

For your modifications, I’d suggest the following workflow:

  1. Add a new scss file in the src directory and import it into src/index.scss like the other imports at the bottom of the file.
  2. Add all your modifications in this new scss file you’ve created.

These modifications should then be included in the compile the next time you run it. It also allows you to fetch upstream updates when they happen without dealing with merge conflicts. (I’m unsure how familiar you are with Git, but GitHub has some good documentation on working with a fork).

Feel free to DM me if you want more details or need help :smile:

1 Like
5

I’ve released a new version of this theme which includes support for:

in addition to a bunch of bug fixes and style tweaks!

This theme should also now be available in the ‘Community Themes’ section! :tada:

Full release notes:

1 Like
6

Another release for you today! Some highlights:

Along with bugfixes and updates for the latest version of Obsidian!

Full release notes can be found on GitHub! :tada:

1 Like
7

it was wonderful theme I ever use :smile: !
Thanks for your work!

1 Like
8

Thanks @moonbi, glad you are enjoying it! :grinning_face_with_smiling_eyes:

9

The last release of 2020 for you today! Its a small one, but notably it contains styling for the new query blocks!

Full release notes can be found on GitHub!

10

Hey all,

I’ve just released v1.5.0 of the theme! This contains some new features along with a set of tweaks and bugfixes.

Checkout the full release notes on GitHub.

11

Hey @jamiebrynes7 , a continuinung-and-learning beginner here, when you say you made the theme compatible with Andy, what does that mean? In other words, cant the Andy plugin be activated on any theme? What has to be changed in a theme to make it work with Andy?

12

@WahWah back when this theme was first released, Andy mode was some custom CSS rather than a plugin (official plugins weren’t a thing at that time). As such this theme offered a version with that CSS bundled in by default.

Now that Andy mode (sliding panes) is a plugin, this theme doesn’t need to do that… so its basically just a relic of the past :sweat_smile:

1 Like