Is it possible to modify css variables?

Anki Desktop
1

Is there any way either by importing a css file or perhaps a few lines of js to modify or add to the anki css variables? I don’t want a huge theme plugin add on. I just want to directly customize a few colors and maybe add a couple of custom props using css. Thanks!

2

https://docs.ankiweb.net/templates/styling.html

3

Hi @ferophila , Yes I know very well how to style cards. All my styling is done via an @import in the card. However I want to know if there is a lightweight no-addon way to either via python/java to directly maniupate the css variables ie:

:root {
–fg: #020202;
–fg-subtle: #737373;
–fg-disabled: #858585;
–fg-faint: #afafaf;
–fg-link: #1d4ed8;
–canvas: #f5f5f5;
–canvas-elevated: white;
–canvas-inset: white;
–canvas-overlay: #fcfcfc;
–canvas-code: white;
–canvas-glass: rgba(255, 255, 255, 0.4);
–border: #c4c4c4;
–border-subtle: #e4e4e4;
–border-strong: #858585;
–border-focus: #3b82f6;
–button-bg: #fcfcfc;
–button-gradient-start: white;
–button-gradient-end: #fcfcfc;
–button-hover-border: #999999;
–button-disabled: rgba(214, 214, 214, 0.5);
–button-primary-bg: #306bec;
–button-primary-gradient-start: #3b82f6;
–button-primary-gradient-end: #306bec;
–button-primary-disabled: #93c5fd;
–scrollbar-bg: #d6d6d6;
–scrollbar-bg-hover: #c4c4c4;
–scrollbar-bg-active: #afafaf;
–shadow: #c4c4c4;
–shadow-inset: #454545;
–shadow-subtle: #737373;
–shadow-focus: #6366f1;
–accent-card: #60a5fa;
–accent-note: #22c55e;
–accent-danger: #ef4444;
–flag-1: #ef4444;
–flag-2: #fb923c;
–flag-3: #4ade80;
–flag-4: #3b82f6;
–flag-5: #e879f9;
–flag-6: #2dd4bf;
–flag-7: #a855f

4

I misunderstood you then, sorry.

1 Like
5

It sounds like a small addon I wrote a while back:

I use it to customize the deck page in Anki, but you can replace the contents of .css and .js files in the addon folder with anything you want and it will append that to every webpage Anki displays. So you can use it to add your custom properties or modify the existing ones with the !important rule.

The addon wasn’t widely tested, so there might be some issues, but I can try and fix them if anyone needs it.

2 Likes
6

Thank you! This looks like what I am after…

1 Like
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.