@media (prefers-color-scheme: light) {
  body:not(.dark) {
    --text-color: rgba(51, 51, 51, 1);
    --bg-color: rgb(247, 247, 247);
    --color-fg-muted: rgba(51, 51, 51, 0.6);

    --code-color: rgba(55, 53, 47, 0.8); 
    --pre-bg-color: rgba(240,240,240,1);
    --pre-border-color: rgba(230,230,230,1);
    --icon-filter: invert(25%) sepia(11%) saturate(22%) hue-rotate(335deg) brightness(88%) contrast(80%);
    --button-color: white;
    --button-background-color: rgba(55, 53, 47, 1);
    --button-hover-background-color: rgba(55, 53, 47, 0.8);
    --try-in-browser-icon-filter: invert(0);
    --android-logo-filter: invert(0);
    --linux-logo-filter: brightness(10);
    --linux-logo-filter-inverted: brightness(0);
    --link-underline: 1px solid rgba(55, 53, 47, 0.3);
    --link-underline-color: rgba(55, 53, 47, 0.3);
    --link-underline-hover: 1px solid rgba(55, 53, 47, 1);
    --top-bar-background-hover: rgba(51, 51, 51, 0.05);
    --card-background: white;
    --card-border: #DFDFDF;
    --border-color: rgb(228, 227, 226);
    --tooltip-background: rgba(0,0,0, 0.8);
    --tooltip-foreground: white;
    --screenshot-border: rgba(55, 53, 47, 0.2);
    --subhead: rgb(97, 97, 97);
    --title-tag: rgb(102,102,102);

    --button-background:         rgb(255, 255, 255);
    --button-background-hover: rgb(239,239,239);
    --button-background-active: rgb(223, 223, 223);
    --button-box-shadow:         rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset,
                                 rgba(15, 15, 15, 0.1) 0px 1px 2px;

    --inverted-button-color: rgb(255,255,255);
    --inverted-button-bg: rgba(51, 51, 51, 0.9);
    --inverted-button-bg-hover: rgba(51, 51, 51, 0.85);
    --inverted-button-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
                              rgb(40,40,40) 0px 0px 0px 1px,
                              rgb(255,255,255,0.1) 1px 1px 0px 0px inset,
                              rgba(60, 66, 87, 0.12) 0px 2px 5px 0px;

    --feature-box-bg-hover: rgba(15,15,15,0.05);
    --marker-color: rgba(51,51,51,0.4);
    --footer-base-bg: rgba(0,0,0,0.07);

    --toggle-background-color: rgba(51, 51, 51, 0.05);
  }
  .dark {
    display: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  body:not(.light) {
    --text-color: #EAEAEA;
    /* --text-color: rgba(255, 255, 255, 0.9); */
    --bg-color: rgb(46, 46, 48);
    --color-fg-muted: rgba(255, 255, 255, 0.6);

    --code-color: rgba(255, 255, 255, 0.8); 
    --pre-bg-color: rgba(0,0,0,0.1);
    --pre-border-color: rgba(0,0,0,0.15); 
    --icon-filter: invert(99%) sepia(31%) saturate(7444%) hue-rotate(194deg) brightness(139%) contrast(84%);
    --button-color: rgba(51, 51, 51, 1);
    --button-background-color: rgb(246,246,246);
    --button-hover-background-color: rgba(246,246,246,0.8);
    --try-in-browser-icon-filter: invert(1);
    --android-logo-filter: invert(1);
    --linux-logo-filter: brightness(0);
    --linux-logo-filter-inverted: brightness(10);
    --link-underline: 1px solid rgba(255,255,255, 0.3);
    --link-underline-color: rgba(255,255,255, 0.3);
    --link-underline-hover: 1px solid rgba(255,255,255, 1);
    --top-bar-background-hover: rgba(255, 255, 255, 0.06);
    --card-background: rgb(36, 36, 38);
    --card-border: rgba(0,0,0,0.2);
    --border-color: rgba(255, 255, 255, 0.09);
    --tooltip-background: rgba(255,255,255,0.8);
    --tooltip-foreground: rgba(51, 51, 51, 1);
    --screenshot-border: rgba(255,255,255,0.05);
    --subhead: rgb(178, 178, 178);
    --title-tag: rgb(153,153,153);

    --button-background:         rgb(60, 61, 63);
    --button-background-hover:   rgb(68, 69, 71);
    --button-background-active: rgb(120, 123, 123);
    --button-box-shadow:         rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
                                 rgb(80, 80, 80) 0px 0px 0px 1px,
                                 rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;

    --inverted-button-color: rgb(46, 47, 49);
    --inverted-button-bg: rgba(255, 255, 255, 0.9);
    --inverted-button-bg-hover: rgba(255, 255, 255, 0.8);
    --inverted-button-shadow: rgba(0,0,0,0.3) 0px 1px 1px 0px,
                              rgba(255,255,255,1) 0px 0px 0px 1px,
                              rgba(0, 0, 0, 0.5) 0px 2px 5px 0px;

    --feature-box-bg-hover: rgba(255,255,255,0.03);
    --marker-color: rgba(255,255,255,0.4);
    --footer-base-bg: rgba(0,0,0,0.2);

    --toggle-background-color: rgb(36, 36, 38);
  }
  .light {
    display: none !important;
  }
}