Merge branch 'tailwindcss'

Author: gureckis

src/core/MainApp.vue

@@ -54,7 +54,7 @@ const deviceTooSmall = computed(() => {
 </script>
 
 <template>
-  <div class="@container" ref="containerDiv" :class="api.config.colorMode === 'dark' ? 'dark' : 'light'">
+  <div class="@container" ref="containerDiv">
     <StatusBar v-if="showStatusBar" />
     <div class="bg-background" v-if="deviceTooSmall">
       <WindowSizerView triggered="true"></WindowSizerView>

src/core/SmileApp.vue

@@ -182,10 +182,7 @@ onMounted(() => {
       <div class="content-wrapper">
         <div class="content-and-console">
           <!-- Main content - scrollable -->
-          <div
-            class="main-content bg-background text-foreground"
-            :class="api.store.dev.isFullscreen && api.config.colorMode === 'dark' ? 'dark' : 'light'"
-          >
+          <div class="main-content bg-background text-foreground">
             <div v-if="isLoading" class="loading-container">
               <div class="loading-spinner"></div>
               <p>Loading...</p>

src/dev/developer_mode/ResponsiveDeviceContainer.vue

@@ -151,6 +151,7 @@ const shouldUseResponsiveContainer = computed(() => {
     v-if="api.store.dev.isFullscreen || !shouldUseResponsiveContainer"
     ref="fullScreenDiv"
     class="fullscreen-container bg-background text-foreground"
+    :class="api.currentRouteName() !== 'recruit' ? (api.config.colorMode === 'dark' ? 'dark' : 'light') : ''"
   >
     <MainApp :deviceWidth="fullScreenWidth" :deviceHeight="fullScreenHeight" />
   </div>
@@ -205,7 +206,10 @@ const shouldUseResponsiveContainer = computed(() => {
           </TooltipProvider>
         </div>
       </div>
-      <div class="device-wrapper" :class="api.config.colorMode === 'dark' ? 'dark' : 'light'">
+      <div
+        class="device-wrapper"
+        :class="api.currentRouteName() !== 'recruit' ? (api.config.colorMode === 'dark' ? 'dark' : 'light') : ''"
+      >
         <div class="device-container bg-background text-foreground" ref="containerDiv">
           <MainApp :deviceWidth="api.store.dev.deviceWidth" :deviceHeight="api.store.dev.deviceHeight" />
         </div>