Theme: obsidian-andygruv

Share & showcase
#1

Hi, I extract some features I like from Comfort-Coda and gruvbox and turn it to this theme. It looks very similar to gruvbox but with andy mode v2. I modify a lot of details (driven by my OCD).

This is my first time to make a theme and learn ccs by doing this project. Any suggestion is welcome!

Main features:

  • Using the color scheme of gruvbox.
  • Andy_Matuschak mode with notes stacked unlimited along the horizontal direction.
  • Minimise the spare and useless space between notes.
  • Most of the vertical scrollbars are hidden.
  • Dark mode is the andy mode; light mode is the normal mode.

Know issues:

  • Currently, not working well with presentation mode.

Usage

  • Download and copy the obsidian.css file to the vault directory of your Obsidian note. It should take effect immediately.
  • Turn on ‘Custom CSS’ plugin in Obsidian: Settings > Plugins > Custom CSS.
  • Switch between dark and light mode: Settings > Appearance > Theme.
  • Open more than 3 notes at the same time, you will see the TRAIN.
  • Happy writing and have fun!

Screenshot

13 Likes
Meta Post - CSS Themes
Ayu + Ayu Mirage + Charcoal + Panic Room Themes
Meta Post - CSS Themes
#2

I have clean up codes with well-organised comments according to @Reggie 's template. It is a good practice to learn the meaning of every line.

The file is still too big (17k after removing comments). My plan is to learn more about CSS and increase the code efficiency in the future.

1 Like
#3

This theme has been updated for 0.7.1. Try both dark and light(dark) mode :shushing_face:

1 Like
#4

Thank you for updating this awesome theme! the dark mode andy’s theme doesn’t have a scroll feature

1886×320 28.4 KB
I heard v0.71 broke it.

#5

It has a scroll bar along x axis originally. I remove it.
When you open more than 3 notes, it starts to roll :upside_down_face:

#6

Oh, I didn’t realize that. Also, how can I fix this?

1886×742 65.6 KB

Update to the Dark mode

1896×1055 454 KB

#7

Very interesting. It never happened to me like this on my mac. What have you done? It would be great if you can give me some instruction to reproduce your problem. Then I can have a look see if it is an issue caused by the css.

#8

Using Window 10. A video of navigating via cloudapp https://cl.ly/5a351d186e45

I have not done much apart from navigating around the template to see how it looks. I hope the video helps.

#9

Nice screen :heart_eyes:
I wonder if your PC hardware has a way to scroll horizontally. Mac can readily do it by trackpad. if you want the scroll bar back. Open “obsidian.css” under your vault, go to the end of the file, remove the following part:

/*disable the scrollbar*/
.theme-dark .horizontal-main-container ::-webkit-scrollbar{
  display: none !important;
}
1 Like
#10

I removed the code you requested but I still can’t scroll horizontally also on the side it does not look like equal
CloudApp

1 Like
#11

Ya, I notice your padding is not correct.

I have no idea currently. I want to test it on a linux machine tomorrow. Sorry

#12

The backlink at the bottom left looks pretty cool! Would you mind sharing the code for that?

#13

The dev should hopefully release the new version once bugs are fixed.