Merge pull request #50 from grvpanchal/dark-mode

Enable Dark Mode
2023-08-10 21:13:07 +03:00 · 2020-05-16 14:18:33 -04:00 · 2020-05-16 14:18:33 -04:00 · 954ac66fe7
commit 954ac66fe7
parent 2806b45f69 982c33dafa
9 changed files with 99 additions and 23 deletions
--- a/dist/chota.css
+++ b/dist/chota.css
@ -1,5 +1,7 @@
 /*! chota.css v0.7.2 | MIT License | github.com/jenil/chota */
 :root {
+  --bg-color: #ffffff;
+  --bg-secondary-color: #f3f3f6;
  --color-primary: #14854F;
  --color-lightGrey: #d2d6dd;
  --color-grey: #747681;
@ -9,24 +11,29 @@
  --grid-maxWidth: 120rem;
  --grid-gutter: 2rem;
  --font-size: 1.6rem;
+  --font-color: #333333;
  --font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next",
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
 }
-* {
+html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
-}
-html {
  font-size: 62.5%;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
 }
+*, *:before, *:after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
 body {
+  background-color: var(--bg-color);
  line-height: 1.6;
  font-size: var(--font-size);
+  color: var(--font-color);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/
  font-family: var(--font-family-sans);
  margin: 0;
@ -73,7 +80,7 @@ p {
  margin-top: 0;
 }
 blockquote {
-  background-color: #f3f3f6;
+  background-color: var(--bg-secondary-color);
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--color-lightGrey);
 }
@ -94,7 +101,7 @@ table {
  text-align: left;
 }
 table.striped tr:nth-of-type(2n) {
-  background-color: #f3f3f6;
+  background-color: var(--bg-secondary-color);
 }
 td,
 th {
@ -120,12 +127,11 @@ kbd {
  font-size: 90%;
  white-space: pre-wrap;
  border-radius: 4px;
-  color: #d43939;
  padding: 0.2em 0.4em;
-  background-color: #f3f3f6;
+  background-color: var(--bg-secondary-color);
 }
 pre {
-  background-color: #f3f3f6;
+  background-color: var(--bg-secondary-color);
  font-size: 1em;
  padding: 1rem;
  overflow-x: auto;
@ -727,9 +733,9 @@ button:disabled:hover {
 .card {
    padding: 1rem 2rem;
    border-radius: 4px;
-    background: white;
-    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    background: var(--bg-color);
+    -webkit-box-shadow: 0 1px 3px var(--color-grey);
+            box-shadow: 0 1px 3px var(--color-grey);
 }
 .card p:last-child {
  margin: 0;
--- a/dist/chota.min.css
+++ b/dist/chota.min.css
--- a/docs/doc-styles.css
+++ b/docs/doc-styles.css
@ -1,3 +1,11 @@
+body.dark {
+    --bg-color: #000;
+    --bg-secondary-color: #131316;
+    --font-color: #f5f5f5;
+    --color-grey: #ccc;
+    --color-darkGrey: #777;
+}
+
 body>.container {
    max-width: 720px;
 }
@ -26,6 +34,10 @@ body>footer {
    padding: 4rem;
 }

+body.dark>footer {
+    background-color: #1a1a1a;
+}
+
 section {
    margin: 5rem auto;
 }
@ -69,7 +81,7 @@ hr {
    margin-left: .5rem;
 }

-.highlight, code { background-color: #f1f5f5; }
+.highlight, code { background-color: var(--bg-secondary-color); }
 .highlight .c { color: #93a1a1 } /* Comment */
 .highlight .err { color: #586e75 } /* Error */
 .highlight .g { color: #586e75 } /* Generic */
--- a/docs/index.html
+++ b/docs/index.html
@ -9,6 +9,8 @@
  <title>chota - A micro CSS framework</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/chota">
+  <!-- for dev -->
+  <!-- <link rel="stylesheet" href="./dist/chota.css"> -->
  <link rel="stylesheet" href="./doc-styles.css">
  <link rel="icon" type="image/png" href="favicon.png" />
 </head>
@ -26,6 +28,7 @@
        <a href="#start">start</a>
        <a href="#docs">docs</a>
        <a href="https://github.com/jenil/chota">GitHub</a>
+        <a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
      </nav>
    </div>

@ -38,6 +41,7 @@
        <li>🌈&nbsp; Easy to <a href="#customizing">extend</a> with CSS variables</li>
        <li>🎲&nbsp; Comes with a handful of <a href="#components">components</a> &amp; <a href="#utilities">utilities</a></li>
        <li>✅&nbsp; Good Semantics</li>
+        <li>🌙&nbsp; Easy dark mode switch</li>
        <li>🤡&nbsp; Supports <a href="#icons">icons</a> out-of-the-box</li>
      </ul>
    </section>
@ -107,6 +111,25 @@
 }

 /* Other styles..... */
+{% endhighlight %}
+<br>
+<p>Addtionally, you can add dark mode to you site, to support devices that prefer dark mode.</p>
+{% highlight html %}
+  <style>
+    body.dark {
+      --bg-color: #000;
+      --bg-secondary-color: #131316;
+      --font-color: #f5f5f5;
+      --color-grey: #ccc;
+      --color-darkGrey: #777;
+    }
+  </style>
+  <script>
+    if (window.matchMedia &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.body.classList.add('dark');
+    }
+  </script>
 {% endhighlight %}
    </section>
    <section id="components">
@ -153,6 +176,7 @@
    <p>Want icons for your project too? Checkout <a href="https://icongr.am" target="_blank">Icongr.am 🚀</a></p>
    <h5>Made by <a href="https://jgog.in" target="_blank">Jenil Gogari</a></h5>
  </footer>
+  <script src="./main.js"></script>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
--- a/docs/main.js
+++ b/docs/main.js
@ -0,0 +1,6 @@
+function switchMode(el) {
+  const bodyClass = document.body.classList;
+  bodyClass.contains('dark')
+    ? (el.innerHTML = '☀️', bodyClass.remove('dark'))
+    : (el.innerHTML = '🌙', bodyClass.add('dark')); 
+}
--- a/src/_base.css
+++ b/src/_base.css
@ -1,4 +1,6 @@
 :root {
+  --bg-color: #ffffff;
+  --bg-secondary-color: #f3f3f6;
  --color-primary: #14854F;
  --color-lightGrey: #d2d6dd;
  --color-grey: #747681;
@ -8,6 +10,7 @@
  --grid-maxWidth: 120rem;
  --grid-gutter: 2rem;
  --font-size: 1.6rem;
+  --font-color: #333333;
  --font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next",
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
@ -27,8 +30,10 @@ html {
 }

 body {
+  background-color: var(--bg-color);
  line-height: 1.6;
  font-size: var(--font-size);
+  color: var(--font-color);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/
  font-family: var(--font-family-sans);
  margin: 0;
@ -87,7 +92,7 @@ p {
 }

 blockquote {
-  background-color: #f3f3f6;
+  background-color: var(--bg-secondary-color);
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--color-lightGrey);
 }
@ -112,7 +117,7 @@ table {
 }

 table.striped tr:nth-of-type(2n) {
-  background-color: #f3f3f6;
+  background-color: var(--bg-secondary-color);
 }

 td,
@ -143,13 +148,12 @@ kbd {
  font-size: 90%;
  white-space: pre-wrap;
  border-radius: 4px;
-  color: #d43939;
  padding: 0.2em 0.4em;
-  background-color: #f3f3f6;
+  background-color: var(--bg-secondary-color);
 }

 pre {
-  background-color: #f3f3f6;
+  background-color: var(--bg-secondary-color);
  font-size: 1em;
  padding: 1rem;
  overflow-x: auto;
--- a/src/_card.css
+++ b/src/_card.css
@ -1,8 +1,8 @@
 .card {
    padding: 1rem 2rem;
    border-radius: 4px;
-    background: white;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    background: var(--bg-color);
+    box-shadow: 0 1px 3px var(--color-grey);
 }

 .card p:last-child {
--- a/test/components.html
+++ b/test/components.html
@ -10,13 +10,25 @@
    .nav {
      border: 1px solid red;
    }    
+    
+    body.dark {
+      --bg-color: #000;
+      --bg-secondary-color: #131316;
+      --font-color: #f5f5f5;
+      --color-grey: #ccc;
+      --color-darkGrey: #777;
+    }
  </style>
 </head>

 <body>
  <div class="container">
+    <h1 class="pull-right" style="margin: 0;">
+      <a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
+    </h1>
    <h1>Nav</h1>
  </div>
+  <div class="clearfix" ></div>
  <nav class="nav">
    <div class="container">
      <div class="nav-left">
@ -414,6 +426,7 @@
  <p>
    <br>
  </p>
+  <script src="../docs/main.js"></script>
 </body>

 </html>
--- a/test/index.html
+++ b/test/index.html
@ -6,15 +6,25 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Elements</title>
  <link rel="stylesheet" href="../dist/chota.css">
-  
-  <!-- For dev -->
-  <!-- <link rel="stylesheet" href="../dist/chota.css"> -->
+  <style>
+    body.dark {
+      --bg-color: #000;
+      --bg-secondary-color: #131316;
+      --font-color: #f5f5f5;
+      --color-grey: #ccc;
+      --color-darkGrey: #777;
+    }
+  </style>
 </head>

 <body>
  <div id="top" class="container" role="document">
    <header role="banner">
+      <h1 class="pull-right" style="margin: 0;">
+        <a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
+      </h1>
      <h1>Chota CSS</h1>
+      <div class="clearfix"></div>
      <p>A small CSS framework.</p>
    </header>
    <nav role="navigation">
@ -534,6 +544,7 @@
      </section>
    </main>
  </div>
+  <script src="../docs/main.js"></script>
 </body>

 </html>