diff --git a/src/templates/languages.svg b/src/templates/languages.svg
index 2d3aded586d..9f53722a699 100644
--- a/src/templates/languages.svg
+++ b/src/templates/languages.svg
@@ -1,4 +1,4 @@
-<svg id="gh-dark-mode-only" width="360" height="210" xmlns="http://www.w3.org/2000/svg">
+<svg id="portable-dark-mode-support" width="360" height="210" xmlns="http://www.w3.org/2000/svg">
 <style>
 svg {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
@@ -9,18 +9,11 @@ svg {
 #background {
   width: calc(100% - 10px);
   height: calc(100% - 10px);
-  fill: white;
   stroke: rgb(225, 228, 232);
-  stroke-width: 1px;
   rx: 6px;
   ry: 6px;
 }
 
-#gh-dark-mode-only:target #background {
-  fill: #0d1117;
-  stroke-width: 0.5px;
-}
-
 foreignObject {
   width: calc(100% - 10px - 32px);
   height: calc(100% - 10px - 24px);
@@ -32,13 +25,6 @@ h2 {
   line-height: 24px;
   font-size: 16px;
   font-weight: 600;
-  color: rgb(36, 41, 46);
-  fill: rgb(36, 41, 46);
-}
-
-#gh-dark-mode-only:target h2 {
-  color: #c9d1d9;
-  fill: #c9d1d9;
 }
 
 ul {
@@ -71,55 +57,91 @@ div.ellipsis {
 }
 
 .octicon {
-  fill: rgb(88, 96, 105);
   margin-right: 0.5ch;
   vertical-align: top;
 }
 
-#gh-dark-mode-only:target .octicon {
-  color: #8b949e;
-  fill: #8b949e;
-}
-
 .progress {
   display: flex;
   height: 8px;
   overflow: hidden;
-  background-color: rgb(225, 228, 232);
   border-radius: 6px;
   outline: 1px solid transparent;
   margin-bottom: 1em;
 }
 
-#gh-dark-mode-only:target .progress {
-  background-color: rgba(110, 118, 129, 0.4);
-}
-
 .progress-item {
-  outline: 2px solid rgb(225, 228, 232);
   border-collapse: collapse;
 }
 
-#gh-dark-mode-only:target .progress-item {
-  outline: 2px solid #393f47;
-}
-
 .lang {
   font-weight: 600;
   margin-right: 4px;
-  color: rgb(36, 41, 46);
 }
 
-#gh-dark-mode-only:target .lang {
-  color: #c9d1d9;
-}
+@media (prefers-color-scheme: light) {
+  #background {
+    fill: #ffffff;
+    stroke-width: 1px;
+  }
+
+  h2 {
+    color: rgb(36, 41, 46);
+    fill: rgb(36, 41, 46);
+  }
+
+  .octicon {
+    fill: rgb(88, 96, 105);
+  }
+
+  .progress {
+    background-color: rgb(225, 228, 232);
+  }
 
-.percent {
-  color: rgb(88, 96, 105)
+  .progress-item {
+    outline: 2px solid rgb(225, 228, 232);
+  }
+
+  .lang {
+    color: rgb(36, 41, 46);
+  }
+
+  .percent {
+    color: rgb(88, 96, 105);
+  }
 }
 
-#gh-dark-mode-only:target .percent {
-  color: #8b949e;
+@media (prefers-color-scheme: dark) {
+  #background {
+    fill: #0d1117;
+    stroke-width: 0.5px;
+  }
+
+  h2 {
+    color: #c9d1d9;
+    fill: #c9d1d9;
+  }
+
+  .octicon {
+    color: #8b949e;
+    fill: #8b949e;
+  }
+
+  .progress{
+    background-color: rgba(110, 118, 129, 0.4);
+  }
+
+  .progress-item {
+    outline: 2px solid #393f47;
+  }
+
+  .lang {
+    color: #c9d1d9;
+  }
+
+  .percent {
+    color: #8b949e;
+  }
 }
 </style>
 <g>
diff --git a/src/templates/overview.svg b/src/templates/overview.svg
index c1600e6a939..ecb50b8163e 100644
--- a/src/templates/overview.svg
+++ b/src/templates/overview.svg
@@ -1,4 +1,4 @@
-<svg id="gh-dark-mode-only" width="360" height="210" xmlns="http://www.w3.org/2000/svg">
+<svg id="portable-dark-mode-support" width="360" height="210" xmlns="http://www.w3.org/2000/svg">
 <style>
 svg {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
@@ -9,18 +9,11 @@ svg {
 #background {
   width: calc(100% - 10px);
   height: calc(100% - 10px);
-  fill: white;
   stroke: rgb(225, 228, 232);
-  stroke-width: 1px;
   rx: 6px;
   ry: 6px;
 }
 
-#gh-dark-mode-only:target #background {
-  fill: #0d1117;
-  stroke-width: 0.5px;
-}
-
 foreignObject {
   width: calc(100% - 10px - 32px);
   height: calc(100% - 10px - 32px);
@@ -38,11 +31,6 @@ th {
   text-align: left;
   font-size: 14px;
   font-weight: 600;
-  color: rgb(3, 102, 214);
-}
-
-#gh-dark-mode-only:target th {
-  color: #58a6ff;
 }
 
 td {
@@ -51,11 +39,6 @@ td {
   padding: 0.25em;
   font-size: 12px;
   line-height: 18px;
-  color: rgb(88, 96, 105);
-}
-
-#gh-dark-mode-only:target td {
-  color: #c9d1d9;
 }
 
 tr {
@@ -64,20 +47,53 @@ tr {
 }
 
 .octicon {
-  fill: rgb(88, 96, 105);
   margin-right: 1ch;
   vertical-align: top;
 }
 
-#gh-dark-mode-only:target .octicon {
-  fill: #8b949e;
-}
-
 @keyframes slideIn {
   to {
     transform: translateX(0);
   }
 }
+
+@media (prefers-color-scheme: light) {
+  #background {
+    fill: white;
+    stroke-width: 1px;
+  }
+
+  th {
+    color: rgb(3, 102, 214);
+  }
+
+  td {
+    color: rgb(88, 96, 105);
+  }
+
+  .octicon {
+    fill: rgb(88, 96, 105);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  #background {
+    fill: #0d1117;
+    stroke-width: 0.5px;
+  }
+
+  th {
+    color: #58a6ff;
+  }
+
+  td {
+    color: #c9d1d9;
+  }
+
+  .octicon {
+    fill: #8b949e;
+  }
+}
 </style>
 <g>
 <rect x="5" y="5" id="background" />