dark-fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsonresume-theme-legacy",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "✱ Legacy handlebars jsonresume theme port to vite",
   "author": "metaory <metaory@gmail.com>",
   "bugs": "https://github.com/metaory/jsonresume-theme-legacy/issues",

src/styles/legacy.css

@@ -1,4 +1,3 @@
-
 body::-webkit-scrollbar {
   display: none;
 }
@@ -28,7 +27,7 @@ a:visited {
 a,
 span.url,
 a:visited {
-  color: var(--ic);
+  color: var(--f1);
 }
 
 span.icon {
@@ -85,7 +84,7 @@ strong {
   #contact,
   #profiles {
     display: grid;
-    grid-template-columns: repeat(3, 3fr);
+    grid-auto-flow: column;
     justify-content: center;
     justify-items: center;
     width: max-content;
@@ -127,12 +126,13 @@ strong {
   }
 
 
-  span.icon {
-    color: var(--pk7);
-  }
 
   .username {
     width: max-content;
+
+    span.icon {
+      color: var(--ic);
+    }
   }
 
   .location.username {
@@ -277,6 +277,7 @@ section#languages {
     justify-content: start;
 
     h3 {
+      color: var(--ic);
       padding: 4px 8px;
       border-radius: var(--brm);
       background-color: var(--xgg);
@@ -355,7 +356,7 @@ section#interests {
   width: max-content;
 
   span.icon {
-    color: var(--pk7);
+    color: var(--ix);
     width: 40px;
     height: 40px;
     opacity: 0.8;
@@ -420,7 +421,7 @@ section#interests {
 .institution,
 .organization,
 .awarder {
-  color: var(--c07);
+  color: var(--ix);
   font-weight: 400;
 }
 
@@ -508,27 +509,27 @@ span.url:hover,
 
 .level.beginner .bar::after {
   border-radius: var(--brs);
-  background: linear-gradient(90deg, var(--cc6), var(--pk7));
+  background: linear-gradient(90deg, var(--g1), var(--g2));
   width: 25%;
 }
 
 .level.intermediate .bar::after {
   border-radius: var(--brs);
-  background: linear-gradient(90deg, var(--cc6), var(--pk9));
+  background: linear-gradient(90deg, var(--g1), var(--g3));
   width: 55%;
 }
 
 .level.advanced .bar::after,
 .level.fluent .bar::after {
   background: var(--ic);
-  background: linear-gradient(90deg, var(--cc6), var(--cc5));
+  background: linear-gradient(90deg, var(--g1), var(--g4));
   border-radius: var(--brs);
   width: 75%;
 }
 
 .level.master .bar::after,
 .level.native.speaker .bar::after {
-  background: linear-gradient(90deg, var(--cc6), var(--cx5));
+  background: linear-gradient(90deg, var(--g1), var(--g5));
   border-radius: var(--brs);
   width: 100%;
 }

src/styles/main.css

@@ -18,6 +18,36 @@
   --ic: var(--c05);
   --ix: var(--c05);
   --iz: var(--c13);
+  --g1: var(--cc6);
+  --g2: var(--pk7);
+  --g3: var(--pk9);
+  --g4: var(--cc5);
+  --g5: var(--cx5);
+}
+
+@media not print {
+  html.dark {
+    --bg: var(--wk0);
+    --fg: var(--sk9);
+    --f2: var(--zk9);
+    --f3: var(--cy3);
+    --f4: var(--c03);
+    --f5: var(--xgg);
+    --ic: var(--sk8);
+    --ix: var(--pk2);
+    --iz: var(--pk1);
+    --g1: var(--sk3);
+    --g2: var(--sk4);
+    --g3: var(--sk5);
+    --g4: var(--sk6);
+    --g5: var(--sk7);
+    --xgg: #fDCCFF11;
+
+    #scheme-toggle {
+      --fg: var(--cy3);
+      --bg: var(--c01);
+    }
+  }
 }
 
 /* fonts from monaspace.githubnext.com */
@@ -80,23 +110,6 @@ main {
   background-color: var(--xgg);
 }
 
-html.dark {
-
-  --bg: var(--wk0);
-  --fg: var(--wk9);
-  --f2: var(--c03);
-  --f3: var(--cy4);
-  --f4: var(--c06);
-  --f5: var(--xgg);
-  --ic: var(--cy4);
-  --ix: var(--pk2);
-  --iz: var(--pk1);
-
-  #scheme-toggle {
-    --fg: var(--cy3);
-    --bg: var(--c01);
-  }
-}
 
 div.line-pattern {
   height: 16px;
@@ -242,7 +255,6 @@ section {
 
   body,
   section>header,
-  article#header #contact,
   article#header #profiles,
   article#header>.label,
   section#skills,
@@ -256,6 +268,7 @@ section {
     width: 80vw !important;
   }
 
+  article#header #contact,
   .location>span.url {
     grid-auto-flow: row;
   }
@@ -271,7 +284,7 @@ section {
 }
 
 @media print {
-  #scheme-toggle * {
-    display: none;
+  #scheme-toggle {
+    display: none !important;
   }
 }