/* light mode */
.light > * {
	background-color: var(--background-color) !important;
	color: var(--text-color) !important;
}

/* dark mode */
.dark {
	--background-color: var(--background-color-dark) !important;
	--secondary-background-color: var(
		--secondary-background-color-dark
	) !important;
	--text-color: var(--text-color-dark) !important;
	--text-secondary-color: var(--text-secondary-color-dark) !important;
	--primary-color: var(--primary-color-dark);
	--secondary-color: var(--secondary-color-dark);
}

.text-secondary {
	color: var(--text-secondary-color) !important;
}

#theme-toggle:focus {
	outline: 0;
}

#theme-toggle svg {
	height: 18px;
}

button#theme-toggle {
	border: none;
	font-size: 26px;
	margin: auto 4px;
}

body.dark #moon {
	vertical-align: middle;
	display: none;
}

body:not(.dark) #sun {
	display: none;
}

body *::selection {
	color: var(--text-color) !important;
	background-color: var(--primary-color) !important;
}