Custom.css file generator

Talk Cases
, ,
1

Hi everyone,

This is a tool for generating custom.css based on your favorite colors.

image
image1053×895 20 KB

Colors 0 to 3 → Editor background, sidebar background, code snippet blocks and other dark areas of the app
Colors 4 to 6 → Lighter elements/text of the UI
Colors 7 to 16 → Tags/Highlight and text background
Colors 17 to 26 → Text colors

Steps:

  1. Download the .zip file, extract and run the .html file
    Custom theme css generator v0.4.zip (3.4 KB)
  2. Make your prefered changes to the colors (the default ones are nord theme)
  3. Click “Download CSS” to get the generated custom.css file which you can then copy to anytype’s work directory

Thanks to @Felipe I got the list of variables/classes of most of anytype’s in their Nord theme here: Tutorial of custom css - #118 by Felipe

More classes/properties to be added once someone help me with them I hope, I need the full list of them or at least the editor text colors for now.

Changelog:

v0.4 Fixed some text colors won’t apply
v0.3 Added text colors
v0.2 Fixed pink tag color showing as purple
v0.1 Fixed syntax error in the generated file

2

Omg I was so happy to find this by it doesn’t seem to work for me :sob:
Nothing changes in the app, thou my other themes were working fine

3

What are the exact steps you carry on? Did you copy the generated custom.css file to the work directory?

4

I did everything, reloaded the app and nothing changed. I checked with my other css and it worked fine, so idk what can be the deal… What version of Anytype and os do you have?

5

That’s a bit odd, it works just fine for me, I click the “Download CSS” button and saved it with the name “custom.css” then copied it to my anytype’s work directory located here: C:\Users\USERNAME\AppData\Roaming\anytype

Then clicked on that:

image
image359×386 14 KB

I’m on Windows 11 @ v0.45.3

6

I suppose your browser has an active script blocker.
Try to allow scripts or use another browser.

Edit:
Maybe I’ve misunderstood the problem. So let me ask:
– Does the html file work for you?
a) If no, then try to allow script in your browser.
b) If yes, make sure that the generated css file is located in Anytype’s work directory. Replace the old css file that already exist there. After that, reload Anytype (Ctrl + R).

7

Good job!
I had previously conceived a similar tool, but due to being extremely busy (or perhaps too lazy :lying_face:) over the past year, I never got around to implementing it. However, seeing this has suddenly motivated me to start a new project. :laughing:

8

I hope you start that project soon or help me with this one cuz that tool is too far from being complete and using Chatgpt to make it better is a pain lol

9

Just reporting on the progress: I set up a rough framework last Sunday, but then found it difficult to move the project forward.

One of the reasons is that modifying themes is both simple and complex. Providing a button to change CSS variables is straightforward, but many styles in Anytype are not implemented in a standard way. For example, certain background colors are controlled by a specific CSS variable in light mode, but this isn’t the case in dark mode. As a result, the primary feature of modifying CSS variables cannot fully achieve the desired effects for users.

What if more controllable options are provided? On one hand, this would significantly increase the workload in simulating Anytype’s original style, and at best, it would only result in a low-end web developer tool that users could learn to use in less than half an hour. Thinking about this makes me somewhat lost regarding the future development direction.

image
image1107×917 61.7 KB

10

If you provide me list of such places I can either use existing vars for this or move them to new vars

11

all the .bgColor for text
html.themeDark .vault
html.themeDark .vault .item.isButton .iconWrap