Customizing the themes

Opening the theme file

it's better if you duplicate the file before editing it. So, if something went wrong you can revert to the default version.

As for now, This ad-don comes with 4 preset themes each of which can be customized to your liking. To start customizing those themes, Head to

addon file / theme_settings

and open the file of the theme you want to edit.

This is what the flamingo.json file ,for example, looks like.

{

    "overlay-color1"    : "rgba(239, 83, 80, 0.55)",
    "overlay-color2"    : "rgba(4, 95, 95, 0.82)",
    "heatmap-background": true,

    "gear-icon-color"   :" rgba(55, 71, 79,1)",
    "buttons-color"     : " rgba(55, 71, 79,1)", 
    "bottombar-color"   : "rgba(128, 203, 196,1) ",
    "topbar-color"      : "rgba(128, 203, 196,1)" , 
    "topbar-position"   : "center",


    "large-areas-color"     : "rgba(215, 204, 200, 0.57)",
    "decks-border-color"    : "rgba(215, 204, 200, 0.57)",
    "decks-font-color"      : "rgba(0, 44, 66,1)",
    "filtered-deck-color"   : "rgba(59, 84, 208,1)",
    
    "DECK-BROWSER": {

        "wedgits-font-color"    : "rgba(238, 238, 238,1)" ,

        "overview-wedgit-bg"    : "rgba(77, 182, 172 , 0.8)" ,
        "average-wedgit-bg"     : " rgba(239, 83, 80,0.8)" ,
        "remaining-wedgit-bg"   : "rgba(198, 40, 40,0.8)" ,
        "new-wedgit-bg"         : "rgba(0, 131, 143,0.8)" ,
        "due-wedgit-bg"         : "rgba(120, 144, 156,0.8)" ,
        "total-wedgit-bg"       : "rgba(161, 136, 127,0.8)" ,

        "overview-wedgit-icon"  : "playlist_add_check" ,
        "average-wedgit-icon"   : "access_alarm" ,
        "remaining-wedgit-icon" : "timer" ,
        "new-wedgit-icon"       : "card_giftcard" ,
        "due-wedgit-icon"       : "edit" ,
        "total-wedgit-icon"     : "donut_small" 

    } ,
    "DECK-OVERVIEW" :{

        "wedgits-font-color"    : "rgba(255, 255, 255,1)",

        "total-notes-wedgit-bg" : "rgba(77, 182, 172 , 0.8)" ,
        "remaining-wedgit-bg"   : "rgba(198, 40, 40,0.8)" ,
        "new-wedgit-bg"         : "rgba(0, 131, 143,0.8)" ,
        "learning-wedgit-bg"    : "rgba(120, 144, 156,0.8)" ,
        "review-wedgit-bg"      : " rgba(239, 83, 80,0.8)",
        "total-wedgit-bg"       : "rgba(161, 136, 127,0.8)" ,

        
        "remaining-wedgit-icon" : "timer" ,
        "new-wedgit-icon"       : "card_giftcard" ,
        "learning-wedgit-icon"  : "description" ,
        "review-wedgit-icon"    : "edit" ,
        "total-wedgit-icon"     : "donut_small" ,

    
    "PIE-CHART":{
        "wedgits-font-color" : "rgba(224, 97, 0,1)"
    }
    }

}

Changing the colors

All the colors values are CSS colors. If you already know what CSS is then just skip this part. If, on the other hand, you have no idea what is CSS, then all you need to know is that CSS is markup language that is used to style web-pages and Anki pages too.

CSS colors are a way of telling Anki (or any browser) what color should your element be. there're a few formats you can use to express a color for example: CadetBlue , #5F9EA0 , rgb(95, 158, 160) are all valid formats to express this color .

The way I choose to express colors are this one :

rgba(77, 182, 172 , 0.8)

the first three values expresses the color it self and the last value expresses the opacity of the color and ranges from ( 0 which means transparent to 1 ).

If all you need to change is the transparency of the color then just modify the last value. if you want a completely different color then change the whole thing. and remember you can use whatever format you like not just the rgba() one I use.

Changing the statistics icons

This addon uses materialize css library. So, to change any of the default statistics widgets iconsyou'll need to get the icon name from here and replace the existing icon name with the one you chose.

A map to what each option refers to