Vue Js Check Whether User Device in Dark or Light Mode

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3> Vue Js Check Whether User Device in Dark or Light Mode</h3>
        <div :class="mode === 'dark' ? 'dark-mode' : 'light-mode'">
            <p>User Device in {{ mode === 'dark' ? 'Dark Mode' : 'Light Mode' }}</p>
        </div>
    </div>

})
    </script>
    <style scoped>
        #app {
            font-family: Arial, sans-serif;
            text-align: center;
        }

.dark-mode {
            background-color: #222;
            color: #fff;
            transition: background-color 0.5s ease;
        }

.light-mode {
            background-color: #fff;
            color: #222;
            transition: background-color 0.5s ease;
        }

.dark-mode p {
            color: #fff;
        }

.light-mode p {
            color: #222;
        }
    </style>

</body>

</html>