Customizing CSS

How To
1

I was able to modify the dark theme’s CSS located under: AppData\Local\Programs\anytype\resources\app.asar.unpacked\dist\css\theme\dark\prism.css on Windows.

But now, the elements I hid - flicker, as I switch between objects.

The question is: “What’s enforcing those elements?”. and “How do I stop it from enforcing them?”.

I don’t dislike the default UI, but do prefer a more minimal experience, since keyboard shortcuts freed me from using a mouse for certain elements. I’m also aware that UI or the app’s file structure might change, breaking my CSS changes, but it’s not an issue for me, since I’m planning to use the app completely offline not receiving any updates as my goal is to customize my experience first.

At Anytype, we believe that everything you create should look great and feel personal.

2

You might have more luck asking on GitHub, either in discussions or the desktop repo.

1 Like
3

If you are using CSS to set the display of the element to “hidden”, this is happening because the CSS is loading after the body has already loaded and so the elements are still going to show for a while until the CSS kicks in and sets these objects to hide. The only good way to do this would be to completely remove those elements, which isn’t particularly possible. There really is no way to do this without experiencing that.

1 Like
4

I found exports.push([module.id, "*{padding:0px;margin:0px;border:0px;box-sizing:border-box}html.... in main.js at 694th line, which seems to be containing all of the CSS that’s being “pushed”. prism.css only changes the theme-colors and does contain the code blocks I’d like to hide, so it makes sense why the flickering happens, because the theme overwrites them only after they’re loaded. I’m experiencing some errors when unpacking the archive app.asar, so we’ll find out if changing the CSS in exports.push will do it or not, as soon as I solve them.

5

It worked! No more flickering.
I’ll leave a note for those who want to permanently change anytype’s CSS.
I’m not exactly sure if you have to extract the app.asar, since there’s already app.asar.unpacked which you can modify and pack into app.asar, but this is what worked for me:

  1. Backup C:\Users\xxx\AppData\Local\Programs\anytype\resources
  2. Install asar using npm install -g @electron/asar
  3. Extract app.asar npx asar extract app.asar test
  4. Open resources\test\dist\main.js in a text editor.
  5. Copy CSS selectors (properties of which you’d like to edit) from the dev tools, e.g .header.isCommon .path .inner
  6. Paste them into your text editor’s finder and find them, it’ll look like this:
exports.push([module.id, ".header.isCommon .path .inner{change the properties} ", ""]);

Note, there’s many exports.push([module.id... across the file containing CSS.
7. Save the file
8. Archive test into app.asar: npx asar pack test app.asar
9. Then extract it to app.asar.unpacked: npx asar extract app.asar app.asar.unpacked
10. Launch the app.