# Custom CSS

**URL:** <https://community.anytype.io/t/custom-css/1716>\
**Category:** Implemented\
**Tags:** Design-or-UI, Font-Style, Multiplayer, Colors\
**Created:** [August 30, 2021, 10:10am UTC](https://community.anytype.io/t/custom-css/1716 "2021-08-30T10:10:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![qualquertipo](https://community.anytype.io/letter_avatar_proxy/v4/letter/q/ecae2f/32.png) [@qualquertipo](https://community.anytype.io/u/qualquertipo)\
**Post date:** [August 30, 2021, 10:10am UTC](https://community.anytype.io/t/custom-css/1716/1 "2021-08-30T10:10:53Z")

</div>

**Is your feature request related to a problem? Please describe.**

As pretty as Anytype looks, users might prefer different font/element sizes, margin/paddings, colors etc.

**Describe the solution you’d like**

Have a Custom CSS code Object/Block, which users can add to (overriding any style).

**Describe alternatives you’ve considered**

Ideally it should be possible to edit the CSS directly in Anytype, seeing changes in real-time.

If not possible, at least have a folder where user can place their .css files.

---

<div class="post-metadata">

**Author:** ![lynxlove](https://community.anytype.io/user_avatar/community.anytype.io/lynxlove/32/1139_2.png) [@lynxlove](https://community.anytype.io/u/lynxlove)\
**Post date:** [August 30, 2021, 10:35am UTC](https://community.anytype.io/t/custom-css/1716/2 "2021-08-30T10:35:29Z")

</div>

There are already seperate request for:

[[Font Styles](https://community.anytype.io/t/-/1091)]([Add options to change font size and style](https://community.anytype.io/t/-/1091))

[[Accent Color](https://community.anytype.io/t/-/1418)]([Accent color options](https://community.anytype.io/t/-/1418))

but a custom CSS option should be much more powerful for advanced users

---

<div class="post-metadata">

**Author:** ![natrius](https://community.anytype.io/letter_avatar_proxy/v4/letter/n/b3f665/32.png) [@natrius](https://community.anytype.io/u/natrius)\
**Post date:** [September 27, 2021, 3:29pm UTC](https://community.anytype.io/t/custom-css/1716/3 "2021-09-27T15:29:52Z")

</div>

[https://community.anytype.io/t/-/1091](https://community.anytype.io/t/-/1091)

This one together with the one lynxlove mentioned could all work via css as well. For regular users just have a nice UI to change font height and font style and in the background change the CSS. And the power user does have access to all the CSS settings.

---

<div class="post-metadata">

**Author:** ![palindroma](https://community.anytype.io/letter_avatar_proxy/v4/letter/p/898d66/32.png) [@palindroma](https://community.anytype.io/u/palindroma)\
**Post date:** [February 28, 2022, 9:10am UTC](https://community.anytype.io/t/custom-css/1716/4 "2022-02-28T09:10:42Z")

</div>

I second this - a very big advantage of ObsidianMD is the ability for users to make custom themes and CSS snippets that can also be exchanged. A custom CSS option would make it possible for CSS-proficient users to generate different styles and non-proficient users to apply styles provided by others.

---

<div class="post-metadata">

**Author:** ![dandeancook](https://community.anytype.io/user_avatar/community.anytype.io/dandeancook/32/8916_2.png) [@dandeancook](https://community.anytype.io/u/dandeancook)\
**Post date:** [June 16, 2023, 6:03pm UTC](https://community.anytype.io/t/custom-css/1716/5 "2023-06-16T18:03:52Z")

</div>

Custom CSS should be nice, for example, I want the top of page icon to align with the top of the first UI block on left panel (kinda remove the empty space above the page icon), but there’s no such settings.

---

<div class="post-metadata">

**Author:** ![jrowberg](https://community.anytype.io/user_avatar/community.anytype.io/jrowberg/32/9980_2.png) [@jrowberg](https://community.anytype.io/u/jrowberg)\
**Post date:** [July 20, 2023, 3:06pm UTC](https://community.anytype.io/t/custom-css/1716/6 "2023-07-20T15:06:50Z")

</div>

Agreed–as someone who currently uses Notion, experimented with Obsidian, and found Anytype (yesterday!) to be a wonderful mix between the two with additional great features, this level of customization was the other of two missing features that I’d love to see added for my own personal taste.

It’s impossible to build one single style that everybody prefers, and since the underlying app is already relying on CSS for layout and styling, giving users this ability seems like an uncomplicated way to allow a great deal of creative freedom.

---

<div class="post-metadata">

**Author:** ![Powerline](https://community.anytype.io/user_avatar/community.anytype.io/powerline/32/8763_2.png) [@Powerline](https://community.anytype.io/u/Powerline)\
**Post date:** [July 25, 2023, 6:05am UTC](https://community.anytype.io/t/custom-css/1716/7 "2023-07-25T06:05:55Z")

</div>

Plus 1! (Out of votes…) This would be great for when we can publish pages to multiplayer mode. We can make fully custom pages that match our branding for our Web3 App on Anytype.

---

<div class="post-metadata">

**Author:** ![Jabberwocky](https://community.anytype.io/letter_avatar_proxy/v4/letter/j/f1d935/32.png) [@Jabberwocky](https://community.anytype.io/u/Jabberwocky)\
**Post date:** [November 22, 2023, 5:57pm UTC](https://community.anytype.io/t/custom-css/1716/8 "2023-11-22T17:57:16Z")

</div>

Please please please

provide a custom css file so that you can define your own background and colors.  
That would be really fantastic and quick to implement.

A customization of the UI in the preferences is very desirable for later. For all those who can not or do not want to deal with CSS.

---

<div class="post-metadata">

**Author:** ![Razor](https://community.anytype.io/user_avatar/community.anytype.io/razor/32/28735_2.png) [@Razor](https://community.anytype.io/u/Razor)\
**Post date:** [November 22, 2023, 6:11pm UTC](https://community.anytype.io/t/custom-css/1716/9 "2023-11-22T18:11:31Z")

</div>

but you basically can do it by changing color scheme in [https://github.com/anyproto/anytype-ts/blob/main/src/scss/\_vars.scss](https://github.com/anyproto/anytype-ts/blob/main/src/scss/_vars.scss)

or by overriding anything you like the same way it’s done in dark theme [https://github.com/anyproto/anytype-ts/tree/main/src/scss/theme/dark](https://github.com/anyproto/anytype-ts/tree/main/src/scss/theme/dark)

---

<div class="post-metadata">

**Author:** ![Jabberwocky](https://community.anytype.io/letter_avatar_proxy/v4/letter/j/f1d935/32.png) [@Jabberwocky](https://community.anytype.io/u/Jabberwocky)\
**Post date:** [November 22, 2023, 6:29pm UTC](https://community.anytype.io/t/custom-css/1716/10 "2023-11-22T18:29:20Z")

</div>

Yes, thank you. I’ve already seen that. But I don’t want to go that deep. A simple custom.css that is outside the application would be enough for now.

There is hardly any danger of it being overwritten by the many updates.

This works wonderfully with Obsidian.

---

<div class="post-metadata">

**Author:** ![Razor](https://community.anytype.io/user_avatar/community.anytype.io/razor/32/28735_2.png) [@Razor](https://community.anytype.io/u/Razor)\
**Post date:** [November 22, 2023, 9:13pm UTC](https://community.anytype.io/t/custom-css/1716/11 "2023-11-22T21:13:37Z")

</div>

Outside means that it resides in a data folder, like a plugin?

---

<div class="post-metadata">

**Author:** ![Jabberwocky](https://community.anytype.io/letter_avatar_proxy/v4/letter/j/f1d935/32.png) [@Jabberwocky](https://community.anytype.io/u/Jabberwocky)\
**Post date:** [November 22, 2023, 10:25pm UTC](https://community.anytype.io/t/custom-css/1716/12 "2023-11-22T22:25:42Z")

</div>

It means as an example as solved in Obsidian.  
In the prefs. you can specify the path to a self-created CSS snippet. Even several if you want.  
The path and the snippet are not affected by any application update.

 ![Bildschirmfoto 2023-11-22 um 23.17.23](https://community-static.anytype.io/original/2X/9/90a658aab696dc329333c5cd775374dcf84ad2d3.png)

It is empty and unused by default.  
But if you can, you can easily create and use your own CSS files here.

---

<div class="post-metadata">

**Author:** ![Razor](https://community.anytype.io/user_avatar/community.anytype.io/razor/32/28735_2.png) [@Razor](https://community.anytype.io/u/Razor)\
**Post date:** [November 23, 2023, 2:14pm UTC](https://community.anytype.io/t/custom-css/1716/14 "2023-11-23T14:14:39Z")

</div>

I see, interesting

---

<div class="post-metadata">

**Author:** ![GuipeL](https://community.anytype.io/user_avatar/community.anytype.io/guipel/32/12296_2.png) [@GuipeL](https://community.anytype.io/u/GuipeL)\
**Post date:** [November 30, 2023, 9:44am UTC](https://community.anytype.io/t/custom-css/1716/15 "2023-11-30T09:44:54Z")

</div>

I definitely would LOVE to reduce left margins on sub blocks  
And horizontal margins on blocks that are inline….

With a custom css or with a simpler setting approach.

---

<div class="post-metadata">

**Author:** ![RichardZ](https://community.anytype.io/user_avatar/community.anytype.io/richardz/32/15329_2.png) [@RichardZ](https://community.anytype.io/u/RichardZ)\
**Post date:** [December 6, 2023, 1:17pm UTC](https://community.anytype.io/t/custom-css/1716/16 "2023-12-06T13:17:28Z")

</div>

It’s really good, especially for those none-English users.

The aesthetic feeling of characters in each country are quite different.

---

<div class="post-metadata">

**Author:** ![UBr](https://community.anytype.io/user_avatar/community.anytype.io/ubr/32/10792_2.png) [@UBr](https://community.anytype.io/u/UBr)\
**Post date:** [January 10, 2024, 10:59am UTC](https://community.anytype.io/t/custom-css/1716/17 "2024-01-10T10:59:50Z")

</div>

> [@Add options to change font size and style](https://community.anytype.io/t/add-options-to-change-font-size-and-style/1091/34):
>
> Actually, while I see occasional requests for font and color choices, I’m a huge fan of Anytype’s current restrictions here. Biggest reason: I’ve been using Evernote for 10 years and whenever you copy & paste some text into Evernote, either all the formatting is coming over into your note, or nothing. In contrast, thanks to Anytype’s restrictions, just the important formatting lands in my note: headlines, underline, bold, italics and very few others (same as e.g. with Apple Notes). This rigor al…

---

<div class="post-metadata">

**Author:** ![Razor](https://community.anytype.io/user_avatar/community.anytype.io/razor/32/28735_2.png) [@Razor](https://community.anytype.io/u/Razor)\
**Post date:** [January 10, 2024, 1:51pm UTC](https://community.anytype.io/t/custom-css/1716/18 "2024-01-10T13:51:22Z")

</div>

> <https://github.com/anyproto/anytype-ts/pull/477/files>
>
> \---
> 
> \- \[x\] I understand that contributing to this repository will require me t…o agree with the \[CLA\](https://github.com/anyproto/.github/blob/main/docs/CLA.md)
> 
> 
> 
> \---
> 
> \### Description
> 
> \<!-- 
> Please do not leave this blank 
> This PR \[adds/removes/fixes/replaces\] the \[feature/bug/etc\]. 
> \--\>
> 
> \### What type of PR is this? (check all applicable)
> 
> \- \[\] 🍕 Feature
> \- \[\] 🐛 Bug Fix
> \- \[\] 📝 Documentation Update
> \- \[\] 🎨 Style
> \- \[\] 🧑‍💻 Code Refactor
> \- \[\] 🔥 Performance Improvements
> \- \[\] ✅ Test
> \- \[\] 🤖 Build
> \- \[\] 🔁 CI
> 
> \### Related Tickets & Documents
> \<!-- 
> Please provide links to issues, community forum posts, or other sources
> \--\>
> 
> \### Mobile & Desktop Screenshots/Recordings
> 
> 
> 
> \### Added tests?
> 
> \- \[\] 👍 yes
> \- \[\] 🙅 no, because they aren't needed
> \- \[\] 🙋 no, because I need help
> 
> \### Added to documentation?
> 
> \- \[\] 📜 README.md
> \- \[\] 📓 \[tech-docs\](https://github.com/anyproto/tech-docs)
> \- \[\] 🙅 no documentation needed
> 
> \### \[optional\] Are there any post-deployment tasks we need to perform?
> 
> 
> \<!--
> For Work In Progress Pull Requests, please use the Draft PR feature,
> see https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests#draft-pull-requests for further details.
> \--\>

---

<div class="post-metadata">

**Author:** ![UBr](https://community.anytype.io/user_avatar/community.anytype.io/ubr/32/10792_2.png) [@UBr](https://community.anytype.io/u/UBr)\
**Post date:** [January 15, 2024, 10:30am UTC](https://community.anytype.io/t/custom-css/1716/19 "2024-01-15T10:30:11Z")

</div>

Thank you, @Razor!

So it seems this is underway now. Just wonderful…

❤

---

<div class="post-metadata">

**Author:** ![Shampra](https://community.anytype.io/user_avatar/community.anytype.io/shampra/32/8056_2.png) [@Shampra](https://community.anytype.io/u/Shampra)\
**Post date:** [January 15, 2024, 10:46am UTC](https://community.anytype.io/t/custom-css/1716/20 "2024-01-15T10:46:16Z")

</div>

Good news!

What’s planned for the 1st version?  
A global Custom CSS?  
Or a Custom CSS per object?

In my case, it’s often a page I need to customize, so that’s what I voted for.  
Having a built-in “Custom CSS” relationship to integrate my CSS into a page would solve so many problems! Even more so when web sharing comes along.

(But I wouldn’t mind a global version, it’ll probably be quite useful already).

---

<div class="post-metadata">

**Author:** ![Razor](https://community.anytype.io/user_avatar/community.anytype.io/razor/32/28735_2.png) [@Razor](https://community.anytype.io/u/Razor)\
**Post date:** [January 15, 2024, 11:37am UTC](https://community.anytype.io/t/custom-css/1716/21 "2024-01-15T11:37:01Z")

</div>

Only global for now, but Idea to customize a page is interesting, @y0ur1

[Next page](https://community.anytype.io/t/custom-css/1716.md?page=2)
