Kindroid - Light Mode + Aptos Narrow Font by aldirafa

/* ==UserStyle==
@name           Kindroid.ai - Light Mode + Custom Font
@namespace      https://thesettlement.id/
@version        1.0.1
@description    Light Mode + Custom Font for Kindroid.ai (Web). Note: Since Kindroid now supports Light Mode, to use my light mode stylesheet, please toggle the appropriate option in this style's configuration.
@author         @aldirafa_
@preprocessor   stylus
@var            text    fontName    "Font Name"     "Aptos Narrow"
@var            checkbox kindroidLM "Use Kindroid's Light Mode?" 0
==/UserStyle== */
@-moz-document domain("kindroid.ai") {
    /* Apply the same font-family throughout the body and specific text elements */
    body,
    .chakra-text:not(.css-s68iw5),
    /* Prevent the logo font from being changed */
    .chakra-textarea,
    .css-1gz7esi,
    .css-tgitq2 {
        font-family: fontName, sans-serif !important;
    }

    if !kindroidLM {
        /* Apply the same filter to multiple icon classes */
        .chakra-icon:not(.css-htfwx3, .css-1ejvrdi, .css-1lf3gor),
        .css-1oog61w,
        .css-1c2gsk7,
        .css-1995aov {
            filter: brightness(0) saturate(100%) invert(0%) sepia(98%) saturate(2%) hue-rotate(159deg) brightness(98%) contrast(100%);
        }

        .css-1lf3gor {
            filter: invert(100%);
        }

        /* Combine background color styling */
        .css-1lvpjll,
        .css-1raxatq,
        .css-1x3hygh,
        .css-uf0eqr,
        .css-z0osps,
        .css-1fltgj7,
        .css-15nmedt,
        .css-chdrwy,
        .css-fskrnz,
        .css-1p90m26,
        .css-j9wpg1,
        .css-1gz7esi,
        .css-tgitq2,
        .css-1cmjvy0,
        .css-13kggwt,
        .css-ed82lc,
        body,
        .css-x3odei,
        .css-ymugf1 {
            background: #FFFAFF;
        }

        .css-1j9xj7u,
        .css-teti0a,
        .css-1725csf,
        .css-1y068e {
            background: #F5F5F5;
        }

        /* Combine color styling and remove redundancies */
        .css-1gi22a8,
        .css-6obdga,
        .css-dghbxk,
        .css-1txfe3e,
        .css-okr46m,
        .css-bq8vjq,
        .css-1gz7esi,
        .css-tgitq2,
        .css-ed82lc,
        .css-xhpjzu,
        .css-23xfka,
        .css-1wdg0si,
        .css-zow7e9,
        .css-1yl3xh5,
        .css-isgfme,
        .css-1cfkm3f,
        .css-1dxin14,
        body {
            color: #1E1B18;
        }

        /* Group elements with the same color and border */
        .css-1vqt2yh,
        .css-j8mh8q,
        .css-151uqsi,
        .css-14mmx5r,
        .css-1d300q8,
        .css-b50phx,
        .css-1gfhrfq,
        .css-ymugf1,
        .css-12qccw0,
        .css-w16zoq,
        .css-z1c4hz,
        .css-1y068e,
        .css-1725csf {
            color: #3E92CC;
        }

        /* Remove redundant background-color properties where they duplicate background */
        body {
            background: #FFFAFF;
            --ion-background-color: #FFFAFF;
        }

        /* Consolidate border and background styles */
        .css-1y068e,
        .css-1725csf {
            border-color: #FFFAFF;
        }

        /* Combine background color styling */
        .css-12qccw0,
        .css-w16zoq,
        .css-z1c4hz {
            background: #1E1B18;
        }
    }
}