@media (prefers-color-scheme: dark) { :root { --color-mode: 'dark'; } :root:not([data-user-color-scheme]) { --main-color: #bb86fc; --bg-color: #121212; --bg-content-color: #1e1e1e; --bg-menu: #363636; --bg-tag-color: #696969; --bg-codeblock: #000; --bg-code: rgba(240,246,252,0.149); --body-color: rgba(255,255,255,0.8); --title-color: rgba(252,252,252,0.9); --border-color: rgba(255,255,255,0.1); } :root:not([data-user-color-scheme]) blockquote { border-left: 0.25em solid rgba(255,255,255,0.5); color: rgba(255,255,255,0.5); } :root:not([data-user-color-scheme]) .post__license { background-color: rgba(255,255,255,0.2); } :root:not([data-user-color-scheme]) .post__content img { opacity: 0.8; filter: brightness(0.8) contrast(1.2); } :root:not([data-user-color-scheme]) .post__content img:hover { opacity: 1; filter: none; } :root:not([data-user-color-scheme]) .sliding-fold, :root:not([data-user-color-scheme]) details { background: #333; } :root:not([data-user-color-scheme]) table tr:not(.code):not(.gutter):nth-child(2n) { background-color: #272727; } } [data-user-color-scheme="dark"] { --color-mode: 'dark'; --main-color: #bb86fc; --bg-color: #121212; --bg-content-color: #1e1e1e; --bg-menu: #363636; --bg-tag-color: #696969; --bg-codeblock: #000; --bg-code: rgba(240,246,252,0.149); --body-color: rgba(255,255,255,0.8); --title-color: rgba(252,252,252,0.9); --border-color: rgba(255,255,255,0.1); } [data-user-color-scheme="dark"] blockquote { border-left: 0.25em solid rgba(255,255,255,0.5); color: rgba(255,255,255,0.5); } [data-user-color-scheme="dark"] .post__license { background-color: rgba(255,255,255,0.2); } [data-user-color-scheme="dark"] .post__content img { opacity: 0.8; filter: brightness(0.8) contrast(1.2); } [data-user-color-scheme="dark"] .post__content img:hover { opacity: 1; filter: none; } [data-user-color-scheme="dark"] .sliding-fold, [data-user-color-scheme="dark"] details { background: #333; } [data-user-color-scheme="dark"] table tr:not(.code):not(.gutter):nth-child(2n) { background-color: #272727; }