Merge branch 'main' into woodpecker-go/use-model-feed

web/src/assets/locales/cs.json

@@ -132,7 +132,6 @@
   "api": "API",
   "back": "Zpět",
   "cancel": "Zrušit",
-  "color_scheme_dark": "Přepnutí do režimu světla",
   "color_scheme_light": "Přepnutí do tmavého režimu",
   "docs": "Doky",
   "documentation_for": "Dokumentace k \"{topic}\"",

web/src/assets/locales/de.json

@@ -136,7 +136,6 @@
   "api": "API",
   "back": "Zurück",
   "cancel": "Abbrechen",
-  "color_scheme_dark": "Wechsle zu hellem Modus",
   "color_scheme_light": "Wechsle zu dunklem Modus",
   "default": "Standard",
   "docs": "Docs",

web/src/assets/locales/en.json

@@ -12,8 +12,6 @@
   "password": "Password",
   "url": "URL",
   "back": "Back",
-  "color_scheme_light": "Switch to dark mode",
-  "color_scheme_dark": "Switch to light mode",
   "unknown_error": "An unknown error occurred",
   "documentation_for": "Documentation for \"{topic}\"",
   "pipeline_feed": "Pipeline feed",
@@ -453,7 +451,13 @@
       "settings": "User Settings",
       "general": {
         "general": "General",
-        "language": "Language"
+        "language": "Language",
+        "theme": {
+          "theme": "Theme",
+          "light": "Light",
+          "dark": "Dark",
+          "auto": "Auto"
+        }
       },
       "secrets": {
         "secrets": "Secrets",

web/src/assets/locales/es.json

@@ -15,7 +15,6 @@
   },
   "back": "Atrás",
   "cancel": "Cancelar",
-  "color_scheme_dark": "Cambiar al modo claro",
   "color_scheme_light": "Cambiar al modo oscuro",
   "docs": "Documentación",
   "documentation_for": "Documentación de \"{topic}\"",

web/src/assets/locales/fi.json

@@ -1,7 +1,6 @@
 {
   "back": "Takaisin",
   "cancel": "Peru",
-  "color_scheme_dark": "Vaihda valoisaan tilaan",
   "color_scheme_light": "Vaihda tummaan tilaan",
   "docs": "Dokumentaatio",
   "login": "Kirjaudu",

web/src/assets/locales/fr.json

@@ -136,7 +136,6 @@
   "api": "API",
   "back": "Revenir en arrière",
   "cancel": "Annuler",
-  "color_scheme_dark": "Basculer en couleurs claires",
   "color_scheme_light": "Basculer en couleurs sombres",
   "default": "défaut",
   "docs": "Docs",

web/src/assets/locales/id.json

@@ -136,7 +136,6 @@
   "api": "API",
   "back": "Kembali",
   "cancel": "Batal",
-  "color_scheme_dark": "Ubah ke mode terang",
   "color_scheme_light": "Ubah ke mode gelap",
   "default": "bawaan",
   "docs": "Dokumentasi",

web/src/assets/locales/it.json

@@ -28,7 +28,6 @@
   },
   "back": "Indietro",
   "cancel": "Annulla",
-  "color_scheme_dark": "Passa al tema chiaro",
   "color_scheme_light": "Passa al tema scuro",
   "docs": "Documentazione",
   "documentation_for": "Documentazione per \"{topic}\"",

web/src/assets/locales/lv.json

@@ -120,7 +120,6 @@
   },
   "back": "Atpakaļ",
   "cancel": "Atcelt",
-  "color_scheme_dark": "Pārslēgties uz gaišo režīmu",
   "color_scheme_light": "Pārslēgties uz tumšo režīmu",
   "docs": "Dokumentācija",
   "documentation_for": "Dokumentācija par \"{topic}\"",

web/src/assets/locales/nl.json

@@ -2,7 +2,6 @@
   "api": "API",
   "back": "Terug",
   "cancel": "Annuleren",
-  "color_scheme_dark": "Wissel naar lichte modus",
   "color_scheme_light": "Wissel naar donkere modus",
   "docs": "Documentatie",
   "documentation_for": "Documentatie voor \"{topic}\"",

web/src/assets/locales/pl.json

@@ -112,7 +112,6 @@
   },
   "back": "Powrót",
   "cancel": "Anuluj",
-  "color_scheme_dark": "Przełącz na tryb jasny",
   "color_scheme_light": "Przełącz na tryb ciemny",
   "docs": "Dokumentacja",
   "documentation_for": "Dokumentacja do tematu \"{topic}\"",

web/src/assets/locales/pt.json

@@ -1,7 +1,6 @@
 {
   "back": "Voltar",
   "cancel": "Cancelar",
-  "color_scheme_dark": "Mudar para o modo claro",
   "color_scheme_light": "Mudar para o modo escuro",
   "docs": "Documentação",
   "documentation_for": "Documentação para \"{topic}\"",

web/src/assets/locales/ru.json

@@ -112,7 +112,6 @@
   },
   "back": "Назад",
   "cancel": "Отменить",
-  "color_scheme_dark": "Использовать светлую тему",
   "color_scheme_light": "Использовать тёмную тему",
   "docs": "Документация",
   "documentation_for": "Документация о \"{topic}\"",

web/src/assets/locales/uk.json

@@ -29,7 +29,6 @@
   },
   "back": "Назад",
   "cancel": "Скасувати",
-  "color_scheme_dark": "Перехід у світловий режим",
   "color_scheme_light": "Перехід у темний режим",
   "docs": "Документи",
   "documentation_for": "Документація для \"{topic}\"",

web/src/assets/locales/zh-Hans.json

@@ -136,7 +136,6 @@
   "api": "API",
   "back": "返回",
   "cancel": "取消",
-  "color_scheme_dark": "切换到浅色模式",
   "color_scheme_light": "切换到深色模式",
   "default": "默认",
   "docs": "文档",

web/src/components/layout/Panel.vue

@@ -39,13 +39,14 @@ import Icon from '~/components/atomic/Icon.vue';
 const props = defineProps<{
   title?: string;
   collapsable?: boolean;
+  collapsedByDefault?: boolean;
 }>();
 
 /**
  * _collapsed is used to store the internal state of the panel, but is
  * ignored if the panel is not collapsable.
  */
-const _collapsed = ref(false);
+const _collapsed = ref(props.collapsedByDefault || false);
 
 const collapsed = computed(() => props.collapsable && _collapsed.value);
 </script>

web/src/components/layout/header/Navbar.vue

@@ -26,13 +26,6 @@
     </div>
     <!-- Right Icons Box -->
     <div class="flex ml-auto -m-1.5 items-center space-x-2">
-      <!-- Dark Mode Toggle -->
-      <IconButton
-        :icon="darkMode ? 'dark' : 'light'"
-        :title="$t(darkMode ? 'color_scheme_dark' : 'color_scheme_light')"
-        class="navbar-icon"
-        @click="darkMode = !darkMode"
-      />
       <!-- Admin Settings -->
       <IconButton
         v-if="user?.admin"
@@ -62,15 +55,13 @@ import Button from '~/components/atomic/Button.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
 import useAuthentication from '~/compositions/useAuthentication';
 import useConfig from '~/compositions/useConfig';
-import { useDarkMode } from '~/compositions/useDarkMode';
 
 import ActivePipelines from './ActivePipelines.vue';
 
 const config = useConfig();
 const route = useRoute();
 const authentication = useAuthentication();
 const { user } = authentication;
-const { darkMode } = useDarkMode();
 const apiUrl = `${config.rootPath ?? ''}/swagger/index.html`;
 
 function doLogin() {

web/src/components/user/UserGeneralTab.vue

@@ -3,6 +3,16 @@
     <InputField :label="$t('user.settings.general.language')">
       <SelectField v-model="selectedLocale" :options="localeOptions" />
     </InputField>
+    <InputField :label="$t('user.settings.general.theme.theme')">
+      <SelectField
+        v-model="storeTheme"
+        :options="[
+          { value: 'auto', text: $t('user.settings.general.theme.auto') },
+          { value: 'light', text: $t('user.settings.general.theme.light') },
+          { value: 'dark', text: $t('user.settings.general.theme.dark') },
+        ]"
+      />
+    </InputField>
   </Settings>
 </template>
 
@@ -17,8 +27,10 @@ import { useI18n } from 'vue-i18n';
 import SelectField from '~/components/form/SelectField.vue';
 import Settings from '~/components/layout/Settings.vue';
 import { setI18nLanguage } from '~/compositions/useI18n';
+import { useTheme } from '~/compositions/useTheme';
 
 const { locale } = useI18n();
+const { storeTheme } = useTheme();
 
 const localeOptions = computed(() =>
   SUPPORTED_LOCALES.map((supportedLocale) => ({

web/src/compositions/useFavicon.ts

@@ -1,10 +1,11 @@
 import { computed, ref, watch } from 'vue';
 
 import useConfig from '~/compositions/useConfig';
-import { useDarkMode } from '~/compositions/useDarkMode';
+import { useTheme } from '~/compositions/useTheme';
 import { PipelineStatus } from '~/lib/api/types';
 
-const darkMode = computed(() => (useDarkMode().darkMode.value ? 'dark' : 'light'));
+const { theme } = useTheme();
+const darkMode = computed(() => theme.value);
 
 type Status = 'default' | 'success' | 'pending' | 'error';
 const faviconStatus = ref<Status>('default');

web/src/compositions/useTheme.ts

@@ -0,0 +1,31 @@
+import { useColorMode } from '@vueuse/core';
+import { watch } from 'vue';
+
+const { store: storeTheme, state: resolvedTheme } = useColorMode({
+  storageKey: 'woodpecker:theme',
+});
+
+function updateTheme() {
+  if (resolvedTheme.value === 'dark') {
+    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
+  }
+}
+
+watch(storeTheme, updateTheme);
+
+updateTheme();
+
+export function useTheme() {
+  return {
+    theme: resolvedTheme,
+    storeTheme,
+  };
+}

web/src/views/repo/pipeline/PipelineConfig.vue

@@ -4,6 +4,7 @@
       v-for="pipelineConfig in pipelineConfigs || []"
       :key="pipelineConfig.hash"
       collapsable
+      collapsed-by-default
       :title="pipelineConfig.name"
     >
       <SyntaxHighlight class="font-mono whitespace-pre overflow-auto" language="yaml" :code="pipelineConfig.data" />