diff --git a/html-css/fun.css b/html-css/fun.css
index 34a3363..060e4b2 100644
--- a/html-css/fun.css
+++ b/html-css/fun.css
@@ -1,6 +1,5 @@
-/** @format */
-
 :root {
+  color-scheme: dark light;
   --fonts-sans-serif:
     ui-sans-serif, "Liberation Sans", "Arimo", "Arial",
     sans-serif "Noto Emoji", "Noto Color Emoji", emoji;
diff --git a/html-css/fun.html b/html-css/fun.html
index 07c1a97..2d3a5e5 100644
--- a/html-css/fun.html
+++ b/html-css/fun.html
@@ -8,6 +8,18 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0" />
     <title>Lorem.</title>
+    <meta
+      name="color-scheme"
+      content="dark light" />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: dark)"
+      content="#ffb700" />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: light)"
+      content="#fdfdfd" />
+
     <link
       rel="stylesheet"
       href="fun.css" />
diff --git a/html-css/index.html b/html-css/index.html
index ea1a7ff..7c45c43 100644
--- a/html-css/index.html
+++ b/html-css/index.html
@@ -8,6 +8,17 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0" />
     <title>Lorem.</title>
+    <meta
+      name="color-scheme"
+      content="dark light" />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: dark)"
+      content="#ffb700" />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: light)"
+      content="#fdfdfd" />
     <link
       rel="stylesheet"
       href="style.css" />