AnkiMobile Statistics CSS Styling (Day Mode & Night Mode)

AnkiMobile (iPhone/iPad) Help
1

IMG_0863
IMG_08631640×1498 170 KB

Hi, I want my Cards to match the CSS Styling of the AnkiMobile Statistics. For aesthetic reasons.
Currently I use:

.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: #F2F2F7;
}

.card.nightMode {
font-family: arial;
font-size: 20px;
text-align: center;
color: white;
background-color: #2C2C2C;
}

.box {
background-color: #FFFFFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
opacity: 0.98;
padding: 15px;
border-radius: 7px;
margin-bottom: 50px;
margin-top: 50px;
}

.nightMode .box {
background-color: #363636;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
opacity: 0.98;
padding: 15px;
border-radius: 7px;
margin-bottom: 50px;
margin-top: 50px;
}

.hr-style {
border-top: 2px solid #AAA;
margin-top: 10px;
margin-bottom: 10px;
}

I think so far only the colors match but I’m not sure. I could definitely try to adjust settings and come as close as possible but I hoped maybe someone already figured it out.

Thanks a lot in advance!

2

If you want the exact color values used in the stats screen, check out this scss file: https://github.com/ankitects/anki/blob/main/sass/_vars.scss

3

Blockquote
Thank you, I think I came very close with this in case anyone is interested:

.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: #000000;
background-color: #F2F2F7;
}

.card.nightMode {
color: #000000;
background-color: #FFFFFF;
}

.box {
background-color: #FFFFFF;
border: 1px solid #E4E4E4;
opacity: 0.98;
padding: 15px;
border-radius: 7px;
margin-top: 10px;
margin-bottom: 10px;
}

.nightMode .box {
background-color: #363636;
border: 1px solid #252525;
invert: ( amount )
}

.hr-style {
border: none;
height: 1px;
background-color: #C4C4C4;
margin-top: 10px;
margin-bottom: 10px;
}

.nightMode .hr-style {
background-color: #202020;
}

4

where to paste it ? Card template or somewhere else ?