Tutorial of custom css

Anytype introduced custom css in version 0.38.0, but they seem to have not made much publicity about it, so I write a short tutorial about it here.

Where

To use custom css, you first need to enter the work directory of anytype.
File -> Show Work Directory

Then create a file called custom.css here.

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.

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:

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.

Below is part of the custom.css I modified referring to Solarized, 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.

:root {
    --color-text-primary: #002b36;
    --color-text-secondary:	#586e75;
    --color-text-tertiary: 	#839496;
    --color-text-inversion: #eee8d5;
    --color-shape-primary: 	#586e75;
    --color-shape-secondary: 	#eee8d5;
    --color-shape-tertiary: 	#eee8d5;
    --color-shape-highlight-medium: rgba(79, 79, 79, 0.08);
    --color-shape-highlight-light: rgba(79, 79, 79, 0.04);
    --color-control-accent: #252525;
    --color-control-active: #b6b6b6;
    --color-control-inactive: #dcdcdc;
    --color-control-bg: #fff;
    --color-bg-primary: #fdf6e3;
    --color-bg-loader: rgba(255,255,255,0.7);
    --color-system-accent-100: #ffb522;
    --color-system-accent-50: #ffd15b;
    --color-system-accent-25: #ffee94;
    --color-system-selection: rgba(24, 163, 241, 0.15);
    --color-system-drop-zone: rgba(255, 187, 44, 0.25);
    --color-yellow: #ecd91b;
    --color-orange: #ffb522;
    --color-red: #f55522;
    --color-pink: #e51ca0;
    --color-purple: #ab50cc;
    --color-blue: #3e58eb;
    --color-ice: #2aa7ee;
    --color-teal: #0fc8ba;
    --color-lime: #5dd400;
    --color-green: #66B395;
}

Fonts

The attribute related to fonts in CSS is called font-family. In order to ensure that all text applies the same font, We generally put the styles on the body tag.

body {
    font-family: "霞鹜文楷", "jetBrainsMono";
}

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.

Import font online





Dark Mode

The styles in dark mode need to be wrapped within the html.themeDark.

/* Default applies to light mode */
.blocks {
    .block.blockText.textCallout>.wrapContent{
        border-radius: 30px;
    }
}

html.themeDark {
    /* Applies to Dark mode */
    --color-text-primary: red;
    .blocks {
        .block.blockText.textCallout>.wrapContent{
            border-radius: 2px;
        }
    }
}

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.

You can try directly modifying the values inside to see what effects it would produce.

If you think the effects are not bad, you can copy all this content to your custom.css stylesheet to save.

Examples

24 Likes

I thought I saw it wrong when someone shared a screenshot of the app and it had different colors and theming until now you confirmed that it was possible uaijg cuatok CSS :joy:

Thank you for taking time to show us how to do it! :smiling_face:

Create from where? What kind of file is that? (Sorry, my CSS knowledge is limited to the stylesheet existing. :laughing:) Thank you!

Round corners. :star_struck: This is what I’d like to edit!

I wonder, is the custom css there to stay, or will it be overridden by new updates? Does it require a separate backup?

I would like to add couple of things:

I would like to introduce custom themes in the near future, recently I’ve reworked some code parts that allow for easier themes application, so this approach would be used there.

11 Likes
  1. You can create a new .txt file first, then rename it to custom.css.
    2.Custom CSS is the highest level of override, and is not affected by updates.
1 Like

CSS now also supports nesting, so I think it’s not very necessary to use SCSS.

Maybe, just maybe, this is a step in the direction of RTL-language support? https://rtlcss.com/

No, but it does provide some degree of customization, but as far as I know supporting RTL is not simple, and it also involves issues with mixed LTR and RTL input.

@Razor , on the FR “Custom CSS” we mentioned the possibility of adding custom CSS to each page/object. Is it necessary or useful to create a separate FR?

This is more complicated as it should be stored somewhere in the document and it requires middleware changes, so yes - a separate FR. But personally I do not think it would be widely adopted.

Thanks for sharing !

It’s not very complicated, and there are plenty of resources to copy solutions from. I hope to find a few free hours over the weekend to see if I can manage to have the basic editor work with RTL languages. Should be possible. If there’s anybody else here with more experience than me with CSS I’d be happy to play together.

Full localization (i.e., menus, etc.) is more complicated, but should also be pretty straightforward (again, no need to invent the wheel, there are existing resources for it.)

Thanks for the tutorial, will be fun to create custom themes!

1 Like

I don’t know a lot about CSS to be sure about this.
But what about the simple RTL support used by chat apps like whatsapp?
The support is pretty simple, It just looks at the first character* and determines the direction.
Does any one know a simple way to achieve this using the custom.css file


* It actually looks at the first character with strong directionality, so numbers & emojis … are skipped.
But Arabic characters for example change the direction to RTL
while English characters keep it as LTR.

You can’t achieve it with CSS, it should be implemented in code.

1 Like

That sounds like a step in the right direction.

As described in my feature request, an integration into the AnyType
prefs in the style of Obsidian (see screenshot) would be nice.

My big problem is - what happens after an update of AnyType???
Will the custom.ccs remain untouched or will it be updated as well?
That would be bad!

90a658aab696dc329333c5cd775374dcf84ad2d3_2_690x375

Untouched

1 Like

Quick question (sorry if it looks stupid, I like to say that there is no stupid question - especially if it is easily answered by others and make you save time) … by “Dev Tool Selector”… you mean, on your browser ?

In Anytype menu

1 Like