Fix navigation icons color scheme #8

MrWillCom · May 10, 2022 · dbda0c8 · dbda0c8
1 parent 033a48a
commit dbda0c8
Showing 1 changed file with 30 additions and 10 deletions.
diff --git a/source/css/nav.css b/source/css/nav.css
@@ -84,44 +84,64 @@ nav .nav-item-icon {
     padding: 0;
 }
 
-nav .nav-item-github {
+body[data-color-scheme="auto"] nav .nav-item-github, body[data-color-scheme="light"] nav .nav-item-github {
     background-image: url(/theme-img/github-mark-dark.png);
 }
 
-nav .nav-item-patreon {
+body[data-color-scheme="auto"] nav .nav-item-patreon, body[data-color-scheme="light"] nav .nav-item-patreon {
     background-image: url(/theme-img/patreon-logo-black.png);
 }
 
-nav .nav-item-codepen {
+body[data-color-scheme="auto"] nav .nav-item-codepen, body[data-color-scheme="light"] nav .nav-item-codepen {
     background-image: url(https://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png);
 }
 
-nav .nav-item-mastodon {
+body[data-color-scheme="auto"] nav .nav-item-mastodon, body[data-color-scheme="light"] nav .nav-item-mastodon {
     background-image: url(/theme-img/mastodon-logo-black.svg);
 }
 
-nav .nav-item-discord {
+body[data-color-scheme="auto"] nav .nav-item-discord, body[data-color-scheme="light"] nav .nav-item-discord {
     background-image: url(/theme-img/discord-mark-dark.svg);
 }
 
 @media (prefers-color-scheme: dark) {
-    nav .nav-item-github {
+    body[data-color-scheme="auto"] nav .nav-item-github {
         background-image: url(/theme-img/github-mark-light.png);
     }
-    nav .nav-item-patreon {
+    body[data-color-scheme="auto"] nav .nav-item-patreon {
         background-image: url(/theme-img/patreon-logo-white.png);
     }
-    nav .nav-item-codepen {
+    body[data-color-scheme="auto"] nav .nav-item-codepen {
         background-image: url(https://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-White-Large.png);
     }
-    nav .nav-item-mastodon {
+    body[data-color-scheme="auto"] nav .nav-item-mastodon {
         background-image: url(/theme-img/mastodon-logo-white.svg);
     }
-    nav .nav-item-discord {
+    body[data-color-scheme="auto"] nav .nav-item-discord {
         background-image: url(/theme-img/discord-mark-light.svg);
     }
 }
 
+body[data-color-scheme="dark"] nav .nav-item-github {
+    background-image: url(/theme-img/github-mark-light.png);
+}
+
+body[data-color-scheme="dark"] nav .nav-item-patreon {
+    background-image: url(/theme-img/patreon-logo-white.png);
+}
+
+body[data-color-scheme="dark"] nav .nav-item-codepen {
+    background-image: url(https://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-White-Large.png);
+}
+
+body[data-color-scheme="dark"] nav .nav-item-mastodon {
+    background-image: url(/theme-img/mastodon-logo-white.svg);
+}
+
+body[data-color-scheme="dark"] nav .nav-item-discord {
+    background-image: url(/theme-img/discord-mark-light.svg);
+}
+
 @media screen and (max-width: 600px) {
     nav {
         height: 48px;