From ae84e7e87927d30a68312f996d1930a206fb940c Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Fri, 23 Jan 2026 13:35:56 +0700
Subject: [PATCH] Background Color

---
 .../components/common/LanguageSwitcher.vue    | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/Frontend-Learner/components/common/LanguageSwitcher.vue b/Frontend-Learner/components/common/LanguageSwitcher.vue
index 02c908f2..b17eb1a3 100644
--- a/Frontend-Learner/components/common/LanguageSwitcher.vue
+++ b/Frontend-Learner/components/common/LanguageSwitcher.vue
@@ -49,8 +49,7 @@ const changeLocale = async (code: string) => {
         <q-item-label 
           header 
           class="text-xs font-black uppercase tracking-wider mb-1 px-4 pt-3"
-          style="color: var(--text-secondary)"
-          :class="['text-slate-600', 'dark:text-slate-400']"
+          :class="['text-slate-900', 'dark:text-slate-200']"
         >
           {{ $t('language.label') }}
         </q-item-label>
@@ -65,7 +64,7 @@ const changeLocale = async (code: string) => {
           :class="[
             locale === loc.code 
               ? 'bg-blue-50 dark:bg-blue-900/20' 
-              : 'hover:bg-slate-50 dark:hover:bg-slate-800'
+              : 'hover:bg-slate-50 dark:hover:bg-slate-700/50'
           ]"
         >
           <q-item-section avatar style="min-width: 0; padding-right: 12px;">
@@ -162,13 +161,6 @@ const changeLocale = async (code: string) => {
   background: rgba(75, 130, 247, 0.1);
 }
 
-:deep(.language-menu) {
-  border-radius: 16px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-  background: var(--bg-surface);
-  border: 1px solid var(--border-color);
-}
-
 :global(.dark) .language-btn {
   background: #1e293b;
   border-color: rgba(255, 255, 255, 0.15);
@@ -180,13 +172,23 @@ const changeLocale = async (code: string) => {
   border-color: var(--primary);
 }
 
-:global(.dark) :deep(.language-menu) {
-  background: #1e293b;
-  border-color: rgba(255, 255, 255, 0.1);
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
-}
-
 :global(.dark) .active-locale {
   background: rgba(59, 130, 246, 0.2);
 }
 </style>
+
+<style>
+/* Global styles for teleported menu */
+.language-menu {
+  border-radius: 16px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+}
+
+.dark .language-menu {
+  background: #1e293b;
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+}
+</style>