diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 5fa128cb6..124d7ada3 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -163,7 +163,7 @@ const hasLogs = computed(
     // we do not have logs for skipped steps
     repo?.value && pipeline.value && step.value && step.value.state !== 'skipped',
 );
-const autoScroll = useStorage('log-auto-scroll', false);
+const autoScroll = useStorage('woodpecker:log-auto-scroll', false);
 const showActions = ref(false);
 const downloadInProgress = ref(false);
 const ansiUp = ref(new AnsiUp());
diff --git a/web/src/components/repo/settings/BadgeTab.vue b/web/src/components/repo/settings/BadgeTab.vue
index 0ace5d1bb..b7171a66c 100644
--- a/web/src/components/repo/settings/BadgeTab.vue
+++ b/web/src/components/repo/settings/BadgeTab.vue
@@ -55,7 +55,7 @@ import type { Repo } from '~/lib/api/types';
 const apiClient = useApiClient();
 const repo = inject<Ref<Repo>>('repo');
 
-const badgeType = useStorage('last-badge-type', 'markdown');
+const badgeType = useStorage('woodpecker:last-badge-type', 'markdown');
 
 if (!repo) {
   throw new Error('Unexpected: "repo" should be provided at this place');
diff --git a/web/src/components/user/UserGeneralTab.vue b/web/src/components/user/UserGeneralTab.vue
index fea7cc833..f46dc44d6 100644
--- a/web/src/components/user/UserGeneralTab.vue
+++ b/web/src/components/user/UserGeneralTab.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useLocalStorage } from '@vueuse/core';
+import { useStorage } from '@vueuse/core';
 import { SUPPORTED_LOCALES } from 'virtual:vue-i18n-supported-locales';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -39,7 +39,7 @@ const localeOptions = computed(() =>
   })),
 );
 
-const storedLocale = useLocalStorage('woodpecker:locale', locale.value);
+const storedLocale = useStorage('woodpecker:locale', locale.value);
 const selectedLocale = computed<string>({
   async set(_selectedLocale) {
     await setI18nLanguage(_selectedLocale);
diff --git a/web/src/compositions/useDarkMode.ts b/web/src/compositions/useDarkMode.ts
new file mode 100644
index 000000000..eac1787ab
--- /dev/null
+++ b/web/src/compositions/useDarkMode.ts
@@ -0,0 +1,28 @@
+import { useStorage } from '@vueuse/core';
+import { watch } from 'vue';
+
+const isDarkModeActive = useStorage('woodpecker:dark-mode', window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+watch(
+  isDarkModeActive,
+  (isActive) => {
+    if (isActive) {
+      document.documentElement.classList.remove('light');
+      document.documentElement.classList.add('dark');
+      document.documentElement.setAttribute('data-theme', 'dark');
+      document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#2A2E3A'); // internal-wp-secondary-600 (see windi.config.ts)
+    } else {
+      document.documentElement.classList.remove('dark');
+      document.documentElement.classList.add('light');
+      document.documentElement.setAttribute('data-theme', 'light');
+      document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#369943'); // internal-wp-primary-400
+    }
+  },
+  { immediate: true },
+);
+
+export function useDarkMode() {
+  return {
+    darkMode: isDarkModeActive,
+  };
+}
diff --git a/web/src/compositions/useUserConfig.ts b/web/src/compositions/useUserConfig.ts
index 294195273..e9019aa54 100644
--- a/web/src/compositions/useUserConfig.ts
+++ b/web/src/compositions/useUserConfig.ts
@@ -1,32 +1,19 @@
-import { computed, ref } from 'vue';
-
-const USER_CONFIG_KEY = 'woodpecker-user-config';
+import { useStorage } from '@vueuse/core';
+import { computed } from 'vue';
 
 interface UserConfig {
   isPipelineFeedOpen: boolean;
   redirectUrl: string;
 }
 
-const defaultUserConfig: UserConfig = {
+const config = useStorage<UserConfig>('woodpecker:user-config', {
   isPipelineFeedOpen: false,
   redirectUrl: '',
-};
-
-function loadUserConfig(): UserConfig {
-  const lsData = localStorage.getItem(USER_CONFIG_KEY);
-  if (lsData === null) {
-    return defaultUserConfig;
-  }
-
-  return JSON.parse(lsData) as UserConfig;
-}
-
-const config = ref<UserConfig>(loadUserConfig());
+});
 
 export default () => ({
   setUserConfig<T extends keyof UserConfig>(key: T, value: UserConfig[T]): void {
     config.value = { ...config.value, [key]: value };
-    localStorage.setItem(USER_CONFIG_KEY, JSON.stringify(config.value));
   },
   userConfig: computed(() => config.value),
 });
diff --git a/web/src/utils/locale.ts b/web/src/utils/locale.ts
index 091a85bde..2e68c8311 100644
--- a/web/src/utils/locale.ts
+++ b/web/src/utils/locale.ts
@@ -1,8 +1,8 @@
-import { useLocalStorage } from '@vueuse/core';
+import { useStorage } from '@vueuse/core';
 
 export function getUserLanguage(): string {
   const browserLocale = navigator.language.split('-')[0];
-  const selectedLocale = useLocalStorage('woodpecker:locale', browserLocale).value;
+  const selectedLocale = useStorage('woodpecker:locale', browserLocale).value;
 
   return selectedLocale;
 }