fix selection problem

elsoul · Oct 17, 2024 · ce0674f · ce0674f
1 parent 9d47d24
commit ce0674f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -10,13 +10,13 @@ import { locales } from '@/app/config'
 const inter = Inter({
   subsets: ['latin'],
   display: 'swap',
-  variable: '--font-inter',
+  variable: '--font-inter'
 })
 
 const notoSansJP = Noto_Sans_JP({
   subsets: ['latin'],
   display: 'swap',
-  variable: '--font-noto-sans-jp',
+  variable: '--font-noto-sans-jp'
 })
 
 type Props = {
@@ -32,7 +32,7 @@ export function generateStaticParams() {
 
 export default async function LocaleLayout({
   children,
-  params: { locale },
+  params: { locale }
 }: Props) {
   unstable_setRequestLocale(locale)
   const messages = await getMessages({ locale })
@@ -42,12 +42,7 @@ export default async function LocaleLayout({
         className={cn(`${inter.variable} ${notoSansJP.variable}`)}
         suppressHydrationWarning
       >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="dark"
-          enableSystem={false}
-          disableTransitionOnChange
-        >
+        <ThemeProvider attribute="class" defaultTheme="system">
           <NextIntlClientProvider messages={messages}>
             {children}
             <Toaster />

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -85,6 +85,12 @@
       'Segoe UI Symbol',
       'Noto Color Emoji';
   }
+  ::selection {
+    background-color: rgba(209, 213, 219, 0.5);
+  }
+  .dark ::selection {
+    background-color: rgba(82, 82, 91, 0.5);
+  }
 }
 
 @layer base {

diff --git a/src/components/config/ModeToggle.tsx b/src/components/config/ModeToggle.tsx
@@ -37,9 +37,9 @@ export function ModeToggle() {
         <DropdownMenuItem onClick={() => setTheme('dark')}>
           {t('common.darkMode')}
         </DropdownMenuItem>
-        {/* <DropdownMenuItem onClick={() => setTheme('system')}>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
           {t('common.systemMode')}
-        </DropdownMenuItem> */}
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   )