diff --git a/README.md b/README.md
index 987dc62..7933bc8 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,3 @@
-# Some cool CSS effects
+# Dark Mode CSS
-Check my branches and have fun!
-
-View [DEMOS](https://codepen.io/filippoerbisti) on Codepen.
+View and try [DEMO](https://codepen.io/filippoerbisti/pen/qBxXQZz) on Codepen.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5ee3282
--- /dev/null
+++ b/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Dark Mode CSS
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6e893ce
--- /dev/null
+++ b/style.css
@@ -0,0 +1,100 @@
+@import url("https://fonts.googleapis.com/css?family=Oswald");
+:root {
+ --background: #000;
+ --text: #FFF;
+ --highlight: #FF1EAD;
+}
+
+body {
+ background: var(--background);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ transition: 0.5s background ease;
+}
+
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+
+.theme-switch {
+ --background: #FFF;
+ --text: #000;
+ color: var(--text);
+ width: 70px;
+ height: 30px;
+ background: var(--highlight);
+ border-radius: 50px;
+ position: relative;
+}
+.theme-switch .switch {
+ background: white;
+ width: 24px;
+ height: 24px;
+ background: var(--background);
+ border-radius: 100%;
+ position: absolute;
+ top: 3px;
+ left: 4px;
+ transition: 0.5s all ease;
+}
+
+.light-theme {
+ --background: #FFF;
+ --text: #000;
+ background: var(--background);
+}
+.light-theme .theme-switch {
+ background: var(--text);
+}
+.light-theme .theme-switch .switch {
+ transform: translateX(37px);
+}
+.light-theme a {
+ color: var(--text);
+}
+
+.navigation {
+ display: flex;
+ justify-content: center;
+}
+
+ul {
+ display: flex;
+ list-style-type: none;
+}
+ul a {
+ margin: 10px 30px;
+ position: relative;
+ color: var(--text);
+ font-family: "Oswald", sans-serif;
+ font-size: 20px;
+ text-transform: uppercase;
+ text-decoration: none;
+}
+ul a:before {
+ position: absolute;
+ bottom: -2px;
+ content: "";
+ width: 100%;
+ height: 3px;
+ background: var(--highlight);
+ transform: translateX(-100%);
+ opacity: 0;
+}
+ul a:hover:before {
+ opacity: 1;
+ transition: 0.5s transform ease, 0.8s opacity ease;
+ transform: translateX(0);
+}
+ul .active {
+ color: var(--highlight);
+}
+ul .active:hover:before {
+ opacity: 0;
+}
\ No newline at end of file