feat: add night mode (#4)

1 files changed, 79 insertions, 0 deletions

diff --git a/_sass/misc/theme-toggle.scss b/_sass/misc/theme-toggle.scss
new file mode 100644
index 0000000..492eb0c
--- /dev/null
+++ b/_sass/misc/theme-toggle.scss
@@ -0,0 +1,79 @@
+.theme-toggle {
+  position: relative;
+  width: 102px;
+  margin-top: 10px;
+  margin-right: 60px;
+  margin-left: auto;
+  transition: 0.1s all ease-in-out;
+
+  label, .toggle {
+    border-radius: 100px;
+  }
+
+  label {
+    display: block;
+    background-color: rgba(120,120,120,.15);
+    cursor: pointer;
+  }
+
+  .toggle {
+    position: absolute;
+    width: 50%;
+    height: 100%;
+    background-color: #fff;
+    box-shadow: 0 2px 15px rgba(0,0,0,.15);
+    transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  .names {
+    font-size: 1em;
+    font-weight: bolder;
+    width: 76%;
+    margin-left: 12%;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    user-select: none;
+  }
+
+  .dark {
+    opacity: .5;
+  }
+
+  p {
+    color: #acacac;
+    margin-bottom: 0;
+    line-height: 24px;
+  }
+
+  [type="checkbox"] {
+    display: none;
+  }
+
+  /* Toggle */
+  [type="checkbox"]:checked ~ label .toggle {
+    transform: translateX(100%);
+    background-color: #34323D;
+  }
+
+  [type="checkbox"]:checked ~ label .dark{
+    opacity: 1;
+  }
+
+  [type="checkbox"]:checked ~ label .light{
+    opacity: .5;
+  }
+
+  @include media-query(1024px) {
+    margin-right: 35px;
+  }
+
+  @include media-query($on-palm) {
+    width: 94px;
+    margin-right: 20px;
+
+    .names {
+      font-size: .85em;
+    }
+  }
+}