Experimental New Anytype Theme

Takashi · July 5, 2024, 2:06am

Hey everyone, I was messing around again with custom CSS in Anytype. This time I made a custom theme with a custom gradient background and gaps between each panel. What do you think?

Please let me know what you think below.
I’ll post the custom.css file when I’m confidant it’s bug free.

Hexara · July 6, 2024, 7:23pm

This is incredible! I love the floating panel style <3

Takashi · July 7, 2024, 6:46am

Thank you so much for the kind words! I look forward to sharing the custom CSS when I finish fixing just a few more bugs with different screen sizes.

Takashi · July 22, 2024, 5:37am

Release of this Anytype theme I’m choosing to call “Border”!

Below here is a link to the theme’s custom.css file. To install, simply copy the custom.css file to your Anytype working directory (accessed by going to “File > Show working directory” from within Anytype).

custom.css
To download the file, click on the link and hit the “Download RAW” button on the github page

Hexara · August 3, 2024, 1:46am

Thank you for sharing, I love it! But with the recent release, it’s a little bugged:

Takashi · August 3, 2024, 8:10am

Hmm i’ll have a look into that. The font thats used in the theme is called “SN Sans”. You will need to install that to your system. It can be found for free by searching the name of the font

Takashi · August 5, 2024, 9:43pm

Thank you for the feedback. I’ve made some changes to the theme file. The theme should be compatible with the new version of Anytype.

You can grab the latest version from here:

github.com

ThatTakashi/Border-Anytype-Theme/blob/main/custom.css

.navigationPanel {
    padding: 8px;
    background: rgb(55 55 55 / 70%);
}

#button-navigation-back, #button-navigation-forward, #button-navigation-plus, #button-navigation-graph, #button-navigation-search, #button-navigation-profile {
    border-radius: 8px;
}

.block.blockCover {
    border-radius: 16px;
}

.blocks .block .wrapContent.bgColor {
    border-radius: 8px;
}

.header .tabs .tab.active {
    border-radius: 10px;
    background-color: rgb(41, 41, 41);

This file has been truncated. show original

VisualNotes · August 19, 2024, 8:01am

I love the ability to add custom CSS in Anytype, but I have not done too much customization so far and have commented on it as much as I can because I’m skeptical about how future-proof the CSS id and class structure and naming is in Anytype.

Don’t you have any concerns? After all, every small code change in Anytype can also result in changes to the core CSS rules and thus have an impact on your own implementation and cause further work.

Takashi · August 19, 2024, 8:23am

A good point to bring up. I can see your concern with the longevity and stability of using custom CSS. At this point it really is just for tinkerers and people who have some knowledge. To be honest, there is absolutely nothing wrong with the default Anytype UI and in fact I’m quite fond of it. I just love to poke around when the opportunity arises.

I would love to see an obsidian like theme marketplace. This would provide an easy way for users to install and update themes from within the app. They already have a base for a feature like this in the form of the template library.

Again in it’s current state, themes are really a niche feature in Anytype and aren’t used or posted about much.

VisualNotes · August 19, 2024, 8:38am

You could say that since the option for custom CSS is an existing feature and not just a hack, Anytype has a certain responsibility to users to maintain some sort of consistency in the CSS structure.

Morgan1989 · August 19, 2024, 12:47pm

We don’t live in the same universe then as there is litteraly Dozens and Dozens of UI bugs or inconsistency.