WIP: adding necessary changes to view as dark mode

css/dropdown.css

@@ -27,6 +27,13 @@
   padding-left: 1.5625rem;
   background-repeat: no-repeat;
 }
+@media (prefers-color-scheme: dark) {
+  .enable-drawer > .enable-drawer__button {
+    color: #fff;
+    background-color: #222;
+    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2292px%22%20height%3D%2292px%22%20viewBox%3D%220%200%2092%2092%22%20xml%3Aspace%3D%22preserve%22%20fill%20%3D%20%22white%22%3E%3Cpath%20id%3D%22XMLID_933_%22%20d%3D%22M72.5%2046.5c0%202.5-2%204.5-4.5%204.5H50v17c0%202.5-2%204.5-4.5%204.5S41%2070.5%2041%2068V51H24c-2.5%200-4.5-2-4.5-4.5s2-4.5%204.5-4.5h17V24c0-2.5%202-4.5%204.5-4.5s4.5%202%204.5%204.5v18h18c2.5%200%204.5%202%204.5%204.5z%22%2F%3E%3Cmetadata%3E%3Crdf%3ARDF%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Ardfs%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2F01%2Frdf-schema%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%3E%3Crdf%3ADescription%20about%3D%22https%3A%2F%2Ficonscout.com%2Flegal%23licenses%22%20dc%3Atitle%3D%22plus%22%20dc%3Adescription%3D%22plus%22%20dc%3Apublisher%3D%22Iconscout%22%20dc%3Adate%3D%222017-09-24%22%20dc%3Aformat%3D%22image%2Fsvg%2Bxml%22%20dc%3Alanguage%3D%22en%22%3E%3Cdc%3Acreator%3E%3Crdf%3ABag%3E%3Crdf%3Ali%3EAmit%20Jakhu%3C%2Frdf%3Ali%3E%3C%2Frdf%3ABag%3E%3C%2Fdc%3Acreator%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3C%2Fsvg%3E");
+  }
+}
 .enable-drawer > .enable-drawer__button::-webkit-details-marker {
   display: none;
 }
@@ -41,6 +48,12 @@
 .enable-drawer .enable-drawer__button[aria-expanded="true"] {
   background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2292px%22%20height%3D%2292px%22%20viewBox%3D%220%200%2092%2092%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20id%3D%22XMLID_38_%22%20d%3D%22M68%2050.5H24c-2.5%200-4.5-2-4.5-4.5s2-4.5%204.5-4.5h44c2.5%200%204.5%202%204.5%204.5s-2%204.5-4.5%204.5z%22%2F%3E%3Cmetadata%3E%3Crdf%3ARDF%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Ardfs%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2F01%2Frdf-schema%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%3E%3Crdf%3ADescription%20about%3D%22https%3A%2F%2Ficonscout.com%2Flegal%23licenses%22%20dc%3Atitle%3D%22minus%22%20dc%3Adescription%3D%22minus%22%20dc%3Apublisher%3D%22Iconscout%22%20dc%3Adate%3D%222017-09-24%22%20dc%3Aformat%3D%22image%2Fsvg%2Bxml%22%20dc%3Alanguage%3D%22en%22%3E%3Cdc%3Acreator%3E%3Crdf%3ABag%3E%3Crdf%3Ali%3EAmit%20Jakhu%3C%2Frdf%3Ali%3E%3C%2Frdf%3ABag%3E%3C%2Fdc%3Acreator%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3C%2Fsvg%3E");
 }
+@media (prefers-color-scheme: dark) {
+  .enable-drawer[open] > .enable-drawer__button,
+  .enable-drawer .enable-drawer__button[aria-expanded="true"] {
+    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2292px%22%20height%3D%2292px%22%20viewBox%3D%220%200%2092%2092%22%20xml%3Aspace%3D%22preserve%22%20fill%20%3D%20%22white%22%3E%3Cpath%20id%3D%22XMLID_38_%22%20d%3D%22M68%2050.5H24c-2.5%200-4.5-2-4.5-4.5s2-4.5%204.5-4.5h44c2.5%200%204.5%202%204.5%204.5s-2%204.5-4.5%204.5z%22%2F%3E%3Cmetadata%3E%3Crdf%3ARDF%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Ardfs%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2F01%2Frdf-schema%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%3E%3Crdf%3ADescription%20about%3D%22https%3A%2F%2Ficonscout.com%2Flegal%23licenses%22%20dc%3Atitle%3D%22minus%22%20dc%3Adescription%3D%22minus%22%20dc%3Apublisher%3D%22Iconscout%22%20dc%3Adate%3D%222017-09-24%22%20dc%3Aformat%3D%22image%2Fsvg%2Bxml%22%20dc%3Alanguage%3D%22en%22%3E%3Cdc%3Acreator%3E%3Crdf%3ABag%3E%3Crdf%3Ali%3EAmit%20Jakhu%3C%2Frdf%3Ali%3E%3C%2Frdf%3ABag%3E%3C%2Fdc%3Acreator%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3C%2Fsvg%3E");
+  }
+}
 .enable-drawer__content {
   display: none;
 }

css/enable-flyout.css

@@ -582,6 +582,32 @@
     filter: none;
   }
 }
+@media only screen and (min-width: 960px) and (prefers-color-scheme: dark) {
+  .enable-flyout--is-open .enable-flyout__level {
+    color: white;
+    background: #222;
+  }
+}
+@media only screen and (min-width: 960px) and (prefers-color-scheme: dark) {
+  .enable-flyout__list--photo-layout .enable-flyout__link:hover,
+  .enable-flyout__list--photo-layout .enable-flyout__link:focus {
+    color: white;
+    background: #222;
+  }
+}
+@media only screen and (min-width: 960px) and (prefers-color-scheme: dark) {
+  .enable-flyout--is-open {
+    color: white;
+    background: #222;
+  }
+}
+@media only screen and (min-width: 960px) and (prefers-color-scheme: dark) {
+  .enable-flyout--is-open .enable-flyout__open-level-button,
+  .enable-flyout--is-open .enable-flyout__close-level-button,
+  .enable-flyout--is-open .enable-flyout__link {
+    color: white;
+  }
+}
 @keyframes enable-flyout__anim--mobile-open {
   0% {
     right: calc(-1 * min(75vw, 350px));

css/enable-visible-on-focus.css

@@ -114,3 +114,13 @@
 .fake-component a {
   color: #330000;
 }
+@media (prefers-color-scheme: dark) {
+  .fake-component {
+    background: #222;
+    color: white;
+    border: solid 1px #111;
+  }
+  .fake-component a {
+    color: #fdfbcc;
+  }
+}

css/figure.css

@@ -65,3 +65,8 @@ a.tile-cta::after {
   transform: scale(0.8) translateY(0.375rem);
   display: inline-block;
 }
+@media (prefers-color-scheme: dark) {
+  figure {
+    background: #222;
+  }
+}

css/heading.css

@@ -55,6 +55,12 @@ div.heading-example [role="heading"][aria-level="1"] {
   text-transform: uppercase;
   text-shadow: 0 2px white, 0 3px #777;
 }
+@media (prefers-color-scheme: dark) {
+  div.heading-example h1,
+  div.heading-example [role="heading"][aria-level="1"] {
+    color: #ccc;
+  }
+}
 div.heading-example h2,
 div.heading-example h5 [role="heading"][aria-level="2"],
 div.heading-example [role="heading"][aria-level="5"] {
@@ -64,6 +70,13 @@ div.heading-example [role="heading"][aria-level="5"] {
   font-family: "Orienta", sans-serif;
   border: none;
 }
+@media (prefers-color-scheme: dark) {
+  div.heading-example h2,
+  div.heading-example h5 [role="heading"][aria-level="2"],
+  div.heading-example [role="heading"][aria-level="5"] {
+    color: #ddd;
+  }
+}
 div.heading-example h2,
 div.heading-example [role="heading"][aria-level="2"] {
   font-size: 33px;
@@ -86,6 +99,14 @@ div.heading-example [role="heading"][aria-level="6"] {
   letter-spacing: 1px;
   font-style: italic;
 }
+@media (prefers-color-scheme: dark) {
+  div.heading-example h3,
+  div.heading-example h6,
+  div.heading-example [role="heading"][aria-level="3"],
+  div.heading-example [role="heading"][aria-level="6"] {
+    color: #ddd;
+  }
+}
 div.heading-example h3,
 div.heading-example [role="heading"][aria-level="3"] {
   font-size: 30px;
@@ -103,6 +124,12 @@ div.heading-example [role="heading"][aria-level="7"] {
   font-weight: normal;
   font-family: "Orienta", sans-serif;
 }
+@media (prefers-color-scheme: dark) {
+  div.heading-example h4,
+  div.heading-example [role="heading"][aria-level="7"] {
+    color: #ddd;
+  }
+}
 div.heading-example h4,
 div.heading-example [role="heading"][aria-level="4"] {
   font-size: 25px;
@@ -112,3 +139,11 @@ div.heading-example [role="heading"][aria-level="7"] {
   font-size: 18px;
   line-height: 20px;
 }
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #222;
+  }
+  div.heading-example {
+    text-shadow: 0 2px 0 rgba(32, 32, 32, 0.7);
+  }
+}