vasceannie/supabase
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

fix/ deep-dark theme name issue (#28282)

Browse Source 
* init fix

* more

* more

* change storageKey

* added deep-dark css selectors as a workaround

* update css
This commit is contained in:
Jonathan Summers-Muir
2024-07-31 00:50:13 +08:00
committed by GitHub
parent 0c98f1db67
commit cff565ceda
12 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/design-system/app/layout.tsx
View File

@@ -21,7 +21,11 @@ export default async function Layout({ children }: RootLayoutProps) {
<html lang="en" suppressHydrationWarning>
<head />
<body className={inter.className}>
<ThemeProvider themes={['dark', 'light', 'deep-dark']} defaultTheme="system" enableSystem>
<ThemeProvider
themes={['dark', 'light', 'classic-dark']}
defaultTheme="system"
enableSystem
>
<div vaul-drawer-wrapper="">
<div className="relative flex min-h-screen flex-col bg-background">{children}</div>
</div>

4
apps/design-system/components/command-menu.tsx
View File

@@ -116,9 +116,9 @@ export function CommandMenu({ ...props }: DialogProps) {
<MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
Dark
</CommandItem_Shadcn_>
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('deep-dark'))}>
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('classic-dark'))}>
<MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
Deep Dark
Classic dark
</CommandItem_Shadcn_>
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('system'))}>
<LaptopIcon className="mr-2 h-4 w-4" strokeWidth={1} />

2
apps/design-system/registry/default/example/radio-group-card-with-children.tsx
View File

@@ -4,7 +4,7 @@ import SVG from 'react-inlinesvg'
export default function RadioGroupDemo() {
const singleThemes = [
{ name: 'Dark', value: 'dark' }, // Classic Supabase dark
{ name: 'Deep Dark', value: 'deep-dark' }, // Deep Dark Supabase dark
{ name: 'Classic dark', value: 'classic-dark' }, // Deep Dark Supabase dark
{ name: 'Light', value: 'light' }, // Classic Supabase light
{ name: 'System', value: 'system' }, // Classic Supabase light
] as const

7
apps/studio/pages/_app.tsx
View File

@@ -167,7 +167,12 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
<PageTelemetry>
<TooltipProvider>
<RouteValidationWrapper>
<ThemeProvider defaultTheme="system" enableSystem disableTransitionOnChange>
<ThemeProvider
defaultTheme="system"
themes={['dark', 'light', 'classic-dark']}
enableSystem
disableTransitionOnChange
>
<AppBannerContextProvider>
<CommandMenuWrapper>
<AppBannerWrapper>

2
apps/www/lib/theme.utils.ts
View File

@@ -13,7 +13,7 @@ export function useForceDeepDark() {
useEffect(() => {
const handleDocumentLoad = () => {
// Update the HTML element attributes
const theme = forceDarkMode || isDarkTheme ? (isGaSection ? 'deep-dark' : 'dark') : 'light'
const theme = forceDarkMode || isDarkTheme ? 'dark' : 'light'
document.documentElement.setAttribute('data-theme', theme)
document.documentElement.style.colorScheme = theme

1
apps/www/pages/_app.tsx
View File

@@ -118,7 +118,6 @@ export default function App({ Component, pageProps }: AppProps) {
<AuthProvider>
<ThemeProvider
themes={themes.map((theme) => theme.value)}
defaultTheme="system"
enableSystem
disableTransitionOnChange
forcedTheme={forceDarkMode ? 'dark' : undefined}

16
apps/www/pages/ga-week/tickets/[username].tsx
View File

@@ -46,15 +46,15 @@ export default function UsernamePage({ user, ogImageUrl }: Props) {
const isDark = resolvedTheme?.includes('dark')
const isDarkTheme = resolvedTheme === 'dark'
useEffect(() => {
isDarkTheme && setTheme('deep-dark')
}, [isDarkTheme])
// useEffect(() => {
// isDarkTheme && setTheme('deep-dark')
// }, [isDarkTheme])
useEffect(() => {
return () => {
isDark && setTheme('dark')
}
}, [])
// useEffect(() => {
// return () => {
// isDark && setTheme('dark')
// }
// }, [])
if (!ticketNumber) {
return <Error statusCode={404} />

2
packages/common/Providers.tsx
View File

@@ -7,7 +7,7 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
// @ts-ignore next-themes is old :/
return (
<NextThemesProvider {...props} themes={['dark', 'light', 'deep-dark']}>
<NextThemesProvider {...props} themes={['dark', 'light']} defaultTheme="dark">
{children}
</NextThemesProvider>
)

2
packages/ui/build/css/themes/dark-combined.css
View File

@@ -1,3 +1,5 @@
[data-theme='deep-dark'],
.deep-dark,
[data-theme='classic-dark'],
.classic-dark,
[data-theme='dark'],

2
packages/ui/build/css/themes/dark.css
View File

@@ -1,3 +1,5 @@
[data-theme='deep-dark'],
.deep-dark,
[data-theme='dark'],
.dark {
--helpers-os-appearance: Dark;

2
packages/ui/src/components/ThemeProvider/themes.ts
View File

@@ -6,6 +6,6 @@ export interface Theme {
export const themes = [
{ name: 'System', value: 'system' }, // Switches between dark and light
{ name: 'Dark', value: 'dark' }, // Classic Supabase dark
{ name: 'Deep Dark', value: 'deep-dark' }, // Deep Dark Supabase dark
{ name: 'Classic dark', value: 'classic-dark' }, // Deep Dark Supabase dark
{ name: 'Light', value: 'light' }, // Classic Supabase light
]

11
packages/ui/transformTokens.js
View File

@@ -236,11 +236,18 @@ themeFiles.map(function (filePath, i) {
fileName = fileName === 'concept-one' ? 'dark' : fileName
const selector = isCombinedDark
? `[data-theme='classic-dark'],
? `[data-theme='deep-dark'],
.deep-dark,
[data-theme='classic-dark'],
.classic-dark,
[data-theme='dark'],
.dark`
: `[data-theme='${fileName}'],
: fileName === 'dark'
? `[data-theme='deep-dark'],
.deep-dark,
[data-theme='${fileName}'],
.${fileName}`
: `[data-theme='${fileName}'],
.${fileName}`
let configTailwindFilesByType = []