500 window is not defined nuxt3 and composition api

I wanna detect the user prefers-color-scheme and set data-mode attribute to the document root (html) but I can't.

my app.vue code is this:

<template>
<div>
<NuxtLayout />
<NuxtLoadingIndicator color="orange" />
<NuxtPage />
</div>
</template>

<script setup lang="ts">
    if (
        !("theme" in localStorage) &&
        window.matchMedia("(prefers-color-scheme: dark)").matches ) {
            document.documentElement.setAttribute("data-mode", "dark");
        }
</script>

but this page uses SSR because of this I get localStorage or window is not defined

I can't do this in onBeforeMount or onMounted lifecycles because colors change after dom loaded

important notes are these:

• this page should render on the server side
• I should detect prefers-color-scheme value before the dom loaded

I know the server has no access to the window, but can I send something to the server based on the system's mode and set the data-mode attribute before getting the HTML document?

from 500 window is not defined nuxt3 and composition api