Add resolvedAppearance & Fix Two Factor QR Code for dark mode

Author: manav-saliya

eslint.config.js

@@ -7,7 +7,7 @@ export default defineConfigWithVueTs(
     vue.configs['flat/essential'],
     vueTsConfigs.recommended,
     {
-        ignores: ['vendor', 'node_modules', 'public', 'bootstrap/ssr', 'tailwind.config.js', 'resources/js/components/ui/*'],
+        ignores: ['vendor', 'node_modules', 'public', 'bootstrap/ssr', 'resources/js/components/ui/*'],
     },
     {
         rules: {

resources/js/components/TwoFactorSetupModal.vue

@@ -14,6 +14,7 @@ import {
     PinInputGroup,
     PinInputSlot,
 } from '@/components/ui/pin-input';
+import { useAppearance } from '@/composables/useAppearance';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { confirm } from '@/routes/two-factor';
 import { Form } from '@inertiajs/vue3';
@@ -26,6 +27,8 @@ interface Props {
     twoFactorEnabled: boolean;
 }
 
+const { resolvedAppearance } = useAppearance();
+
 const props = defineProps<Props>();
 const isOpen = defineModel<boolean>('isOpen');
 
@@ -172,6 +175,12 @@ watch(
                                     <div
                                         v-html="qrCodeSvg"
                                         class="flex aspect-square size-full items-center justify-center"
+                                        :style="{
+                                            filter:
+                                                resolvedAppearance === 'dark'
+                                                    ? 'invert(1) brightness(1.5)'
+                                                    : undefined,
+                                        }"
                                     />
                                 </div>
                             </div>

resources/js/composables/useAppearance.ts

@@ -1,6 +1,7 @@
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
-type Appearance = 'light' | 'dark' | 'system';
+export type ResolvedAppearance = 'light' | 'dark';
+type Appearance = ResolvedAppearance | 'system';
 
 export function updateTheme(value: Appearance) {
     if (typeof window === 'undefined') {
@@ -48,6 +49,11 @@ const getStoredAppearance = () => {
     return localStorage.getItem('appearance') as Appearance | null;
 };
 
+const prefersDark = (): boolean => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+
 const handleSystemThemeChange = () => {
     const currentAppearance = getStoredAppearance();
 
@@ -80,6 +86,13 @@ export function useAppearance() {
         }
     });
 
+    const resolvedAppearance = computed<ResolvedAppearance>(() => {
+        if (appearance.value === 'system') {
+            return prefersDark() ? 'dark' : 'light';
+        }
+        return appearance.value;
+    });
+
     function updateAppearance(value: Appearance) {
         appearance.value = value;
 
@@ -94,6 +107,7 @@ export function useAppearance() {
 
     return {
         appearance,
+        resolvedAppearance,
         updateAppearance,
     };
 }