_themes.scss

@use 'abstracts/variables' as *;
@use "sass:map";

$themes: (
	light: (background: $light-mode-background,
		text: $light-mode-text,
		text-emphasized: $light-mode-text-emphasized,
		accent: $light-mode-accent,
		link-underline: $light-mode-link-underline,
		text-secondary: $light-mode-text-secondary,
		highlight: $light-mode-highlight),
	dark: (background: $dark-mode-background,
		text: $dark-mode-text,
		text-emphasized: $dark-mode-text-emphasized,
		accent: $dark-mode-accent,
		link-underline: $dark-mode-link-underline,
		text-secondary: $dark-mode-text-secondary,
		highlight: $dark-mode-highlight)
);

@mixin theme($theme) {
	$colors: map.get($themes, $theme);

	body {
		background-color: map.get($colors, background);
		color: map.get($colors, text);
	}

	header#masthead {
		color: map.get($colors, text-emphasized);

		nav {
			border-color: map.get($colors, link-underline);

			a {
				&.active {
					color: map.get($colors, accent);
				}
			}
		}
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: map.get($colors, text-emphasized);
	}

	a {
		color: map.get($colors, text-emphasized);
		text-decoration-color: map.get($colors, link-underline);

		transition-property: color, text-decoration-color;
		transition-duration: 0.1s;
		transition-timing-function: linear;


		&:hover {
			color: map.get($colors, accent);
			text-decoration-color: map.get($colors, accent);

			transition-property: color, text-decoration-color;
			transition-duration: 0.1s;
			transition-timing-function: linear;
		}
	}

	ul.posts {
		li {
			time {
				color: map.get($colors, text-secondary);
			}
		}
	}

	article {
		header {
			h1 {
				a {
					color: map.get($colors, accent);
				}
			}

			time {
				a {
					color: map.get($colors, text-secondary);
				}
			}
		}
	}

	footer {
		border-color: map.get($colors, link-underline);
	}


	mark {
		color: map.get($colors, text-emphasized);
		color: inherit;
		background: map.get($colors, highlight);
	}

	blockquote {
		border-color: map.get($colors, link-underline);
	}
}

@media (prefers-color-scheme: light) {
	@include theme(light);
}

@media (prefers-color-scheme: dark) {
	@include theme(dark);
}