From cde62043ea098d9e6adf8b232a2561d45a4a0db2 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Wed, 16 Mar 2022 10:15:47 +0800
Subject: [PATCH] website: support dark mode for Carbon

---
 website/src/css/custom.css         | 13 ++++++++++---
 website/src/theme/DocItem/index.js |  9 +++++----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index b19942f0..1aaef66c 100755
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -168,13 +168,17 @@ html[data-theme='dark'] .navbar-icon-telegram:before {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
-}
-#carbonads {
   display: flex;
-  max-width: 330px;
   background-color: hsl(0, 0%, 98%);
   box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
   z-index: 100;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+}
+html[data-theme='dark'] #carbonads {
+  background-color: hsl(0, 0%, 15%);
+  box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.085), 0 0 2px hsl(0deg 0% 0% / 0.085),
+    0 0 4px hsl(0deg 0% 0% / 0.085), 0 0 8px hsl(0deg 0% 0% / 0.085);
 }
 #carbonads a {
   color: inherit;
@@ -221,3 +225,6 @@ html[data-theme='dark'] .navbar-icon-telegram:before {
   bottom: 0;
   right: 0;
 }
+html[data-theme='dark'] #carbonads .carbon-poweredby {
+  background: #1e2021;
+}
diff --git a/website/src/theme/DocItem/index.js b/website/src/theme/DocItem/index.js
index 10148ec3..d919f8df 100644
--- a/website/src/theme/DocItem/index.js
+++ b/website/src/theme/DocItem/index.js
@@ -78,7 +78,8 @@ export default function DocItem(props) {
                     <Heading as="h1">{title}</Heading>
                   </header>
                 )}
-                <div className="margin--md">
+                <DocItemFooter {...props} />
+                <div className="margin-top--md">
                   <script
                     async
                     type="text/javascript"
@@ -86,9 +87,9 @@ export default function DocItem(props) {
                     id="_carbonads_js"
                   />
                 </div>
-                <DocItemFooter {...props} />
-                <br />
-                <DocContent />
+                <div className="margin-top--md">
+                  <DocContent />
+                </div>
               </div>
             </article>
             <DocPaginator previous={metadata.previous} next={metadata.next} />