@media (prefers-color-scheme: dark) {
    html {
        --font-color: #ebdbb2;
        --bg-color: #282828;

		--page-bg-color: #1d2021;

        --card-color: #3c3836;
        --card-border-color: #504945;

        --link-color: #8ec07c;
        --link-state-color: #689d6a;
        --link-state-border-color: #689d6a;

        --thead-bg-color: #343a40;
        --table-border-color: lightgrey;

        --nav-bg-color: #3c3836;
        --nav-link-color: #b6b6b6;

        --pre-color: #f8f8f2;
        --pre-bg-color: #292b2d;
        --pre-border-color: rgba(175, 184, 193, 0.3);
        --kbd-bg-color: #404347;

        --bq-color: #98971a;
        --hr-color: #333;

        --pagination-bg-color: #3c3836;
        --pagination-link-color: #b6b6b6;
        --pagination-border-color: #333333;
        --pagination-border-radius: 5px;

        --post-info-color: grey;

        --switcher-color: #ebdbb2;

        --svg-color: #ccc;
        --svg-state-color: #ff5858;
        
        .banner{
        	max-width: 100%;
        	height: auto;
        }

        .filtered-font-color{
        	filter:
	       	invert(94%)
	       	sepia(13%)
	       	saturate(916%)
	       	hue-rotate(332deg)
	       	brightness(102%)
	       	contrast(84%);
        }

        .pattern{
        	filter:
        	invert(9%)
        	sepia(20%)
        	saturate(263%)
        	hue-rotate(149deg)
        	brightness(89%)
        	contrast(90%);
        }
        
        @media print{
        	.filtered-font-color {
        		filter:	none;
        	}
        
        }
    }
}
/* Same as above.  */
html[data-theme='dark'] {
		--font-color: #ebdbb2;
		--bg-color: #282828;

		--page-bg-color: #1d2021;

		--card-color: #3c3836;
		--card-border-color: #504945;

		--link-color: #8ec07c;
		--link-state-color: #689d6a;
		--link-state-border-color: #689d6a;

		--thead-bg-color: #343a40;
		--table-border-color: lightgrey;

		--nav-bg-color: #3c3836;
		--nav-link-color: #b6b6b6;

		--pre-color: #f8f8f2;
		--pre-bg-color: #292b2d;
		--pre-border-color: rgba(175, 184, 193, 0.3);
		--kbd-bg-color: #404347;

		--bq-color: #98971a;
		--hr-color: #333;

		--pagination-bg-color: #3c3836;
		--pagination-link-color: #b6b6b6;
		--pagination-border-color: #333333;
		--pagination-border-radius: 5px;

		--post-info-color: grey;

		--switcher-color: #ebdbb2;

		--svg-color: #ccc;
		--svg-state-color: #ff5858;

		.banner{
		max-width: 100%;
		height: auto;
		}

		.filtered-font-color{
        	filter:
	       	invert(94%)
	       	sepia(13%)
	       	saturate(916%)
	       	hue-rotate(332deg)
	       	brightness(102%)
	       	contrast(84%);
        }

        .pattern{
        	filter:
        	invert(9%)
        	sepia(20%)
        	saturate(263%)
        	hue-rotate(149deg)
        	brightness(89%)
        	contrast(90%);
        }
        
		@media print{
			.filtered-font-color {
				filter:	none;
			}
		
		}
}