:root {
	/* darkmode */
	--darkgray1: rgba(35, 35, 35, 1);
	--darkgray1_hover: rgba(45, 45, 45, 1);
	--darkgray1_active: rgba(35, 35, 35, 1);

	--darkgray2: rgba(42, 42, 42, 1);
	--darkgray2_hover: rgba(52, 52, 52, 1);
	--darkgray2_active: rgba(42, 42, 42, 1);

	--darkborder1: rgba(42, 42, 42, 1);
	--darkborder2: rgba(55, 55, 55, 1);
	--darktext1: rgba(255, 255, 255, 1);

	/* lightmode */
	--lightgray1: rgb(250, 250, 250);
	--lightgray1_hover: rgb(240, 240, 240);
	--lightgray1_active: rgb(250, 250, 250);

	--lightgray2: rgb(230, 230, 230);
	--lightgray2_hover: rgb(220, 220, 220);
	--lightgray2_active: rgb(230, 230, 230);

	--lightborder1: rgb(230, 230, 230);
	--lightborder2: rgb(200, 200, 200);
	--lighttext1: rgba(0, 0, 0, 1);
}

body.lightmode {
	--darkgray1: var(--lightgray1);
	--darkgray1_hover: var(--lightgray1_hover);
	--darkgray1_active: var(--lightgray1_active);

	--darkgray2: var(--lightgray2);
	--darkgray2_hover: var(--lightgray2_hover);
	--darkgray2_active: var(--lightgray2_active);

	--darkborder1: var(--lightborder1);
	--darkborder2: var(--lightborder2);
	--darktext1: var(--lighttext1);
}

body.lightmode img.theme-icon {
	filter: invert(1) brightness(0);
	transition: filter 0.5s ease;
}