Skip to content

Commit 4672ed2

Browse files
danchitnisdanchitnis
committed
light dark theme
1 parent cb2d02f commit 4672ed2

11 files changed

Lines changed: 378 additions & 234 deletions

File tree

‎index.html‎

Lines changed: 68 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,49 @@
3535
<meta name="twitter:image" content="https://eecircuit.com/EEcircuit_og.png" />
3636

3737
<!-- Meta Tags Generated via https://www.opengraph.xyz -->
38+
39+
<style>
40+
.github-corner {
41+
position: absolute;
42+
top: 0;
43+
border: 0;
44+
right: 0;
45+
}
46+
@media (prefers-color-scheme: light) {
47+
.github-corner svg {
48+
fill: rgb(10, 10, 10);
49+
color: rgb(250, 250, 250);
50+
}
51+
}
52+
@media (prefers-color-scheme: dark) {
53+
.github-corner svg {
54+
fill: rgb(250, 250, 250);
55+
color: rgb(10, 10, 10);
56+
}
57+
}
58+
.github-corner:hover .octo-arm {
59+
animation: octocat-wave 560ms ease-in-out;
60+
}
61+
@keyframes octocat-wave {
62+
0%, 100% {
63+
transform: rotate(0);
64+
}
65+
20%, 60% {
66+
transform: rotate(-25deg);
67+
}
68+
40%, 80% {
69+
transform: rotate(10deg);
70+
}
71+
}
72+
@media (max-width: 500px) {
73+
.github-corner:hover .octo-arm {
74+
animation: none;
75+
}
76+
.github-corner .octo-arm {
77+
animation: octocat-wave 560ms ease-in-out;
78+
}
79+
}
80+
</style>
3881
</head>
3982
<body>
4083
<nav>
@@ -47,8 +90,14 @@
4790
height="80"
4891
viewBox="0 0 250 250"
4992
style="
50-
fill: rgb(250, 250, 250);
51-
color: rgb(10, 10, 10);
93+
@media (prefers-color-scheme: light) {
94+
fill: rgb(250, 250, 250);
95+
color: rgb(10, 10, 10);
96+
}
97+
@media (prefers-color-scheme: dark) {
98+
fill: rgb(10, 10, 10);
99+
color: rgb(250, 250, 250);
100+
}
52101
position: absolute;
53102
top: 0;
54103
border: 0;
@@ -68,30 +117,16 @@
68117
fill="currentColor"
69118
class="octo-body"
70119
></path></svg></a
71-
><style>
72-
.github-corner:hover .octo-arm {
73-
animation: octocat-wave 560ms ease-in-out;
74-
}
75-
@keyframes octocat-wave {
76-
0%,
77-
100% {
78-
transform: rotate(0);
79-
}
80-
20%,
81-
60% {
82-
transform: rotate(-25deg);
83-
}
84-
40%,
85-
80% {
86-
transform: rotate(10deg);
120+
>
121+
<style>
122+
@media (prefers-color-scheme: dark) {
123+
#Layer_1 path {
124+
fill: #f2f2f2;
87125
}
88126
}
89-
@media (max-width: 500px) {
90-
.github-corner:hover .octo-arm {
91-
animation: none;
92-
}
93-
.github-corner .octo-arm {
94-
animation: octocat-wave 560ms ease-in-out;
127+
@media (prefers-color-scheme: light) {
128+
#Layer_1 path {
129+
fill: #101010;
95130
}
96131
}
97132
</style>
@@ -104,47 +139,19 @@
104139
height="3em"
105140
>
106141
<g>
107-
<path
108-
d="M2.2,31.54V4.47h14.73v5.26h-8.44v4.97h7.79v5.43h-7.79v5.91h8.44v5.5H2.2Z"
109-
style="fill: #f2f2f2"
110-
/>
111-
<path
112-
d="M20.85,31.54V4.47h14.73v5.26h-8.44v4.97h7.79v5.43h-7.79v5.91h8.44v5.5h-14.73Z"
113-
style="fill: #f2f2f2"
114-
/>
142+
<path d="M2.2,31.54V4.47h14.73v5.26h-8.44v4.97h7.79v5.43h-7.79v5.91h8.44v5.5H2.2Z"/>
143+
<path d="M20.85,31.54V4.47h14.73v5.26h-8.44v4.97h7.79v5.43h-7.79v5.91h8.44v5.5h-14.73Z"/>
115144
</g>
116145
<g>
117-
<path
118-
d="M49.02,24.78l5.16-.19c-.15,2-.9,3.65-2.24,4.94-1.35,1.29-2.98,1.93-4.91,1.93-2.04,0-3.76-.71-5.17-2.13-1.41-1.42-2.11-3.16-2.11-5.22s.71-3.63,2.13-5.02,3.12-2.09,5.11-2.09c1.73,0,3.27.55,4.59,1.64s2.15,2.49,2.48,4.19l-5.27.2c-.45-.59-1.03-.89-1.73-.89-.59,0-1.08.19-1.46.58-.38.39-.57.88-.57,1.48s.2,1.11.61,1.52c.4.41.91.61,1.51.61.88,0,1.51-.51,1.88-1.54Z"
119-
style="fill: #f2f2f2"
120-
/>
121-
<path
122-
d="M61.65,17.29v13.87h-5.21v-13.87h5.21ZM59.06,11.1c.71,0,1.32.25,1.83.74.52.5.77,1.08.77,1.76,0,.72-.24,1.32-.73,1.78-.49.46-1.11.7-1.87.7s-1.38-.23-1.87-.7c-.49-.46-.73-1.06-.73-1.78,0-.68.26-1.26.77-1.76.51-.5,1.12-.74,1.83-.74Z"
123-
style="fill: #f2f2f2"
124-
/>
125-
<path
126-
d="M72.33,17.15v5.57c-.36-.2-.69-.31-.99-.31-.95,0-1.42.72-1.42,2.17v6.58h-5.21v-7.58c0-2,.55-3.6,1.64-4.79,1.09-1.19,2.56-1.79,4.38-1.79.41,0,.94.05,1.59.15Z"
127-
style="fill: #f2f2f2"
128-
/>
129-
<path
130-
d="M82.37,24.78l5.16-.19c-.15,2-.9,3.65-2.24,4.94-1.35,1.29-2.98,1.93-4.91,1.93-2.04,0-3.76-.71-5.17-2.13-1.41-1.42-2.11-3.16-2.11-5.22s.71-3.63,2.13-5.02,3.12-2.09,5.11-2.09c1.73,0,3.27.55,4.59,1.64s2.15,2.49,2.48,4.19l-5.27.2c-.45-.59-1.03-.89-1.73-.89-.59,0-1.08.19-1.46.58-.38.39-.57.88-.57,1.48s.2,1.11.61,1.52c.4.41.91.61,1.51.61.88,0,1.51-.51,1.88-1.54Z"
131-
style="fill: #f2f2f2"
132-
/>
133-
<path
134-
d="M89.81,17.49h5.21v7.83c0,.79.33,1.18.99,1.18s.97-.39.97-1.18v-7.83h5.2v7.74c0,1.8-.6,3.32-1.8,4.56-1.2,1.24-2.66,1.86-4.4,1.86-1.98,0-3.57-.72-4.77-2.16-.94-1.12-1.41-2.68-1.41-4.68v-7.32Z"
135-
style="fill: #f2f2f2"
136-
/>
137-
<path
138-
d="M110.42,17.29v13.87h-5.21v-13.87h5.21ZM107.83,11.1c.71,0,1.32.25,1.83.74.52.5.77,1.08.77,1.76,0,.72-.24,1.32-.73,1.78-.49.46-1.11.7-1.87.7s-1.38-.23-1.87-.7c-.49-.46-.73-1.06-.73-1.78,0-.68.26-1.26.77-1.76.51-.5,1.12-.74,1.83-.74Z"
139-
style="fill: #f2f2f2"
140-
/>
141-
<path
142-
d="M118.11,12.17v5.32h2.34v5.5h-2.34c0,1.1.17,1.86.52,2.28.35.42.99.63,1.91.63v5.47c-.27,0-.47.01-.6.01-1.18,0-2.29-.27-3.33-.82-1.04-.55-1.88-1.29-2.51-2.23-.8-1.2-1.2-2.78-1.2-4.76v-11.4h5.2Z"
143-
style="fill: #f2f2f2"
144-
/>
146+
<path d="M49.02,24.78l5.16-.19c-.15,2-.9,3.65-2.24,4.94-1.35,1.29-2.98,1.93-4.91,1.93-2.04,0-3.76-.71-5.17-2.13-1.41-1.42-2.11-3.16-2.11-5.22s.71-3.63,2.13-5.02,3.12-2.09,5.11-2.09c1.73,0,3.27.55,4.59,1.64s2.15,2.49,2.48,4.19l-5.27.2c-.45-.59-1.03-.89-1.73-.89-.59,0-1.08.19-1.46.58-.38.39-.57.88-.57,1.48s.2,1.11.61,1.52c.4.41.91.61,1.51.61.88,0,1.51-.51,1.88-1.54Z"/>
147+
<path d="M61.65,17.29v13.87h-5.21v-13.87h5.21ZM59.06,11.1c.71,0,1.32.25,1.83.74.52.5.77,1.08.77,1.76,0,.72-.24,1.32-.73,1.78-.49.46-1.11.7-1.87.7s-1.38-.23-1.87-.7c-.49-.46-.73-1.06-.73-1.78,0-.68.26-1.26.77-1.76.51-.5,1.12-.74,1.83-.74Z"/>
148+
<path d="M72.33,17.15v5.57c-.36-.2-.69-.31-.99-.31-.95,0-1.42.72-1.42,2.17v6.58h-5.21v-7.58c0-2,.55-3.6,1.64-4.79,1.09-1.19,2.56-1.79,4.38-1.79.41,0,.94.05,1.59.15Z"/>
149+
<path d="M82.37,24.78l5.16-.19c-.15,2-.9,3.65-2.24,4.94-1.35,1.29-2.98,1.93-4.91,1.93-2.04,0-3.76-.71-5.17-2.13-1.41-1.42-2.11-3.16-2.11-5.22s.71-3.63,2.13-5.02,3.12-2.09,5.11-2.09c1.73,0,3.27.55,4.59,1.64s2.15,2.49,2.48,4.19l-5.27.2c-.45-.59-1.03-.89-1.73-.89-.59,0-1.08.19-1.46.58-.38.39-.57.88-.57,1.48s.2,1.11.61,1.52c.4.41.91.61,1.51.61.88,0,1.51-.51,1.88-1.54Z"/>
150+
<path d="M89.81,17.49h5.21v7.83c0,.79.33,1.18.99,1.18s.97-.39.97-1.18v-7.83h5.2v7.74c0,1.8-.6,3.32-1.8,4.56-1.2,1.24-2.66,1.86-4.4,1.86-1.98,0-3.57-.72-4.77-2.16-.94-1.12-1.41-2.68-1.41-4.68v-7.32Z"/>
151+
<path d="M110.42,17.29v13.87h-5.21v-13.87h5.21ZM107.83,11.1c.71,0,1.32.25,1.83.74.52.5.77,1.08.77,1.76,0,.72-.24,1.32-.73,1.78-.49.46-1.11.7-1.87.7s-1.38-.23-1.87-.7c-.49-.46-.73-1.06-.73-1.78,0-.68.26-1.26.77-1.76.51-.5,1.12-.74,1.83-.74Z"/>
152+
<path d="M118.11,12.17v5.32h2.34v5.5h-2.34c0,1.1.17,1.86.52,2.28.35.42.99.63,1.91.63v5.47c-.27,0-.47.01-.6.01-1.18,0-2.29-.27-3.33-.82-1.04-.55-1.88-1.29-2.51-2.23-.8-1.2-1.2-2.78-1.2-4.76v-11.4h5.2Z"/>
145153
</g>
146154
</svg>
147-
148155
<span style="margin-left: 1em">a SPICE based circuit simulator</span>
149156
</div>
150157
</nav>

‎src/EEcircuit.tsx‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ import { ProgressBar, ProgressRoot } from "./components/ui/progress.tsx";
5757
import { getColor } from "./colors.ts";
5858
import { isComplex, ResultArrayType, SimArray } from "./sim/simulationArray.ts";
5959
import { DisplayDataType, makeDD } from "./displayData.ts";
60+
import {
61+
useColorMode,
62+
useColorModeValue,
63+
} from "./components/ui/color-mode.tsx";
6064

6165
let sim: SimArray;
6266
const store = globalThis.localStorage;
@@ -92,7 +96,7 @@ export default function EEcircuit(): JSX.Element {
9296
const [progress, setProgress] = React.useState(0);
9397
const [threadCountNew, setThreadCountNew] = React.useState(1);
9498

95-
//const toast = createStandaloneToast();
99+
const colorMode = useColorModeValue("light", "dark");
96100

97101
useEffect(() => {
98102
const loadedNetList = store.getItem("netList");
@@ -101,7 +105,7 @@ export default function EEcircuit(): JSX.Element {
101105
const loadedDisplayDataString = store.getItem("displayData");
102106
if (loadedDisplayDataString) {
103107
const loadedDisplayData = JSON.parse(
104-
loadedDisplayDataString,
108+
loadedDisplayDataString
105109
) as DisplayDataType[];
106110
setDisplayData(loadedDisplayData);
107111
}
@@ -132,12 +136,12 @@ export default function EEcircuit(): JSX.Element {
132136
useEffect(() => {
133137
//DisplayData logic
134138
if (resultArray && resultArray.results.length > 0) {
135-
const newDD = makeDD(resultArray.results[0]);
139+
const newDD = makeDD(resultArray.results[0], colorMode);
136140
const tempDD = [] as DisplayDataType[];
137141
newDD.forEach((newData, i) => {
138142
let match = false;
139143
let visible = true;
140-
let color = getColor();
144+
let color = getColor(colorMode);
141145

142146
if (displayData) {
143147
displayData.forEach((oldData) => {
@@ -246,15 +250,17 @@ export default function EEcircuit(): JSX.Element {
246250
store.setItem("displayData", stringDD);
247251
}
248252
},
249-
[displayData, isSimLoaded],
253+
[displayData, isSimLoaded]
250254
);
251255

252256
const handleTabChange = (index: number) => {
253257
setTabIndex(index);
254258
};
255259

256260
const handleEditor = React.useCallback((value: string | undefined) => {
257-
value ? setNetList(value) : {};
261+
if (value) {
262+
setNetList(value);
263+
}
258264
}, []);
259265

260266
const handleDeSelectButton = React.useCallback(() => {
@@ -288,11 +294,11 @@ export default function EEcircuit(): JSX.Element {
288294
const d = [...displayData];
289295
if (!isComplex(resultArray)) {
290296
d.forEach((e) => {
291-
e.color = getColor();
297+
e.color = getColor(colorMode);
292298
});
293299
} else {
294300
for (let i = 0; i < d.length - 1; i = i + 2) {
295-
const c = getColor();
301+
const c = getColor(colorMode);
296302
d[i].color = c;
297303
d[i + 1].color = c;
298304
}
@@ -376,7 +382,7 @@ export default function EEcircuit(): JSX.Element {
376382
language="spice"
377383
value={netList}
378384
valueChanged={handleEditor}
379-
theme="vs-dark"
385+
theme={useColorModeValue("light", "dark")}
380386
key={windowSize.width}
381387
/>
382388
</Suspense>
@@ -526,9 +532,15 @@ export default function EEcircuit(): JSX.Element {
526532

527533
<Tabs.Content value="plot">
528534
<Suspense fallback={<Skeleton height="400px" />}>
529-
<PlotArray resultArray={resultArray} displayData={displayData} />
535+
<PlotArray
536+
resultArray={resultArray}
537+
displayData={displayData}
538+
theme={useColorModeValue("light", "dark")}
539+
/>
530540
</Suspense>
531-
{displayBreakpoint !== "base" ? <></> : (
541+
{displayBreakpoint !== "base" ? (
542+
<></>
543+
) : (
532544
<>
533545
<Spacer p={2} />
534546
<Suspense fallback={<Skeleton height="100px" />}>
@@ -542,7 +554,7 @@ export default function EEcircuit(): JSX.Element {
542554
<Textarea
543555
readOnly={true}
544556
aria-label="info"
545-
bg="gray.900"
557+
bg="bg.muted"
546558
fontSize="0.9em"
547559
rows={15}
548560
value={info}

‎src/axis.tsx‎

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ type AxisType = {
66
offset: number;
77
yHeight: string;
88
axis: "x" | "y";
9+
theme: "light" | "dark";
910
};
1011

1112
type CanvasSize = {
@@ -15,7 +16,13 @@ type CanvasSize = {
1516

1617
//let ctx: CanvasRenderingContext2D | null;
1718

18-
const Axis = ({ scale, offset, yHeight, axis }: AxisType): JSX.Element => {
19+
const Axis = ({
20+
scale,
21+
offset,
22+
yHeight,
23+
axis,
24+
theme,
25+
}: AxisType): JSX.Element => {
1926
const canvasRef = useRef<HTMLCanvasElement>(null);
2027
const [ctx, setCtx] = useState<CanvasRenderingContext2D>();
2128
const [canvasSize, setCanvasSize] = useState<CanvasSize>({
@@ -39,18 +46,26 @@ const Axis = ({ scale, offset, yHeight, axis }: AxisType): JSX.Element => {
3946
const ctx2d = canvas.getContext("2d");
4047
if (ctx2d) {
4148
setCtx(ctx2d);
42-
ctx2d.font = "16px Courier New";
43-
ctx2d.fillStyle = "white";
44-
ctx2d.strokeStyle = "white";
45-
axis == "x"
46-
? updateX(ctx2d, canvas.width, canvas.height)
47-
: updateY(ctx2d, canvas.width, canvas.height);
49+
const rootFontSize = parseFloat(
50+
getComputedStyle(document.documentElement).fontSize
51+
);
52+
console.log("rootFontSize->", rootFontSize);
53+
const scaleFactor = window.devicePixelRatio || 1;
54+
const fontSize = 0.85 * rootFontSize * scaleFactor; // rem scaled by device pixel ratio
55+
ctx2d.font = `${fontSize}px Courier New`;
56+
ctx2d.fillStyle = theme === "light" ? "black" : "white";
57+
ctx2d.strokeStyle = theme === "light" ? "black" : "white";
58+
if (axis === "x") {
59+
updateX(ctx2d, canvas.width, canvas.height);
60+
} else {
61+
updateY(ctx2d, canvas.width, canvas.height);
62+
}
4863
}
4964

5065
//const rect = canvas?.getBoundingClientRect();
5166
//console.log("axis->", rect);
5267
}
53-
}, [canvasRef]);
68+
}, [canvasRef, theme]);
5469

5570
useEffect(() => {
5671
if (ctx && axis == "x") {
@@ -67,15 +82,19 @@ const Axis = ({ scale, offset, yHeight, axis }: AxisType): JSX.Element => {
6782
const updateX = (
6883
ctx2d: CanvasRenderingContext2D,
6984
width: number,
70-
height: number,
85+
height: number
7186
) => {
7287
ctx2d.clearRect(0, 0, width, height);
7388

7489
for (let i = 0; i < 6; i++) {
7590
const midpoint = -(offset - i / 3 + 1) / scale;
7691
const x = (i / 6) * width;
7792

78-
ctx2d.fillText(unitConvert2string(midpoint, 2), x, 15);
93+
ctx2d.fillText(
94+
unitConvert2string(midpoint, 2),
95+
x,
96+
15 * (window.devicePixelRatio || 1)
97+
);
7998
//ctx.fillRect(10, 10, 100, 100);
8099
ctx2d.moveTo(x, 0);
81100
ctx2d.lineTo(x, 10);
@@ -86,15 +105,19 @@ const Axis = ({ scale, offset, yHeight, axis }: AxisType): JSX.Element => {
86105
const updateY = (
87106
ctx2d: CanvasRenderingContext2D,
88107
width: number,
89-
height: number,
108+
height: number
90109
) => {
91110
//console.log("yaxis->", canvasSize);
92111
ctx2d.clearRect(0, 0, width, height);
93112
for (let i = 0; i < 6; i++) {
94113
const midpoint = -(offset + i / 3 - 1) / scale;
95114
const y = (i / 6) * height;
96115

97-
ctx2d.fillText(unitConvert2string(midpoint, 2), 5, y);
116+
ctx2d.fillText(
117+
unitConvert2string(midpoint, 2),
118+
5 * (window.devicePixelRatio || 1),
119+
y
120+
);
98121
//ctx.fillRect(10, 10, 100, 100);
99122
ctx2d.moveTo(width - 10, y);
100123
ctx2d.lineTo(width, y);
@@ -105,8 +128,8 @@ const Axis = ({ scale, offset, yHeight, axis }: AxisType): JSX.Element => {
105128
return (
106129
<canvas
107130
style={{
108-
width: `${axis == "x" ? "100%" : "5em"}`,
109-
height: `${axis == "x" ? "1.5em" : yHeight}`,
131+
width: axis === "x" ? "100%" : "5em",
132+
height: axis === "x" ? "1.5em" : yHeight,
110133
}}
111134
ref={canvasRef}
112135
/>

0 commit comments

Comments
 (0)