Repository navigation
Dev #477
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -29,10 +29,65 @@ | |
| --rule: #2a312d; | ||
|
|
||
| --bloom: #ff4f8b; | ||
| --bloom-hover: #ff6a9d; | ||
| --bloom-deep: #b8285a; | ||
| --on-bloom: #16060c; | ||
| --line-border: #39413c; | ||
|
|
||
| /* Neon halo on blooming flowers. */ | ||
| --glow-1: #ff4f8b; | ||
| --glow-2: #ff4f8b; | ||
| --glow-3: rgba(255, 79, 139, 0.45); | ||
|
|
||
| --navbar-height: 72px; | ||
| color-scheme: dark; | ||
| } | ||
|
|
||
| /* Day: the same greenhouse with the lights on. A cool sage ground (not | ||
| cream), near-black ink, and a deeper pink, since the night pink is too | ||
| light to read as text on a pale ground. Used when the visitor picks light, | ||
| or has no choice saved and their system is light. */ | ||
| :root[data-theme="light"] { | ||
| --ground: #eef1ec; | ||
| --raised: #f7f8f5; | ||
| --ink: #121613; | ||
| --ink-2: #444c46; | ||
| --ink-3: #5f6761; /* meta: ≥4.5:1 on ground */ | ||
| --rule: #d3d9d3; | ||
|
|
||
| --bloom: #c2185b; | ||
| --bloom-hover: #a8134d; | ||
| --bloom-deep: #8e0f41; | ||
| --on-bloom: #ffffff; | ||
|
There was a problem hiding this comment. Light theme active button contrastLow Severity Light theme sets Additional Locations (1)  Reviewed by Cursor Bugbot for commit 6b96cc9. Configure here. |
||
| --line-border: #bfc7c0; | ||
|
|
||
| --glow-1: rgba(194, 24, 91, 0.55); | ||
| --glow-2: rgba(194, 24, 91, 0.35); | ||
| --glow-3: rgba(194, 24, 91, 0.18); | ||
|
|
||
| color-scheme: light; | ||
| } | ||
| @media (prefers-color-scheme: light) { | ||
| :root:not([data-theme="dark"]) { | ||
| --ground: #eef1ec; | ||
| --raised: #f7f8f5; | ||
| --ink: #121613; | ||
| --ink-2: #444c46; | ||
| --ink-3: #5f6761; | ||
| --rule: #d3d9d3; | ||
|
|
||
| --bloom: #c2185b; | ||
| --bloom-hover: #a8134d; | ||
| --bloom-deep: #8e0f41; | ||
| --on-bloom: #ffffff; | ||
| --line-border: #bfc7c0; | ||
|
|
||
| --glow-1: rgba(194, 24, 91, 0.55); | ||
| --glow-2: rgba(194, 24, 91, 0.35); | ||
| --glow-3: rgba(194, 24, 91, 0.18); | ||
|
|
||
| color-scheme: light; | ||
| } | ||
| } | ||
|
|
||
| /* ─── Base ─── */ | ||
|
|
@@ -115,10 +170,10 @@ body { | |
| background: var(--bloom); | ||
| color: var(--on-bloom); | ||
| } | ||
| .btn-bloom:hover { background: var(--bloom-hover); } | ||
| .btn-bloom:active { background: var(--bloom-deep); color: var(--ink); } | ||
| .btn-line { | ||
| border: 1px solid var(--line-border); | ||
| color: var(--ink); | ||
| } | ||
| .btn-line:hover { border-color: var(--ink-3); } | ||
|
|
@@ -174,9 +229,9 @@ body { | |
| will-change: opacity; | ||
| transform-origin: 50% calc(var(--top) / 2); | ||
| filter: | ||
| drop-shadow(0 0 2px var(--glow-1)) | ||
| drop-shadow(0 0 8px var(--glow-2)) | ||
| drop-shadow(0 0 22px var(--glow-3)); | ||
| } | ||
|
|
||
| [data-bloom="on"] .flower-stem { | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -22,9 +22,16 @@ const silkscreen = Silkscreen({ | |
| }); | ||
|
|
||
| export const viewport: Viewport = { | ||
| themeColor: [ | ||
| { media: "(prefers-color-scheme: light)", color: "#eef1ec" }, | ||
| { media: "(prefers-color-scheme: dark)", color: "#131715" }, | ||
|
Comment on lines
+25
to
+27
There was a problem hiding this comment.
The new browser colors follow the device setting, but |
||
| ], | ||
|
There was a problem hiding this comment. Theme color ignores saved choiceLow Severity
Additional Locations (1)Triggered by learned rule: Hacklytics greenhouse-at-night look; PixelBed not PixelGarden Reviewed by Cursor Bugbot for commit 6b96cc9. Configure here. |
||
| }; | ||
|
|
||
| // Runs before first paint so a saved light/dark choice never flashes the | ||
| // other theme. Kept tiny and dependency-free; the key matches ThemeToggle. | ||
| const themeScript = `try{var t=localStorage.getItem("hl-theme");if(t==="light"||t==="dark")document.documentElement.dataset.theme=t}catch(e){}`; | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: "Hacklytics 2027: Digital Bloom · Data Science Hackathon at Georgia Tech", | ||
| description: | ||
|
|
@@ -109,8 +116,10 @@ export default function RootLayout({ children }: { children: React.ReactNode }) | |
| <html | ||
| lang="en" | ||
| className={`${instrumentSans.variable} ${silkscreen.variable}`} | ||
| suppressHydrationWarning | ||
| > | ||
| <head> | ||
| <script dangerouslySetInnerHTML={{ __html: themeScript }} /> | ||
| <script | ||
| type="application/ld+json" | ||
| dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| "use client"; | ||
|
|
||
| import { useSyncExternalStore } from "react"; | ||
|
|
||
| /** localStorage key; also read by the pre-paint script in app/layout.tsx. */ | ||
| export const THEME_KEY = "hl-theme"; | ||
|
|
||
| type Theme = "light" | "dark"; | ||
|
|
||
| const subscribe = (onChange: () => void) => { | ||
| const media = window.matchMedia("(prefers-color-scheme: light)"); | ||
| const observer = new MutationObserver(onChange); | ||
| observer.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ["data-theme"], | ||
| }); | ||
| media.addEventListener("change", onChange); | ||
| return () => { | ||
| observer.disconnect(); | ||
| media.removeEventListener("change", onChange); | ||
|
Comment on lines
+10
to
+20
There was a problem hiding this comment.
|
||
| }; | ||
| }; | ||
|
|
||
| // An explicit choice wins; otherwise the system setting decides, which is | ||
| // what globals.css does with no data-theme attribute. | ||
| const current = (): Theme => { | ||
| const set = document.documentElement.dataset.theme; | ||
| if (set === "light" || set === "dark") return set; | ||
| return window.matchMedia("(prefers-color-scheme: light)").matches | ||
| ? "light" | ||
| : "dark"; | ||
| }; | ||
|
|
||
| /** | ||
| * Night / day switch. The greenhouse at night stays the default look for | ||
| * anyone whose system is dark; this lets either side pick the other. | ||
| */ | ||
| export default function ThemeToggle({ | ||
| className = "", | ||
| }: { | ||
| className?: string; | ||
| }) { | ||
| // Server render has no theme; the button is drawn as "dark" until hydrated, | ||
| // which only affects the icon, never the page colours (set pre-paint). | ||
| const theme = useSyncExternalStore<Theme>(subscribe, current, () => "dark"); | ||
| const next: Theme = theme === "dark" ? "light" : "dark"; | ||
|
|
||
| return ( | ||
| <button | ||
| type="button" | ||
| onClick={() => { | ||
| document.documentElement.dataset.theme = next; | ||
| try { | ||
| localStorage.setItem(THEME_KEY, next); | ||
| } catch { | ||
| // Private mode or blocked storage: the choice lasts this page view. | ||
| } | ||
| }} | ||
| aria-label={ | ||
| next === "light" ? "Switch to light mode" : "Switch to dark mode" | ||
| } | ||
| title={next === "light" ? "Light mode" : "Dark mode"} | ||
| className={`w-11 h-11 rounded-full flex items-center justify-center border border-rule hover:border-ink-3 text-ink transition-colors bg-transparent shrink-0 ${className}`} | ||
| > | ||
| {theme === "dark" ? ( | ||
| // Sun, drawn on the pixel grid like the rest of the site. | ||
| <svg | ||
| viewBox="0 0 16 16" | ||
| width="16" | ||
| height="16" | ||
| shapeRendering="crispEdges" | ||
| aria-hidden="true" | ||
| fill="currentColor" | ||
| > | ||
| <rect x="6" y="5" width="4" height="6" /> | ||
| <rect x="5" y="6" width="6" height="4" /> | ||
| <rect x="7" y="1" width="2" height="2" /> | ||
| <rect x="7" y="13" width="2" height="2" /> | ||
| <rect x="1" y="7" width="2" height="2" /> | ||
| <rect x="13" y="7" width="2" height="2" /> | ||
| <rect x="3" y="3" width="2" height="2" /> | ||
| <rect x="11" y="3" width="2" height="2" /> | ||
| <rect x="3" y="11" width="2" height="2" /> | ||
| <rect x="11" y="11" width="2" height="2" /> | ||
| </svg> | ||
| ) : ( | ||
| // Moon. | ||
| <svg | ||
| viewBox="0 0 16 16" | ||
| width="16" | ||
| height="16" | ||
| shapeRendering="crispEdges" | ||
| aria-hidden="true" | ||
| fill="currentColor" | ||
| > | ||
| <rect x="6" y="2" width="5" height="2" /> | ||
| <rect x="4" y="4" width="4" height="2" /> | ||
| <rect x="3" y="6" width="4" height="4" /> | ||
| <rect x="4" y="10" width="4" height="2" /> | ||
| <rect x="6" y="12" width="5" height="2" /> | ||
| <rect x="10" y="10" width="3" height="2" /> | ||
| <rect x="11" y="4" width="2" height="2" /> | ||
| </svg> | ||
| )} | ||
| </button> | ||
| ); | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In light mode, pressing a
btn-bloombutton puts near-black text on a dark pink background. The “Notify me” label becomes hard to read while pressed. Keep the pressed text light in this theme.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!