BlackIQ/index.html

## index.html
<html>
	<head>
		<title>Theme</title>
		<style>
			/*
				In css we have @media
				Well, @media has many stuff but now we are going to talk about how to make an auto theme.
				I mean if user change the browser theme, your site theme will change too.
				In this case we use { prefers-color-scheme }.
			*/

			/* Lets define things that are both same in both themes */
			.main {
				padding: 5%;
			}

			/* Ok now we just add light theem */
			@media (prefers-color-scheme: light) {
				/* Now we will describe classes */
				body {
					background: white;
				}
				.headings {
					color: purple;
				}
				.text {
					color: blue;
				}
			}

			/* Ok, we set light, time to create dark too */
			@media (prefers-color-scheme: dark) {
				/* Now we will describe classes */
				body {
					background: #313131;
				}
				.headings {
					color: yellow;
				}
				.text {
					color: red;
				}
			}

			/*
				Thanks for reading.
				If you enjoyed, give me a star.
			*/
		</style>
	</head>
	<body class="main">
		<h1 class="headings"></h1>
		<hr>
		<p class="text">Simple Test!</p>
	</body>
</html>
	<html>
	<head>
	<title>Theme</title>
	<style>
	/*
	In css we have @media
	Well, @media has many stuff but now we are going to talk about how to make an auto theme.
	I mean if user change the browser theme, your site theme will change too.
	In this case we use { prefers-color-scheme }.
	*/

	/* Lets define things that are both same in both themes */
	.main {
	padding: 5%;
	}

	/* Ok now we just add light theem */
	@media (prefers-color-scheme: light) {
	/* Now we will describe classes */
	body {
	background: white;
	}
	.headings {
	color: purple;
	}
	.text {
	color: blue;
	}
	}

	/* Ok, we set light, time to create dark too */
	@media (prefers-color-scheme: dark) {
	/* Now we will describe classes */
	body {
	background: #313131;
	}
	.headings {
	color: yellow;
	}
	.text {
	color: red;
	}
	}

	/*
	Thanks for reading.
	If you enjoyed, give me a star.
	*/
	</style>
	</head>
	<body class="main">
	<h1 class="headings"></h1>
	<hr>
	<p class="text">Simple Test!</p>
	</body>
	</html>