diff --git a/src/A.tsx b/src/A.tsx index 6f9a100..44221b8 100644 --- a/src/A.tsx +++ b/src/A.tsx @@ -3,7 +3,7 @@ import { ReactNode } from "react"; export default ({ href, children }: { href: string; children: ReactNode }) => { return ( {children} diff --git a/src/App.tsx b/src/App.tsx index ab59fba..8309937 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,7 @@ import Logo from "./Logo"; import penroseLogo from "./assets/penrose.svg"; import Balls from "./Balls"; import Papers, { Paper } from "./Papers"; -import { ReactNode, useState } from "react"; +import { ReactNode, useEffect, useState } from "react"; import { HashLink } from "react-router-hash-link"; import news from "./News"; import A from "./A"; @@ -27,8 +27,11 @@ const NewsFeed = () => { ({ time }) => time.getUTCFullYear() >= today.getUTCFullYear() - 1 ) .map(({ time, msg }, i) => ( -
-
+
+
{time.toLocaleString("default", { month: "long", year: "numeric", @@ -58,7 +61,7 @@ export const Copy = ({ return (
{children} @@ -85,26 +88,22 @@ const Publications = () => ( }: Paper) => (
- + {title}
- + {authors .map((a) => (coauthors?.includes(a) ? `${a}*` : a)) .map((a) => a === "Wode Ni" || a === "Wode Ni*" ? {a} : a ) .map((a, i) => ( - <> -
  • - {a} -
    • - {i !== authors.length - 1 && ( - , - )} - + +
  • {a}
    • + {i !== authors.length - 1 && , } +     ))}     .{/*
    */}{" "} @@ -154,13 +153,22 @@ const Hero = ({ className }: { className?: string }) => (
    ); -const DarkToggle = () => ( -
    - +const DarkToggle = ({ toggleDark }: { toggleDark: () => void }) => ( +
    +
    ); -const Socials = ({ className }: { className?: string }) => ( +const Socials = ({ + className, + toggleDark, +}: { + className?: string; + toggleDark: () => void; +}) => (
    @@ -169,7 +177,7 @@ const Socials = ({ className }: { className?: string }) => ( - {/* */} +
    ); @@ -185,21 +193,21 @@ const Icon = ({ url, icon }: { url: string; icon: ReactNode }) => ( const Office = () => ( } + icon={} /> ); const Twitter = () => ( } + icon={} /> ); const GitHub = () => ( } + icon={} /> ); @@ -211,7 +219,10 @@ const CV = () => ( ); const Email = () => ( - } /> + } + /> ); const Text = ({ @@ -221,7 +232,9 @@ const Text = ({ className?: string; children: ReactNode; }) => ( -

    +

    {children}

    ); @@ -237,24 +250,27 @@ const Section = ({ return (
    - + - + {header} @@ -264,17 +280,51 @@ const Section = ({ }; const App: React.FC = () => { + const [darkMode, setDarkMode] = useState( + window.matchMedia("(prefers-color-scheme: dark)").matches + ); + const toggleDark = () => { + setDarkMode(!darkMode); + }; + + function updateTheme() { + if ( + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches + ) { + setDarkMode(true); + } else { + // Otherwise, remove it + setDarkMode(false); + } + } + + useEffect(() => { + // Add an event listener to react to changes in the system's color scheme + window + .matchMedia("(prefers-color-scheme: dark)") + .addEventListener("change", updateTheme); + }); + + useEffect(() => { + document.documentElement.classList.toggle("dark", darkMode); + }, [darkMode]); + return ( -
    +
    - + I'm Nimo. I build ergonomic digital tools to make difficult things feel simple.
    - + I am a Ph.D. candidate at Carnegie Mellon University, School of Computer Science, advised by{" "} Ken Koedinger{" "} @@ -288,12 +338,14 @@ const App: React.FC = () => { name="Edgeworth" desc="Diagrammatic problem generation by program mutation." link="https://github.com/penrose/penrose/tree/main/packages/edgeworth" + dark={darkMode} >
    diff --git a/src/Logo.tsx b/src/Logo.tsx index dcbffe2..03c8717 100644 --- a/src/Logo.tsx +++ b/src/Logo.tsx @@ -8,7 +8,7 @@ export default ({ className }: { className: string }) => ( xmlns="http://www.w3.org/2000/svg" >
    -
    +
    {name}
    diff --git a/src/theme.ts b/src/theme.ts index 961cbb8..fbb2f8b 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -1,10 +1,5 @@ export default { colors: { primary: "#C559F4", - // primary: "#2C1EF1", - icon: "#999", - }, - sizes: { - icon: 100, }, }; diff --git a/tailwind.config.js b/tailwind.config.js index 1f87c20..b901fa0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,17 +1,20 @@ /** @type {import('tailwindcss').Config} */ module.exports = { + darkMode: "class", content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { scale: { 400: "40", }, - }, - colors: { - primary: "#C559F4", - // primary: "#2C1EF1", - icon: "#999", - icontext: "#1E1E1E", + colors: { + primary: "#C559F4", + // primary: "#2C1EF1", + icon: "#999", + "icon-dark": "#bbb", + icontext: "#1E1E1E", + "icontext-dark": "#fff", + }, }, }, plugins: [], diff --git a/yarn.lock b/yarn.lock index 8ddf4c5..69dba01 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1773,10 +1773,10 @@ three-stdlib@^2.22.10, three-stdlib@^2.23.4: potpack "^1.0.1" zstddec "^0.0.2" -three@^0.148.0: - version "0.148.0" - resolved "https://registry.yarnpkg.com/three/-/three-0.148.0.tgz#b6f62f9c84227f8d51c151bf17b67984ded8e4d7" - integrity sha512-8uzVV+qhTPi0bOFs/3te3RW6hb3urL8jYEl6irjCWo/l6sr8MPNMcClFev/MMYeIxr0gmDcoXTy/8LXh/LXkfw== +three@^0.152.1: + version "0.152.2" + resolved "https://registry.yarnpkg.com/three/-/three-0.152.2.tgz#2ee0f2c504d31a4bc29b45495c12bded9fda7bfc" + integrity sha512-Ff9zIpSfkkqcBcpdiFo2f35vA9ZucO+N8TNacJOqaEE6DrB0eufItVMib8bK8Pcju/ZNT6a7blE1GhTpkdsILw== tiny-inflate@^1.0.3: version "1.0.3"