diff --git a/src/components/button/Button.module.css b/src/components/button/Button.module.css index 1f4ff418..4317f77a 100644 --- a/src/components/button/Button.module.css +++ b/src/components/button/Button.module.css @@ -30,6 +30,7 @@ color: var(--gray-9); background-color: var(--brand-color); &:hover { + color: var(--brand-color-fg); @media(hover: hover) { background-color: hsl(var(--brand-color-hsl)/.7); } diff --git a/src/components/custom-mdx/CustomMDX.module.css b/src/components/custom-mdx/CustomMDX.module.css index dca9b8ce..e8e285bc 100644 --- a/src/components/custom-mdx/CustomMDX.module.css +++ b/src/components/custom-mdx/CustomMDX.module.css @@ -50,18 +50,15 @@ border: 1px solid var(--gray-5); display: block; } - & :global(.mermaid-diagram *[fill]) { - fill: var(--brand-color) !important; - } - & :global(.mermaid-diagram *[color]) { - color: var(--brand-color) !important; - } - & :global(.mermaid-diagram) * { - color: white !important; - } - & :global(.mermaid-diagram svg) * { + + & :global(.mermaid-diagram svg .actor-man) * { fill: white !important; } + + & :global(.mermaid-diagram svg .actor-man) :is(text, text *) { + color: var(--white) !important; + fill: var(--white) !important; + } } @keyframes footnote-highlight { diff --git a/src/components/donate-card/DonateCard.module.css b/src/components/donate-card/DonateCard.module.css index 0da9728d..73ecb384 100644 --- a/src/components/donate-card/DonateCard.module.css +++ b/src/components/donate-card/DonateCard.module.css @@ -66,12 +66,16 @@ padding: 12px 24px; border-radius: 8px; background-color: var(--brand-color); - color: var(--gray-9); + color: var(--brand-color-fg); font-weight: 600; font-size: 15px; text-decoration: none; transition: background-color 0.15s ease, transform 0.15s ease; + @media (prefers-color-scheme: dark) { + color: var(--gray-9); + } + &:hover { @media (hover: hover) { background-color: hsl(var(--brand-color-hsl) / 0.85); diff --git a/src/components/link/Link.module.css b/src/components/link/Link.module.css index d209ceec..8aa09989 100644 --- a/src/components/link/Link.module.css +++ b/src/components/link/Link.module.css @@ -58,6 +58,10 @@ &:hover { background-color: var(--button-color); text-decoration: none; + + &.brand { + color: var(--brand-color-fg); + } } border-radius: 6px; diff --git a/src/components/mermaid/index.tsx b/src/components/mermaid/index.tsx index 6742957d..0721264a 100644 --- a/src/components/mermaid/index.tsx +++ b/src/components/mermaid/index.tsx @@ -11,11 +11,33 @@ export default function Mermaid({ chart, id, className = "" }: MermaidProps) { const elementRef = useRef(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); + const [primaryColor, setPrimaryColor] = useState("#ffffff"); + const [brandColor, setBrandColor] = useState("#3551F3"); + + + useEffect(() => { + const colorSchemeMatch = window.matchMedia("(prefers-color-scheme: dark)"); + const computedStyle = window.getComputedStyle(document.body); + const brandColor = computedStyle.getPropertyValue("--brand-color"); + + setBrandColor(brandColor); + setPrimaryColor(colorSchemeMatch.matches ? "#ffffff" : "#000000") + + const cb = (e: MediaQueryListEvent) => { + setPrimaryColor(e.matches ? "#ffffff" : "#000000") + }; + + colorSchemeMatch.addEventListener("change", cb); + + return () => { + colorSchemeMatch.removeEventListener("change", cb); + } + }, []); useEffect(() => { let mermaidInstance: any; const element = elementRef.current; - + const renderMermaid = async () => { try { setIsLoading(true); @@ -30,31 +52,31 @@ export default function Mermaid({ chart, id, className = "" }: MermaidProps) { fontFamily: "inherit", fontSize: 14, themeVariables: { - primaryColor: "#ffffff", - primaryTextColor: "#ffffff", - primaryBorderColor: "#ffffff", + primaryColor: brandColor, + primaryTextColor: primaryColor, + primaryBorderColor: primaryColor, - lineColor: "#ffffff", + lineColor: primaryColor, edgeLabelBackground: "transparent", - actorBorder: "#ffffff", - actorBkg: "transparent", - actorTextColor: "#ffffff", - actorLineColor: "#ffffff", - signalColor: "#ffffff", - signalTextColor: "#ffffff", + actorBorder: primaryColor, + actorBkg: brandColor, + actorTextColor: "white", + actorLineColor: primaryColor, + signalColor: primaryColor, + signalTextColor: primaryColor, - gridColor: "#ffffff", + gridColor: primaryColor, - git0: "#ffffff", - git1: "#ffffff", - git2: "#ffffff", - git3: "#ffffff", - git4: "#ffffff", - git5: "#ffffff", - git6: "#ffffff", - git7: "#ffffff", + git0: primaryColor, + git1: primaryColor, + git2: primaryColor, + git3: primaryColor, + git4: primaryColor, + git5: primaryColor, + git6: primaryColor, + git7: primaryColor, background: "transparent", secondaryColor: "transparent", @@ -96,30 +118,20 @@ export default function Mermaid({ chart, id, className = "" }: MermaidProps) { const paths = svgElement.querySelectorAll("path"); paths.forEach((path) => { if (path.getAttribute("stroke") !== "none") { - path.setAttribute("stroke", "#ffffff"); + path.setAttribute("stroke", primaryColor); } if ( path.getAttribute("fill") !== "none" && path.getAttribute("fill") !== "transparent" ) { - path.setAttribute("fill", "#ffffff"); + path.setAttribute("fill", primaryColor); } }); const markers = svgElement.querySelectorAll("marker path"); markers.forEach((marker) => { - marker.setAttribute("fill", "#ffffff"); - marker.setAttribute("stroke", "#ffffff"); - }); - - const polylines = svgElement.querySelectorAll("polyline"); - polylines.forEach((polyline) => { - polyline.setAttribute("stroke", "#ffffff"); - }); - - const lines = svgElement.querySelectorAll("line"); - lines.forEach((line) => { - line.setAttribute("stroke", "#ffffff"); + marker.setAttribute("fill", primaryColor); + marker.setAttribute("stroke", primaryColor); }); } } @@ -140,7 +152,7 @@ export default function Mermaid({ chart, id, className = "" }: MermaidProps) { element.innerHTML = ""; } }; - }, [chart, id]); + }, [chart, id, primaryColor]); if (error) { return ( diff --git a/src/components/nav-tree/NavTree.module.css b/src/components/nav-tree/NavTree.module.css index 2b5c357c..9895ee50 100644 --- a/src/components/nav-tree/NavTree.module.css +++ b/src/components/nav-tree/NavTree.module.css @@ -80,7 +80,7 @@ ul.nodesList { &.active { background: var(--brand-color); - color: var(--gray-9); + color: var(--brand-color-fg); } } } diff --git a/src/components/navbar/ghostty-wordmark-black.svg b/src/components/navbar/ghostty-wordmark-black.svg new file mode 100644 index 00000000..22748f3f --- /dev/null +++ b/src/components/navbar/ghostty-wordmark-black.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx index 737a7572..5af9bc2a 100644 --- a/src/components/navbar/index.tsx +++ b/src/components/navbar/index.tsx @@ -8,6 +8,7 @@ import GridContainer, { NavAndFooterGridConfig } from "../grid-container"; import Link, { ButtonLink, SimpleLink } from "../link"; import NavTree, { BreakNode, LinkNode, NavTreeNode } from "../nav-tree"; import GhosttyWordmark from "./ghostty-wordmark.svg"; +import GhosttyWordmarkBlack from "./ghostty-wordmark-black.svg"; import s from "./Navbar.module.css"; import { useRouter } from "next/router"; @@ -31,6 +32,18 @@ export default function Navbar({ const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const mobileContentRef = useRef(null); const activeItemRef = useRef(null); + const [darkTheme, setDarkTheme] = useState(true); + + useEffect(() => { + const mediaMatch = window.matchMedia("(prefers-color-scheme: dark)"); + setDarkTheme(mediaMatch.matches); + const cb = (e: MediaQueryListEvent) => { + setDarkTheme(e.matches); + }; + mediaMatch.addEventListener("change", cb); + + return () => mediaMatch.removeEventListener("change", cb); + }, []); useEffect(() => { function handleSizeUpdated() { @@ -92,7 +105,7 @@ export default function Navbar({ gridConfig={NavAndFooterGridConfig} > - Ghostty + Ghostty
{links && ( diff --git a/src/components/sidecar/Sidecar.module.css b/src/components/sidecar/Sidecar.module.css index d1a40b03..d9634568 100644 --- a/src/components/sidecar/Sidecar.module.css +++ b/src/components/sidecar/Sidecar.module.css @@ -5,6 +5,10 @@ --gradient-height: 20px; --gradient-color: var(--gray-0); + @media (prefers-color-scheme: light) { + --gradient-color: var(--black); + } + &::before, &::after { content: ""; diff --git a/src/components/sponsor-card/SponsorCard.module.css b/src/components/sponsor-card/SponsorCard.module.css index 1729bda8..0b37f3ff 100644 --- a/src/components/sponsor-card/SponsorCard.module.css +++ b/src/components/sponsor-card/SponsorCard.module.css @@ -5,14 +5,25 @@ padding: 24px; border-radius: 12px; border: 1px solid var(--gray-3); - background: var(--gray-1); + background: var(--gray-2); text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; - &:hover { @media (hover: hover) { - border-color: var(--gray-4); - background: hsl(var(--brand-color-hsl) / 0.03); + border-color: var(--gray-6); + background: color-mix(in srgb, var(--brand-color) 20%, transparent); + } + } + + @media (prefers-color-scheme: dark) { + border: 1px solid var(--gray-3); + background: var(--gray-1); + + &:hover { + @media (hover: hover) { + border-color: var(--gray-6); + background: color-mix(in srgb, var(--brand-color) 3%, transparent); + } } } } diff --git a/src/components/terminal/Terminal.module.css b/src/components/terminal/Terminal.module.css index 77cdc05c..bd90d331 100644 --- a/src/components/terminal/Terminal.module.css +++ b/src/components/terminal/Terminal.module.css @@ -51,6 +51,11 @@ display: flex; flex-direction: column; + @media (prefers-color-scheme: light) { + background: var(--gray-8); + color: var(--gray-0) + } + & .header { display: grid; align-items: center; @@ -102,7 +107,6 @@ & .content { font-size: var(--content-font-size); padding-top: var(--code-margin-top); - color: var(--gray-6); word-wrap: break-word; scroll-behavior: smooth; overflow-y: scroll; @@ -117,6 +121,10 @@ color: var(--brand-color); } } + + @media (prefers-color-scheme: light) { + color: var(--gray-1); + } } &.adwaita { diff --git a/src/layouts/root-layout/RootLayout.module.css b/src/layouts/root-layout/RootLayout.module.css index c5062b17..a6e93e5b 100644 --- a/src/layouts/root-layout/RootLayout.module.css +++ b/src/layouts/root-layout/RootLayout.module.css @@ -1,7 +1,7 @@ .rootLayout { font-family: var(--pretendard-std-variable); - & a { + :where(& a) { color: var(--gray-9); } diff --git a/src/pages/docs/[...path]/DocsPage.module.css b/src/pages/docs/[...path]/DocsPage.module.css index 1acf5f4b..0650066c 100644 --- a/src/pages/docs/[...path]/DocsPage.module.css +++ b/src/pages/docs/[...path]/DocsPage.module.css @@ -154,6 +154,7 @@ .editOnGithub { display: flex; align-items: center; + margin: 1em 0; svg { margin-left: 4px; diff --git a/src/styles/globals.css b/src/styles/globals.css index 2b6a0828..8bafec7e 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -9,7 +9,7 @@ } html { - color-scheme: dark; + color-scheme: light dark; } html, @@ -31,6 +31,7 @@ body { max-width: 100vw; --brand-color: #3551F3; + --brand-color-fg: #fff; --brand-color-hsl: 240 100% 45%; --gray-0: #0F0F11; /* Background color */ --gray-1: #16161A; /* Blocks */ @@ -145,7 +146,7 @@ pre code { text-decoration: underline; } -@media print { +@media print, screen and (prefers-color-scheme: light) { /* Invert the lightness in print mode */ html, body { @@ -174,4 +175,8 @@ pre code { --atom-one-gray: #8f97a3; --atom-one-white: #434958; } + + ::selection { + background: color-mix(in srgb, var(--brand-color) 40%, transparent); + } }