diff --git a/css/dark-mode.css b/css/dark-mode.css
new file mode 100644
index 0000000..4272c02
--- /dev/null
+++ b/css/dark-mode.css
@@ -0,0 +1,10 @@
+.bar-color {color:#000!important;background-color:#f1f1f1!important}
+@media (prefers-color-scheme: dark) {
+    body {background-color: black;color: white;}
+    .bar-color{color:#000!important;background-color:#707070!important}
+    .w3-button{color: white}
+    .w3-container p{color: white}
+    input[type=text], select{background-color: #4c4c4c;}
+    input[type=text]::placeholder, select::placeholder{color: #9e9e9e;opacity: 1;}
+    .w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#37823a!important}
+}
\ No newline at end of file
diff --git a/css/form.css b/css/form.css
index 0895aaf..f3cef90 100644
--- a/css/form.css
+++ b/css/form.css
@@ -10,7 +10,7 @@ input[type=text], select {
 
 .optional::before {
   content: "optional ";
-  color: grey
+  color: grey;
 }
 
 input[type=submit] {
diff --git a/index.html b/index.html
index 465ea8d..582186d 100644
--- a/index.html
+++ b/index.html
@@ -5,17 +5,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>DNS Profile Creator</title>
     <link rel="stylesheet" href="css/w3.css">
-    <link rel="stylesheet" href="css/form.css">
+    <link rel="stylesheet" href="css/dark-mode.css">
 </head>
 <body class="w3-container">    
-    <div class="w3-container w3-light-gray">
+    <div class="w3-container bar-color">
         <p>This website uses technical cookies. By continuing you agree to the use of these cookies. No personal data is stored or shared. <a href="legal.html">Learn more</a></p>
     </div> 
     
     <h1>Secure DNS profile creator</h1>
     <h2>For iOS 14 or later and macOS Big Sur or later</h2>
     
-    <div class="w3-bar w3-border w3-light-grey">
+    <div class="w3-bar w3-border bar-color">
         <a href="/index.html" class="w3-bar-item w3-button w3-green w3-mobile">About</a>
         <a href="/tool.html" class="w3-bar-item w3-button w3-mobile">Tool</a>
         <a href="/premades.html" class="w3-bar-item w3-button w3-mobile">Pre-made profiles</a>
diff --git a/legal.html b/legal.html
index 476dd44..98cd145 100644
--- a/legal.html
+++ b/legal.html
@@ -5,13 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>DNS Profile Creator</title>
     <link rel="stylesheet" href="css/w3.css">
-    <link rel="stylesheet" href="css/form.css">
+    <link rel="stylesheet" href="css/dark-mode.css">
 </head>
 <body class="w3-container">
     <h1>Secure DNS profile creator</h1>
     <h2>For iOS 14 or later and macOS Big Sur or later</h2>
     
-    <div class="w3-bar w3-border w3-light-grey">
+    <div class="w3-bar w3-border bar-color">
         <a href="/index.html" class="w3-bar-item w3-button w3-mobile">About</a>
         <a href="/tool.html" class="w3-bar-item w3-button w3-mobile">Tool</a>
         <a href="/premades.html" class="w3-bar-item w3-button w3-mobile">Pre-made profiles</a>
diff --git a/premades.html b/premades.html
index a012054..6f3815e 100644
--- a/premades.html
+++ b/premades.html
@@ -5,14 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>DNS Profile Creator</title>
     <link rel="stylesheet" href="css/w3.css">
-    <link rel="stylesheet" href="css/form.css">
+    <link rel="stylesheet" href="css/dark-mode.css">
     <script src="js/listPage.js"></script>
 </head>
 <body class="w3-container">
     <h1>Secure DNS profile creator</h1>
     <h2>For iOS 14 or later and macOS Big Sur or later</h2>
     
-    <div class="w3-bar w3-border w3-light-grey">
+    <div class="w3-bar w3-border bar-color">
         <a href="/index.html" class="w3-bar-item w3-button w3-mobile">About</a>
         <a href="/tool.html" class="w3-bar-item w3-button w3-mobile">Tool</a>
         <a href="/premades.html" class="w3-bar-item w3-button w3-green w3-mobile">Pre-made profiles</a>
diff --git a/tool.html b/tool.html
index b2e11bf..599b073 100644
--- a/tool.html
+++ b/tool.html
@@ -6,6 +6,7 @@
     <title>DNS Profile Creator</title>
     <link rel="stylesheet" href="css/w3.css">
     <link rel="stylesheet" href="css/form.css">
+    <link rel="stylesheet" href="css/dark-mode.css">
     <script src="js/FileSaver.min.js"></script>
     <script src="js/uuidv4.min.js"></script>
     <script src="js/tool.js"></script>
@@ -14,7 +15,7 @@
     <h1>Secure DNS profile creator</h1>
     <h2>For iOS 14 or later and macOS Big Sur or later</h2>
     
-    <div class="w3-bar w3-border w3-light-grey">
+    <div class="w3-bar w3-border bar-color">
         <a href="/" class="w3-bar-item w3-button w3-mobile">About</a>
         <a href="/tool.html" class="w3-bar-item w3-button w3-green w3-mobile">Tool</a>
         <a href="/premades.html" class="w3-bar-item w3-button w3-mobile">Pre-made profiles</a>
