feat: apply dark mode to ads (#123)

Co-authored-by: David Cruz <david@studentfinance.com>

public/carbonads.css

@@ -11,6 +11,7 @@
   display: flex;
   max-width: 330px;
   background-color: hsl(0, 0%, 98%);
+  background-color: var(--bg-color);
   box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
   z-index: 100;
   position: absolute;
@@ -30,13 +31,16 @@
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  #carbonads {
+    background-color: var(--bg-color-elevation1);
+  }
+}
+
 #carbonads a {
-  color: var(--text-color-light);
+  color: var(--text-color);
   text-decoration: none;
 }
-#carbonads a:hover {
-  color: initial;
-}
 #carbonads span {
   position: relative;
   display: block;
@@ -64,6 +68,7 @@
   display: block;
   padding: 6px 8px;
   background: #f1f1f2;
+  color: var(--text-color-light);
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -76,6 +81,13 @@
   right: 0;
 }
 
+@media (prefers-color-scheme: dark) {
+  #carbonads .carbon-poweredby{
+    background-color: var(--interactive);
+    color: var(--text-color);
+  }
+}
+
 @media only screen and (min-width: 320px) and (max-width: 759px) {
   #ads {
     margin-bottom: 4rem;

src/components/Footer/Footer.module.css

@@ -4,7 +4,7 @@
 }
 
 .container a {
-  color: #d0383e;
+  color: var(--interactive);
 }
 
 .social {

src/components/Header/Header.module.css

@@ -9,7 +9,7 @@
 .link {
   display: flex;
   text-decoration: none;
-  color: #d0383e;
+  color: var(--interactive);
 }
 
 .title {

src/components/Thumbnail/Thumbnail.module.css

@@ -4,7 +4,7 @@
   flex-direction: column;
   overflow: hidden;
   color: #fff;
-  background-color: #d0383e;
+  background-color: var(--interactive);
   border-radius: 0.25rem;
   box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
 }

src/components/Usage/Usage.module.css

@@ -23,7 +23,7 @@
   display: flex;
   align-items: center;
   margin-left: 0.5em;
-  background-color: #d0383e;
+  background-color: var(--interactive);
   color: #fff;
   border: none;
   cursor: pointer;
@@ -65,6 +65,6 @@
 @media (prefers-color-scheme: dark) {
   .container pre,
   .container code {
-    background-color: #444;
+    background-color: var(--bg-color-elevation1);
   }
 }

src/index.css

@@ -9,6 +9,8 @@
   --text-color-light: #000;
   --bg-color-dark: #222;
   --text-color-dark: #fff;
+  --bg-color-elevation1: #444;
+  --interactive: #d0383e;
 
   --text-color: var(--text-color-light);
   --bg-color: var(--bg-color-light);