Custom CSS Guide
Original shared by LavaC on our community forum:
If you need any help regarding this CSS guide or just CSS in general, you can just comment in the original topic linked above.
Where
To use custom CSS, you first need to enter the work directory of Anytype.
![](https://doc.anytype.io/~gitbook/image?url=https%3A%2F%2Fcommunity-static.anytype.io%2Foriginal%2F2X%2Fc%2Fcefa762c4537031b75bc43f2bc387e35fe36911b.jpeg&width=768&dpr=4&quality=100&sign=e806c6bb&sv=1)
Then create a file called custom.css here.
![](https://doc.anytype.io/~gitbook/image?url=https%3A%2F%2Fcommunity-static.anytype.io%2Foptimized%2F2X%2Fc%2Fcbe263ff498e9700dca9f07e4c730f667042b556_2_690x401.jpeg&width=768&dpr=4&quality=100&sign=4b7f7a70&sv=1)
How
In order to take into beginners, many methods in this article are not best practices. If you understand CSS, you can likely skip most of the contents.
Theme color
When developing software, styles variables are usually set first as a baseline. Anytype is the same. If you want to change to your own style, generally start from here.
These variables are usually under the :root
selector, we can see these in Dev tools.
![](https://doc.anytype.io/~gitbook/image?url=https%3A%2F%2Fcommunity-static.anytype.io%2Foptimized%2F2X%2F8%2F8c798a22e6bddd7bd190043a2ec7c226fcf5cf24_2_690x408.png&width=768&dpr=4&quality=100&sign=a380392c&sv=1)
For example, --color-text-primary
seems to be the color variable for the darkest black text, so we can write it this way in the custom.css file:
![](https://doc.anytype.io/~gitbook/image?url=https%3A%2F%2Fcommunity-static.anytype.io%2Foriginal%2F2X%2Fb%2Fbbefbe5a417032384cde12b1e80e4b2f480ded68.png&width=768&dpr=4&quality=100&sign=23730983&sv=1)
After saving, you can refresh Anytype by pressing (Command/Ctrl) + r
.
Of course, you can also directly modify and view the effects in Dev tools.
At this point, we can see that the red I just wrote overrode the default value, so my text has all turned red.
![](https://doc.anytype.io/~gitbook/image?url=https%3A%2F%2Fcommunity-static.anytype.io%2Foptimized%2F2X%2F0%2F0e16feda708cfeee241bc7128caa3f802a09c66d_2_690x384.png&width=768&dpr=4&quality=100&sign=57429232&sv=1)
Below is part of the custom.css I modified referring to Solarized 18, which is actually like a word filling game, change these variables more to see where they take effect, and then you’ll know what to modify next.
![](https://doc.anytype.io/~gitbook/image?url=https%3A%2F%2Fcommunity-static.anytype.io%2Foptimized%2F2X%2F0%2F0a67ca485d41ba2d1e72dd5b30b5cae7f489f82e_2_690x394.jpeg&width=768&dpr=4&quality=100&sign=2540d8e3&sv=1)
Fonts
The attribute related to fonts in CSS is called font-family 3. In order to ensure that all text applies the same font, we generally put the styles on the body
tag.
Of course, the premise for it to take effect is that you have this font on your computer, if not, you can install this font on your computer or choose to import the font online.
Dark Mode
The styles in dark mode need to be wrapped within the html.themeDark
.
Other elements
If you want to modify a particular element, you can use the Dev tools function in the upper left corner, and then select the element you want to modify, at which time you can see the styles related to it in the Styles column.
![](https://doc.anytype.io/~gitbook/image?url=https%3A%2F%2Fcommunity-static.anytype.io%2Foptimized%2F2X%2F3%2F3d111c1232f10345c8584f5a2cf15ec36cba8864_2_690x460.png&width=768&dpr=4&quality=100&sign=12abc1f6&sv=1)
You can try directly modifying the values inside to see what effects it would produce.
![](https://doc.anytype.io/~gitbook/image?url=https%3A%2F%2Fcommunity-static.anytype.io%2Foptimized%2F2X%2F6%2F6ec5d48153fd5abfd34274a2c9cfb736de865a14_2_690x283.png&width=768&dpr=4&quality=100&sign=a751e632&sv=1)
If you think the effects are not bad, you can copy all this content to your custom.css stylesheet to save.
![](https://doc.anytype.io/~gitbook/image?url=https%3A%2F%2Fcommunity-static.anytype.io%2Foriginal%2F2X%2F8%2F8c83f1c7406a1a651cac26da10c6429bd59f2dcb.png&width=768&dpr=4&quality=100&sign=1545287e&sv=1)
Change Icons
The icons in Anytype are implemented using SVG.
If you want to customize your own icon, you can convert SVG to Base64 format, which can be achieved on a dedicated website.
As for the source of SVG icons, I recommend using this website 4.
It is best not to choose SVG that is too complicated, otherwise the resulting Base64 text will be too long.
After obtaining the corresponding Base64 text and replacing it, we have successfully replaced it.
![](https://doc.anytype.io/~gitbook/image?url=https%3A%2F%2Fcommunity-static.anytype.io%2Foriginal%2F2X%2F3%2F30b788e54c7daa2db54352ca4ff721ecc6d2e027.png&width=768&dpr=4&quality=100&sign=e1619a81&sv=1)
If you think the original icon is very good and just want to change the color, there is also a way to achieve it, but it will be a bit complicated.
If you have used PS, you should be able to guess that this is a similar mask function, but unfortunately the final result is not very smooth.
![](https://doc.anytype.io/~gitbook/image?url=https%3A%2F%2Fcommunity-static.anytype.io%2Foriginal%2F2X%2F7%2F72dbdcf71ef643f5873aa7ea1ea814bf282dfec5.png&width=768&dpr=4&quality=100&sign=f73b1f9e&sv=1)
Examples
Last updated