fix: theme

astro.config.mjs

@@ -14,7 +14,6 @@ const midnight = {
   tokenColors: [
     {
       scope: [
-        "keyword",
         "storage.type",
         "storage.modifier",
         "keyword.control",
@@ -31,7 +30,7 @@ const midnight = {
         "constant.character",
         "number",
       ],
-      settings: { foreground: "#e5c07b" },
+      settings: { foreground: "#98c379" },
     },
   ],
 };
@@ -46,7 +45,6 @@ const daylight = {
   tokenColors: [
     {
       scope: [
-        "keyword",
         "storage.type",
         "storage.modifier",
         "keyword.control",
@@ -63,7 +61,7 @@ const daylight = {
         "constant.character",
         "number",
       ],
-      settings: { foreground: "#996800" },
+      settings: { foreground: "#2d7f3e" },
     },
   ],
 };

public/scripts/models-of-production.js

@@ -4,6 +4,12 @@ function urlToTopic() {
   return pathParts[2];
 }
 
+function getTextColor() {
+  return getComputedStyle(document.documentElement)
+    .getPropertyValue("--text")
+    .trim();
+}
+
 function setUpParameters(render, parameters, modelPrefix) {
   parameters.forEach((param) => {
     const slider = document.getElementById(`slider${modelPrefix}${param}`);
@@ -54,7 +60,6 @@ function drawSolowGraph() {
     .attr("transform", `translate(0, ${height})`)
     .call(d3.axisBottom(x))
     .append("text")
-    .attr("fill", "#000")
     .attr("x", width + 10)
     .attr("y", -10)
     .style("text-anchor", "end")
@@ -67,7 +72,6 @@ function drawSolowGraph() {
     .append("g")
     .call(d3.axisLeft(y))
     .append("text")
-    .attr("fill", "#000")
     .attr("x", 0)
     .attr("y", -10)
     .style("text-anchor", "start")
@@ -162,7 +166,6 @@ function drawSolowGraph() {
     .attr("y1", y((d * k_star) / s))
     .attr("x2", x(k_star))
     .attr("y2", y(0))
-    .attr("stroke", "black")
     .attr("stroke-width", 1)
     .attr("stroke-dasharray", "5,5");
 
@@ -239,7 +242,6 @@ function drawRomerGraph() {
     .attr("transform", `translate(0, ${height})`)
     .call(d3.axisBottom(x))
     .append("text")
-    .attr("fill", "#000")
     .attr("x", width + 10)
     .attr("y", -10)
     .style("text-anchor", "end")
@@ -254,7 +256,6 @@ function drawRomerGraph() {
     .append("g")
     .call(d3.axisLeft(y).ticks(10, d3.format(".1s")))
     .append("text")
-    .attr("fill", "#000")
     .attr("x", 0)
     .attr("y", -10)
     .style("text-anchor", "start")
@@ -332,7 +333,6 @@ function drawRomerlGraph() {
     .attr("transform", `translate(0, ${height})`)
     .call(d3.axisBottom(x))
     .append("text")
-    .attr("fill", "#000")
     .attr("x", width + 10)
     .attr("y", -10)
     .style("text-anchor", "end")
@@ -347,7 +347,6 @@ function drawRomerlGraph() {
     .append("g")
     .call(d3.axisLeft(y).ticks(10, d3.format(".1s")))
     .append("text")
-    .attr("fill", "#000")
     .attr("x", 0)
     .attr("y", -10)
     .style("text-anchor", "start")
@@ -374,7 +373,6 @@ function drawRomerlGraph() {
     .attr("y1", y(romerData[T_MAX - 1].Y))
     .attr("x2", x(t0))
     .attr("y2", height)
-    .attr("stroke", "black")
     .attr("stroke-width", 1)
     .attr("stroke-dasharray", "4");
 
@@ -478,7 +476,6 @@ function drawRomerSolowGraph() {
     .attr("transform", `translate(0, ${height})`)
     .call(d3.axisBottom(x))
     .append("text")
-    .attr("fill", "#000")
     .attr("x", width + 10)
     .attr("y", -10)
     .style("text-anchor", "end")
@@ -493,7 +490,6 @@ function drawRomerSolowGraph() {
     .append("g")
     .call(d3.axisLeft(y).ticks(10, d3.format(".1s")))
     .append("text")
-    .attr("fill", "#000")
     .attr("x", 0)
     .attr("y", -10)
     .style("text-anchor", "start")
@@ -575,7 +571,6 @@ function drawRomerSolowChangeGraph() {
     .attr("transform", `translate(0, ${height})`)
     .call(d3.axisBottom(x))
     .append("text")
-    .attr("fill", "#000")
     .attr("x", width + 10)
     .attr("y", -10)
     .style("text-anchor", "end")
@@ -590,7 +585,6 @@ function drawRomerSolowChangeGraph() {
     .append("g")
     .call(d3.axisLeft(y).ticks(10, d3.format(".1s")))
     .append("text")
-    .attr("fill", "#000")
     .attr("x", 0)
     .attr("y", -10)
     .style("text-anchor", "start")
@@ -617,7 +611,6 @@ function drawRomerSolowChangeGraph() {
     .attr("y1", y(romerSolowData[T_MAX - 1].Y))
     .attr("x2", x(t0))
     .attr("y2", height)
-    .attr("stroke", "black")
     .attr("stroke-width", 1)
     .attr("stroke-dasharray", "4");
 

public/styles/graph.css

@@ -11,6 +11,16 @@
   width: 60%;
 }
 
+.graph svg line,
+.graph svg path.domain,
+.graph svg .tick line {
+  stroke: var(--text);
+}
+
+.graph svg text {
+  fill: var(--text);
+}
+
 .slider {
   display: flex;
   align-items: center;

public/styles/posts.css

@@ -22,7 +22,7 @@ li {
 .post-title::before {
   content: "";
   position: absolute;
-  background-color: var(--topic-color, black);
+  background-color: var(--topic-color, var(--text));
   height: 30px;
   width: 2px;
   bottom: -10px;
@@ -32,7 +32,7 @@ li {
 .post-title::after {
   content: "";
   position: absolute;
-  background-color: var(--topic-color, black);
+  background-color: var(--topic-color, var(--text));
   width: 200px;
   height: 2px;
   bottom: -10px;
@@ -103,7 +103,7 @@ article h3::before,
 .post-article h3::before {
   position: absolute;
   left: 0;
-  color: var(--topic-color, #000);
+  color: var(--topic-color, var(--text));
   margin-right: 0.5em;
 }
 

src/layouts/BaseLayout.astro

@@ -52,7 +52,9 @@ const {
           case "git":
             return "#cc5500";
           default:
-            return "#000000";
+            return getComputedStyle(document.documentElement)
+              .getPropertyValue("--text")
+              .trim();
         }
       };
     </script>

src/layouts/PostLayout.astro

@@ -53,7 +53,10 @@ const topicColor = getTopicColor(post?.collection);
     <slot name="head" />
   </Fragment>
 
-  <div class="post-container" style={`--topic-color: ${topicColor};`}>
+  <div
+    class="post-container"
+    style={topicColor ? `--topic-color: ${topicColor};` : ""}
+  >
     <header class="post-header">
       <h1 class="post-title">{title}</h1>
       {frontmatter.date && <p class="post-meta">{frontmatter.date}</p>}

src/utils/colors.js

@@ -11,6 +11,6 @@ export function getTopicColor(topicName) {
     case "git":
       return "#cc5500";
     default:
-      return "#000000";
+      return null;
   }
 }