fix: theme

This commit is contained in:
Barrett Ruth 2025-11-09 16:30:35 -05:00
parent 69c49b72b8
commit f63e429169
7 changed files with 29 additions and 23 deletions

View file

@ -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" },
},
],
};

View file

@ -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");

View file

@ -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;

View file

@ -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;
}

View file

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

View file

@ -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>}

View file

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