website: support dark mode for Carbon

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;
+}

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} />