Implement dark mode

Saabbir · May 30, 2024 · f09980a · f09980a
1 parent 74d9f87
commit f09980a
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 80 deletions.
diff --git a/assets/scss/03-components/_c-article.scss b/assets/scss/03-components/_c-article.scss
@@ -75,4 +75,8 @@
 
 .c-article-img-container {
   box-shadow: 0 4px 44px rgba(0, 0, 0, 0.1);
+
+  img {
+    width: 100%;
+  }
 }
diff --git a/assets/scss/03-components/_c-form.scss b/assets/scss/03-components/_c-form.scss
@@ -5,7 +5,11 @@
   margin-right: auto;
   max-width: 700px;
   overflow: hidden;
-  padding: rem(48px) rem(32px);
+  padding: rem(32px) rem(16px);
+
+  @media (min-width: 768px) {
+    padding: rem(48px) rem(32px);
+  }
 
   @media (min-width: 992px) {
     min-width: 700px;

diff --git a/assets/scss/03-components/_c-navbar.scss b/assets/scss/03-components/_c-navbar.scss
@@ -53,7 +53,8 @@
       opacity: 0;
       overflow-y: auto;
       position: absolute;
-      top: calc(100% + 1px);
+      // top: calc(100% + 1px);
+      top: calc(100%);
       transform: scaleY(0);
       transform-origin: top;
       transition: 0.2s;

diff --git a/assets/scss/dark-mode.scss b/assets/scss/dark-mode.scss
@@ -0,0 +1,95 @@
+@media (prefers-color-scheme: dark) {
+  /**
+   * Dark mode
+   *
+   * https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
+   */
+  body {
+    background: #222831;
+    color: #eee;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  strong,
+  .c-navbar__brand,
+  .c-social-media__name,
+  .c-portfolio__stats dt,
+  .c-pagination__link-label,
+  .c-table th {
+    color: #e0e0e0;
+  }
+
+  .c-footer__copyright::after {
+    color: #1e242c;
+  }
+
+  .c-navbar {
+    background: #121212;
+  }
+
+  .c-navbar__menu-link::after {
+    background-color: #36373d;
+  }
+
+  hr {
+    background-color: #393e46;
+  }
+
+  .c-table tr:nth-child(even),
+  .c-table thead tr {
+    background-color: #393e46;
+  }
+
+  .c-table th,
+  .c-table td {
+    border-color: #393e46;
+  }
+
+  .section--contact-copy,
+  .c-social-media {
+    background-color: rgba(0, 197, 142, 0.1);
+  }
+
+  .c-social-media {
+    border-color: #108775;
+  }
+
+  .c-form__control,
+  .c-search-input {
+    background-color: #222831;
+    border-color: #222831;
+    color: #fff;
+  }
+
+  .c-search-input {
+    &:focus {
+      // box-shadow: 0 0 0 0.125rem #108775;
+      box-shadow: none;
+    }
+  }
+
+  .c-navbar__nav {
+    @media (max-width: 767px) {
+      background-color: #222831;
+      border-color: #121212;
+    }
+  }
+
+  .u-bg-gray-dark {
+    background-color: #222831;
+  }
+
+  .c-portfolio-card {
+    background-color: #393e46;
+  }
+
+  .c-blog-post {
+    background-color: #263238;
+    border-color: rgba(0, 197, 142, 0.1);
+  }
+}
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
@@ -1,14 +1,10 @@
-/*
-
-This project follows Sass architecture inspired by following articles:
-
-- https://css-irl.info/a-modern-front-end-workflow-part-3/
-
-- https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
-
-- https://zellwk.com/blog/css-architecture-3/
-
-*/
+/**
+ * This project follows Sass architecture inspired by following articles:
+ *
+ * https://css-irl.info/a-modern-front-end-workflow-part-3/
+ * https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
+ * https://zellwk.com/blog/css-architecture-3/
+ */
 
 // 01. CONFIG
 @import "./01-config/config.scss";
@@ -22,70 +18,4 @@ This project follows Sass architecture inspired by following articles:
 // 04. UTILITIES
 @import "./04-utilities/utilities.scss";
 
-@media (prefers-color-scheme: dark) {
-  /**
-   * Read more:
-   * https://dev.to/akhilarjun/one-line-dark-mode-using-css-24li
-   */
-  // html {
-  //   filter: invert(1) hue-rotate(180deg);
-
-  //   img {
-  //     filter: invert(1) hue-rotate(180deg);
-  //   }
-  // }
-
-  /**
-   * https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
-   */
-  body {
-    color: #eee;
-    background: #222831;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  strong,
-  .c-navbar__brand,
-  .c-social-media__name,
-  .c-portfolio__stats dt,
-  .c-pagination__link-label,
-  .c-table th {
-    color: #e0e0e0;
-  }
-
-  .c-footer__copyright::after {
-    color: #1e242c;
-  }
-
-  .c-navbar {
-    background: #121212;
-  }
-
-  .c-navbar__menu-link::after {
-    background-color: #36373d;
-  }
-
-  .c-blog-post {
-    background-color: #393e46;
-    border: 0.0625rem solid #222831;
-  }
-
-  hr {
-    background-color: #393e46;
-  }
-
-  .c-table tr:nth-child(even),
-  .c-table thead tr {
-    background-color: #393e46;
-  }
-
-  .c-table th,
-  .c-table td {
-    border-color: #393e46;
-  }
-}
+@import "./dark-mode.scss";