add dark mode in Demo #184
Merged
Conversation
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
blacktoast
force-pushed
the
retto/Oko-378
branch
from
38d7e84 to
16dd567
Compare
blacktoast
commented
Jan 7, 2026
apps/demo_web/src/app/layout.tsx
Outdated
Comment on lines
44
to
75
| const themeInitScript = ` | ||
| (function() { | ||
| try { | ||
| const stored = localStorage.getItem('theme'); | ||
| let preference = 'system'; | ||
| if (stored) { | ||
| const parsed = JSON.parse(stored); | ||
| preference = parsed.state?.preference || 'system'; | ||
| } | ||
| let theme = preference; | ||
| if (preference === 'system') { | ||
| theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; | ||
| } | ||
| document.documentElement.setAttribute('data-theme', theme); | ||
| } catch (e) {} | ||
| })(); | ||
| `; | ||
|
|
||
| export default function RootLayout({ | ||
| children, | ||
| }: Readonly<{ | ||
| children: React.ReactNode; | ||
| }>) { | ||
| return ( | ||
| <html lang="en"> | ||
| // To prevent flickering in dark mode or light mode in Next.js, an inline script is required. | ||
| // The reason is that even when using LayoutEffect in React, it executes after hydration. | ||
| <html lang="en" suppressHydrationWarning> | ||
| <head> | ||
| <script dangerouslySetInnerHTML={{ __html: themeInitScript }} /> | ||
| </head> | ||
| <body |
Contributor
Author
There was a problem hiding this comment.
Added a line script to prevent flickering before hydtraion.
Ryz0nd
approved these changes
Jan 8, 2026
eldenpark
reviewed
Jan 8, 2026
| import { IntegrationCard } from "./integration_card/integration_card"; | ||
| import { useViewState } from "@oko-wallet-demo-web/state/view"; | ||
| import { ThemeButton } from "@oko-wallet-demo-web/components/theme/theme_button"; | ||
| import { Spacing } from "@oko-wallet-common-ui/spacing/spacing"; |
eldenpark
reviewed
Jan 8, 2026
| | "quaternary-solid"; | ||
| | "quaternary-solid" | ||
| | "brand-solid"; | ||
| titleColor?: BaseTypographyProps["color"]; |
Collaborator
There was a problem hiding this comment.
Please try not to use the "Indexed Access Type" of TypeScript.
Contributor
Author
There was a problem hiding this comment.
Is there any particular advantage to using BaseTypographyColor over using BaseTypographyProps["color"]?
eldenpark
reviewed
Jan 8, 2026
| content, | ||
| hideFloatingArrow, | ||
| backgroundColor = "primary-solid", | ||
| titleColor = "white", |
Collaborator
There was a problem hiding this comment.
I'm also against the idea of having parameter default value
eldenpark
reviewed
Jan 8, 2026
| export const THEME_STORAGE_KEY = "theme"; | ||
| export const THEME_ATTRIBUTE = "data-theme"; | ||
|
|
||
| export const themeInitScript = ` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Pull Request
CONTRIBUTING.mdand followed the guidelines.Summary
The default setting follows the system preference. Clicking the theme button once or more saves the selected theme to local storage.
Links (Issue References, etc, if there's any)