fix(theme): dark mode support

compodoc · Jul 13, 2021 · 0c7a052 · 0c7a052
1 parent fd89772
commit 0c7a052
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 48 deletions.
diff --git a/src/resources/styles/laravel.css b/src/resources/styles/laravel.css
@@ -1,15 +1,24 @@
+.nav-tabs > li > a {
+    text-decoration: none;
+}
+
 .navbar-default .navbar-brand {
     color: #f4645f;
     text-decoration: none;
     font-size: 16px;
 }
 
-.menu ul.list li a[data-type="chapter-link"], .menu ul.list li.chapter .simple {
+.menu ul.list li a[data-type='chapter-link'],
+.menu ul.list li.chapter .simple {
     color: #525252;
-    border-bottom: 1px dashed rgba(0,0,0,.1);
+    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
 }
 
-.content h1, .content h2, .content h3, .content h4, .content h5 {
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5 {
     color: #292e31;
     font-weight: normal;
 }
@@ -54,16 +63,53 @@ code {
     color: #b93d6a;
     font-size: 13px;
     line-height: 20px;
-    box-shadow: 0 1px 1px rgba(0,0,0,.125);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
 }
 
 pre {
     margin: 0;
     padding: 12px 12px;
-    background: rgba(238,238,238,.35);
+    background: rgba(238, 238, 238, 0.35);
     border-radius: 3px;
     font-size: 13px;
     line-height: 1.5em;
     font-weight: 500;
-    box-shadow: 0 1px 1px rgba(0,0,0,.125);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        color: #fafafa;
+    }
+    .content h1,
+    .content h2,
+    .content h3,
+    .content h4,
+    .content h5 {
+        color: #fafafa;
+    }
+
+    code {
+        background: none;
+    }
+
+    .content {
+        color: #fafafa;
+    }
+
+    .menu ul.list li a[data-type='chapter-link'],
+    .menu ul.list li.chapter .simple {
+        color: #fafafa;
+    }
+
+    .menu ul.list li.title a {
+        color: #fafafa;
+    }
+
+    .menu ul.list li a {
+        color: #fafafa;
+    }
+    .menu ul.list li a.active {
+        color: #7fc9ff;
+    }
 }
diff --git a/src/resources/styles/material.css b/src/resources/styles/material.css
@@ -12,7 +12,8 @@ a:hover {
     text-decoration: none;
 }
 
-.menu ul.list li a:hover, .menu ul.list li.chapter .simple:hover {
+.menu ul.list li a:hover,
+.menu ul.list li.chapter .simple:hover {
     background-color: #f8f9fa;
     text-decoration: none;
 }
@@ -33,7 +34,8 @@ a:hover {
 /** CARD **/
 
 .card {
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+        0 1px 5px 0 rgba(0, 0, 0, 0.12);
     border-radius: 0.125rem;
     border: 0;
     margin-top: 1px;
@@ -60,7 +62,9 @@ a:hover {
     color: rgba(0, 0, 0, 0.54);
     margin-right: 0;
 }
-.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:focus,
+.nav-tabs > li.active > a:hover {
     color: rgba(0, 0, 0, 0.87);
     border-top: 0;
     border-left: 0;
@@ -69,7 +73,8 @@ a:hover {
     border-color: #008cff;
     font-weight: bold;
 }
-.nav>li>a:focus, .nav>li>a:hover {
+.nav > li > a:focus,
+.nav > li > a:hover {
     background: none;
 }
 
@@ -90,13 +95,13 @@ a:hover {
     border-radius: 0.125rem;
 }
 
-pre[class*="language-"] {
+pre[class*='language-'] {
     border-radius: 0.125rem;
 }
 
 /** TABLE **/
 
-.table-hover>tbody>tr:hover {
+.table-hover > tbody > tr:hover {
     background: rgba(0, 0, 0, 0.075);
 }
 
@@ -106,4 +111,23 @@ table.params thead {
 table.params thead td {
     color: rgba(0, 0, 0, 0.54);
     font-weight: bold;
-}
+}
+
+@media (prefers-color-scheme: dark) {
+    .menu .title:hover {
+        background-color: #2d2d2d;
+    }
+    .menu ul.list li a:hover,
+    .menu ul.list li.chapter .simple:hover {
+        background-color: #2d2d2d;
+    }
+    .nav-tabs > li > a {
+        color: #fafafa;
+    }
+    table.params thead {
+        background: #484848;
+    }
+    table.params thead td {
+        color: #fafafa;
+    }
+}
diff --git a/src/resources/styles/original.css b/src/resources/styles/original.css
@@ -1,17 +1,17 @@
-.navbar-default .navbar-brand, .menu ul.list li.title {
+.navbar-default .navbar-brand,
+.menu ul.list li.title {
     font-weight: bold;
     color: #3c3c3c;
     padding-bottom: 5px;
 }
 
-.menu ul.list li a[data-type="chapter-link"], .menu ul.list li.chapter .simple {
+.menu ul.list li a[data-type='chapter-link'],
+.menu ul.list li.chapter .simple {
     font-weight: bold;
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
     font-size: 14px;
 }
 
-.menu ul.list li a[href="./routes.html"] {
+.menu ul.list li a[href='./routes.html'] {
     border-bottom: none;
 }
 
@@ -34,7 +34,7 @@
 }
 
 .menu ul.list li a.active {
-    color: inherit;
+    color: #337ab7;
     font-weight: bold;
 }
 
@@ -45,3 +45,9 @@
 .menu ul.list li.divider {
     margin: 0;
 }
+
+@media (prefers-color-scheme: dark) {
+    .menu ul.list li.chapter ul.links {
+        background: none;
+    }
+}
diff --git a/src/resources/styles/postmark.css b/src/resources/styles/postmark.css
@@ -1,5 +1,5 @@
 .navbar-default {
-    background: #FFDE00;
+    background: #ffde00;
     border: none;
 }
 
@@ -18,7 +18,7 @@
 }
 
 .menu ul.list li.title {
-    background: #FFDE00;
+    background: #ffde00;
     color: #333;
     padding-bottom: 5px;
 }
@@ -41,7 +41,7 @@
 
 .menu ul.list li.chapter ul.links a:hover,
 .menu ul.list li.chapter ul.links a.active {
-    color: #FFDE00;
+    color: #ffde00;
 }
 
 .menu ul.list li.chapter ul.links {
@@ -68,7 +68,7 @@
 }
 
 .content a {
-    color: #007DCC;
+    color: #007dcc;
 }
 
 .content a:visited {
@@ -93,8 +93,8 @@
     background: rgba(255, 255, 255, 0.1);
 }
 
-.breadcrumb>li+li:before {
-    content: "»\00a0"
+.breadcrumb > li + li:before {
+    content: '»\00a0';
 }
 
 .breadcrumb {
@@ -105,7 +105,7 @@
 code {
     white-space: nowrap;
     max-width: 100%;
-    background: #F5F5F5;
+    background: #f5f5f5;
     padding: 2px 5px;
     color: #666666;
     overflow-x: auto;
@@ -222,3 +222,19 @@ hue-6-2: #c18401
 .hljs-link {
     text-decoration: underline;
 }
+
+@media (prefers-color-scheme: dark) {
+    .content {
+        background: none;
+    }
+    code {
+        background: none;
+        color: #e09393;
+    }
+    .menu ul.list li.chapter a.active {
+        color: #ffde00;
+    }
+    .menu {
+        background: #272525;
+    }
+}
diff --git a/src/resources/styles/readthedocs.css b/src/resources/styles/readthedocs.css
@@ -1,5 +1,5 @@
 .navbar-default {
-    background: #2980B9;
+    background: #2980b9;
     border: none;
 }
 
@@ -16,12 +16,8 @@
     color: #fcfcfc;
 }
 
-.menu ul.list li a.active {
-    color: #0099e5;
-}
-
 .menu ul.list li.title {
-    background: #2980B9;
+    background: #2980b9;
     padding-bottom: 5px;
 }
 
@@ -43,7 +39,12 @@
 }
 
 .menu ul.list li.chapter ul.links a:hover {
-    background: #4E4A4A;
+    background: #4e4a4a;
+}
+
+.menu ul.list li.chapter a.active,
+.menu ul.list li.chapter ul.links a.active {
+    color: #0099e5;
 }
 
 .menu ul.list li.chapter ul.links {
@@ -70,15 +71,15 @@
 }
 
 .content a {
-    color: #2980B9;
+    color: #2980b9;
 }
 
 .content a:hover {
     color: #3091d1;
 }
 
 .content a:visited {
-    color: #9B59B6;
+    color: #9b59b6;
 }
 
 .menu ul.list li:nth-last-child(2) {
@@ -90,7 +91,7 @@ code {
     max-width: 100%;
     background: #fff;
     padding: 2px 5px;
-    color: #E74C3C;
+    color: #e74c3c;
     overflow-x: auto;
     border-radius: 0;
 }
@@ -104,5 +105,15 @@ pre {
     display: block;
     overflow: auto;
     color: #404040;
-    background: rgba(238, 238, 238, .35);
+    background: rgba(238, 238, 238, 0.35);
+}
+
+@media (prefers-color-scheme: dark) {
+    .content {
+        background: none;
+    }
+    code {
+        background: none;
+        color: #e09393;
+    }
 }