mirror of
https://github.com/supabase/supabase.git
synced 2026-10-19 16:19:10 +03:00
Jonathan Summers-MuirandFrancesco Sansalvadore
6d760a1a99
* chore: move to deeper dark * tidy up boxes on www * update deep-dark colors * fix homepage product cards * toned down pricing page a little * update * lots of color changes * Update grid.scss * Update EntityListItem.tsx * Update EntityListItem.tsx * fix partners page icon * fix partners page colors * update theme * Update global.css * combined dark theme so classic-dark does not break on other sites * Update package-lock.json * updated color tokens pipeline to support combined dark theme * smol updates * Update FeaturedThumb.tsx * Update BlogFilters.tsx * Update BlogListItem.tsx * Update BlogListItem.tsx * Update UserSettingsDropdown.tsx * Update NavigationBar.tsx --------- Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import Panel from 'components/ui/Panel'
|
|
import { BASE_PATH } from 'lib/constants'
|
|
import { useTheme } from 'next-themes'
|
|
import { useEffect, useState } from 'react'
|
|
import SVG from 'react-inlinesvg'
|
|
import {
|
|
Label_Shadcn_,
|
|
RadioGroup_Shadcn_,
|
|
RadioGroupLargeItem_Shadcn_,
|
|
singleThemes,
|
|
Theme,
|
|
} from 'ui'
|
|
|
|
const ThemeSettings = () => {
|
|
const [mounted, setMounted] = useState(false)
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
/**
|
|
* Avoid Hydration Mismatch
|
|
* https://github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch
|
|
*/
|
|
// useEffect only runs on the client, so now we can safely show the UI
|
|
useEffect(() => {
|
|
setMounted(true)
|
|
}, [])
|
|
|
|
if (!mounted) {
|
|
return null
|
|
}
|
|
|
|
function SingleThemeSelection() {
|
|
return (
|
|
<form>
|
|
<RadioGroup_Shadcn_
|
|
name="theme"
|
|
onValueChange={setTheme}
|
|
aria-label="Choose a theme"
|
|
defaultValue={theme}
|
|
value={theme}
|
|
className="flex flex-wrap gap-3"
|
|
>
|
|
{singleThemes.map((theme: Theme) => (
|
|
<RadioGroupLargeItem_Shadcn_ key={theme.value} value={theme.value} label={theme.name}>
|
|
<SVG src={`${BASE_PATH}/img/themes/${theme.value}.svg?v=2`} />
|
|
</RadioGroupLargeItem_Shadcn_>
|
|
))}
|
|
</RadioGroup_Shadcn_>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Panel title={<h5 key="panel-title">Appearance</h5>}>
|
|
<Panel.Content className="grid grid-cols-12">
|
|
<div className="col-span-4 flex flex-col gap-5">
|
|
<Label_Shadcn_ htmlFor="theme" className="text-light">
|
|
Theme mode
|
|
</Label_Shadcn_>
|
|
<p className="text-sm text-foreground-light max-w-[220px]">
|
|
Choose how Supabase looks to you. Select a single theme, or sync with your system.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="col-span-8 flex flex-col gap-4">
|
|
<p className="text-sm text-light">Supabase will use your selected theme</p>
|
|
<SingleThemeSelection />
|
|
</div>
|
|
</Panel.Content>
|
|
</Panel>
|
|
)
|
|
}
|
|
|
|
export default ThemeSettings
|