Improve dark style text color for better readibility (#985)

2024-04-28 12:28:44 +00:00 · 2022-06-17 03:00:31 +03:00 · 2022-06-17 03:00:31 +03:00 · 14b3cfff1b
parent 17999da20f
commit 14b3cfff1b
36 changed files with 125 additions and 147 deletions
--- a/web/src/App.vue
+++ b/web/src/App.vue
@ -49,54 +49,6 @@ export default defineComponent({
 });
 </script>

-<!-- eslint-disable-next-line vue-scoped-css/require-scoped -->
-<style>
-html,
-body,
-#app {
-  width: 100%;
-  height: 100%;
-}
-
-.vue-notification {
-  @apply rounded-md text-base border-l-6;
-}
-
-.vue-notification .notification-title {
-  @apply font-normal;
-}
-
-.vue-notification.success {
-  @apply bg-lime-600 border-l-lime-700;
-}
-
-.vue-notification.error {
-  @apply bg-red-600 border-l-red-700;
-}
-
-*::-webkit-scrollbar {
-  @apply bg-transparent w-12px h-12px;
-}
-
-* {
-  scrollbar-width: thin;
-}
-
-*::-webkit-scrollbar-thumb {
-  transition: background 0.2s ease-in-out;
-  border: 3px solid transparent;
-  @apply bg-cool-gray-200 dark:bg-dark-200 rounded-full bg-clip-content;
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  @apply bg-cool-gray-300 dark:bg-dark-100;
-}
-
-*::-webkit-scrollbar-corner {
-  @apply bg-transparent;
-}
-</style>
-
 <style scoped>
 .app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@ -51,7 +51,7 @@
        "pipeline_path": {
          "path": "Pipeline path",
          "default": "By default: .woodpecker/*.yml -> .woodpecker.yml -> .drone.yml",
-          "desc": "Path to your pipeline config (for example<span class=\"bg-gray-300 dark:bg-dark-100 rounded-md px-1\">my/path/</span>). Folders should end with a<span class=\"bg-gray-300 dark:bg-dark-100 rounded-md px-1\">/</span>."
+          "desc": "Path to your pipeline config (for example <span class=\"bg-gray-300 dark:bg-dark-300 rounded-md px-1\">my/path/</span>). Folders should end with a <span class=\"bg-gray-300 dark:bg-dark-300 rounded-md px-1\">/</span>."
        },

        "allow_pr": {
--- a/web/src/components/atomic/Button.vue
+++ b/web/src/components/atomic/Button.vue
@ -18,7 +18,7 @@
      disabled:opacity-50 disabled:cursor-not-allowed
    "
    :class="{
-      'bg-white hover:bg-gray-200 border-gray-300 text-gray-500 dark:text-gray-500 dark:bg-dark-gray-700 dark:border-dark-400 dark:hover:bg-dark-gray-800':
+      'bg-white hover:bg-gray-200 border-gray-300 text-color dark:bg-dark-gray-700 dark:border-dark-400 dark:hover:bg-dark-gray-800':
        color === 'gray',
      'bg-lime-600 hover:bg-lime-700 border-lime-800 text-white dark:text-gray-400 dark:bg-lime-900 dark:hover:bg-lime-800':
        color === 'green',
--- a/web/src/components/atomic/IconButton.vue
+++ b/web/src/components/atomic/IconButton.vue
@ -6,13 +6,13 @@
      flex
      items-center
      justify-center
-      text-gray-500
+      text-color
      px-1
      py-1
      rounded-full
      bg-transparent
      hover:bg-gray-200 hover:text-gray-700
-      dark:hover:bg-gray-600 dark:text-gray-500 dark:hover:text-gray-700
+      dark:hover:bg-gray-600 dark:hover:text-gray-700
      cursor-pointer
      transition-all
      duration-150
--- a/web/src/components/build-feed/BuildFeedItem.vue
+++ b/web/src/components/build-feed/BuildFeedItem.vue
@ -1,5 +1,5 @@
 <template>
-  <div v-if="build" class="flex text-gray-600 dark:text-gray-500 w-full">
+  <div v-if="build" class="flex text-color w-full">
    <BuildStatusIcon :build="build" class="flex items-center" />
    <div class="flex flex-col ml-4 min-w-0">
      <span class="underline">{{ build.owner }} / {{ build.name }}</span>
--- a/web/src/components/build-feed/BuildFeedSidebar.vue
+++ b/web/src/components/build-feed/BuildFeedSidebar.vue
@ -21,7 +21,7 @@
      <BuildFeedItem :build="build" />
    </router-link>

-    <span v-if="sortedBuildFeed.length === 0" class="text-gray-500 m-4">{{ $t('repo.build.no_pipelines') }}</span>
+    <span v-if="sortedBuildFeed.length === 0" class="text-color m-4">{{ $t('repo.build.no_pipelines') }}</span>
  </div>
 </template>

--- a/web/src/components/form/Checkbox.vue
+++ b/web/src/components/form/Checkbox.vue
@ -22,10 +22,8 @@
      @click="innerValue = !innerValue"
    />
    <div class="flex flex-col ml-4">
-      <label v-if="label" class="cursor-pointer text-gray-600 dark:text-gray-500" :for="`checkbox-${id}`">{{
-        label
-      }}</label>
-      <span v-if="description" class="text-sm text-gray-400 dark:text-gray-600">{{ description }}</span>
+      <label v-if="label" class="cursor-pointer text-color" :for="`checkbox-${id}`">{{ label }}</label>
+      <span v-if="description" class="text-sm text-color-alt">{{ description }}</span>
    </div>
  </div>
 </template>
--- a/web/src/components/form/InputField.vue
+++ b/web/src/components/form/InputField.vue
@ -1,11 +1,11 @@
 <template>
  <div class="flex flex-col mt-2 mb-4">
-    <div class="flex items-center text-gray-500 font-bold mb-2">
+    <div class="flex items-center text-color font-bold mb-2">
      <label v-if="label" v-bind="$attrs">{{ label }}</label>
      <DocsLink v-if="docsUrl" :url="docsUrl" class="ml-2" />
    </div>
    <slot />
-    <div v-if="$slots['description']" class="ml-1 text-gray-400">
+    <div v-if="$slots['description']" class="ml-1 text-color-alt">
      <slot name="description" />
    </div>
  </div>
--- a/web/src/components/form/RadioField.vue
+++ b/web/src/components/form/RadioField.vue
@ -21,10 +21,8 @@
      @click="innerValue = option.value"
    />
    <div class="flex flex-col ml-4">
-      <label class="cursor-pointer text-gray-600 dark:text-gray-500" :for="`radio-${id}-${option.value}`">{{
-        option.text
-      }}</label>
-      <span v-if="option.description" class="text-sm text-gray-400 dark:text-gray-600">{{ option.description }}</span>
+      <label class="cursor-pointer text-color" :for="`radio-${id}-${option.value}`">{{ option.text }}</label>
+      <span v-if="option.description" class="text-sm text-color-alt">{{ option.description }}</span>
    </div>
  </div>
 </template>
--- a/web/src/components/form/SelectField.vue
+++ b/web/src/components/form/SelectField.vue
@ -3,12 +3,12 @@
    v-model="innerValue"
    class="w-full border border-gray-900 py-1 px-2 rounded-md bg-white focus:outline-none border-gray-900"
    :class="{
-      'text-gray-500': innerValue === '',
+      'text-color': innerValue === '',
      'text-gray-900': innerValue !== '',
    }"
  >
    <option v-if="placeholder" value="" class="hidden">{{ placeholder }}</option>
-    <option v-for="option in options" :key="option.value" :value="option.value" class="text-gray-500">
+    <option v-for="option in options" :key="option.value" :value="option.value" class="text-color">
      {{ option.text }}
    </option>
  </select>
--- a/web/src/components/form/TextField.vue
+++ b/web/src/components/form/TextField.vue
@ -14,14 +14,7 @@
    <input
      v-if="lines === 1"
      v-model="innerValue"
-      class="
-        w-full
-        bg-transparent
-        text-gray-600
-        placeholder-gray-400
-        focus:outline-none focus:border-blue-400
-        dark:placeholder-gray-600 dark:text-gray-500
-      "
+      class="w-full bg-transparent text-color focus:outline-none focus:border-blue-400"
      :disabled="disabled"
      :type="type"
      :placeholder="placeholder"
@ -29,14 +22,7 @@
    <textarea
      v-else
      v-model="innerValue"
-      class="
-        w-full
-        bg-transparent
-        text-gray-600
-        placeholder-gray-400
-        focus:outline-none focus:border-blue-400
-        dark:placeholder-gray-600 dark:text-gray-500
-      "
+      class="w-full bg-transparent text-color focus:outline-none focus:border-blue-400"
      :disabled="disabled"
      :placeholder="placeholder"
      :rows="lines"
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@ -1,6 +1,6 @@
 <template>
-  <div class="flex shadow-lg bg-lime-600 text-neutral-content px-2 md:px-8 py-2 dark:bg-dark-gray-900">
-    <div class="flex text-white dark:text-gray-500 items-center">
+  <div class="flex shadow-lg dark:shadow-sm bg-lime-600 text-neutral-content px-2 md:px-8 py-2 dark:bg-dark-gray-900">
+    <div class="flex text-white dark:text-gray-400 items-center">
      <router-link :to="{ name: 'home' }" class="relative">
        <img class="-mt-3 w-8" src="../../../assets/logo.svg?url" />
        <span class="absolute -bottom-4 text-xs">{{ version }}</span>
@ -14,7 +14,7 @@
        <span class="hidden md:flex">{{ $t('repositories') }}</span>
      </router-link>
    </div>
-    <div class="flex ml-auto items-center space-x-4 text-white dark:text-gray-500">
+    <div class="flex ml-auto items-center space-x-4 text-white dark:text-gray-400">
      <a
        :href="docsUrl"
        target="_blank"
--- a/web/src/components/repo/build/BuildItem.vue
+++ b/web/src/components/repo/build/BuildItem.vue
@ -23,22 +23,13 @@
      </div>

      <div class="w-full md:w-auto md:mx-4 flex items-center min-w-0">
-        <span
-          class="text-gray-600 <md:underline dark:text-gray-500 whitespace-nowrap overflow-hidden overflow-ellipsis"
-          >{{ message }}</span
-        >
+        <span class="text-color-alt <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{
+          message
+        }}</span>
      </div>

      <div
-        class="
-          grid grid-rows-2 grid-flow-col
-          w-full
-          md:ml-auto md:w-96
-          py-2
-          gap-x-4 gap-y-2
-          flex-shrink-0
-          text-gray-500
-        "
+        class="grid grid-rows-2 grid-flow-col w-full md:ml-auto md:w-96 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-color"
      >
        <div class="flex space-x-2 items-center min-w-0">
          <Icon v-if="build.event === 'pull_request'" name="pull_request" />
--- a/web/src/components/repo/build/BuildList.vue
+++ b/web/src/components/repo/build/BuildList.vue
@ -9,7 +9,7 @@
      <BuildItem :build="build" />
    </router-link>
    <Panel v-if="builds.length === 0">
-      <span class="text-gray-500">{{ $t('repo.build.no_pipelines') }}</span>
+      <span class="text-color">{{ $t('repo.build.no_pipelines') }}</span>
    </Panel>
  </div>
 </template>
--- a/web/src/components/repo/build/BuildLog.vue
+++ b/web/src/components/repo/build/BuildLog.vue
@ -13,7 +13,7 @@
        <div id="terminal" class="w-full h-full" />
      </div>

-      <div class="m-auto text-xl text-gray-500 dark:text-gray-500">
+      <div class="m-auto text-xl text-color">
        <span v-if="proc?.error" class="text-red-400">{{ proc.error }}</span>
        <span v-else-if="proc?.state === 'skipped'" class="text-red-400">{{ $t('repo.build.actions.canceled') }}</span>
        <span v-else-if="!proc?.start_time">{{ $t('repo.build.step_not_started') }}</span>
--- a/web/src/components/repo/settings/ActionsTab.vue
+++ b/web/src/components/repo/settings/ActionsTab.vue
@ -1,7 +1,7 @@
 <template>
  <Panel>
    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
-      <h1 class="text-xl ml-2 text-gray-500">{{ $t('repo.settings.actions.actions') }}</h1>
+      <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.actions.actions') }}</h1>
    </div>

    <div class="flex flex-col">
--- a/web/src/components/repo/settings/BadgeTab.vue
+++ b/web/src/components/repo/settings/BadgeTab.vue
@ -1,7 +1,7 @@
 <template>
  <Panel>
    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
-      <h1 class="text-xl ml-2 text-gray-500">{{ $t('repo.settings.badge.badge') }}</h1>
+      <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.badge.badge') }}</h1>
      <a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="ml-auto">
        <img :src="badgeUrl" />
      </a>
@ -9,17 +9,17 @@

    <div class="flex flex-col space-y-4">
      <div>
-        <h2 class="text-lg text-gray-500 ml-2">{{ $t('url') }}</h2>
+        <h2 class="text-lg text-color ml-2">{{ $t('url') }}</h2>
        <pre class="box">{{ baseUrl }}{{ badgeUrl }}</pre>
      </div>

      <div>
-        <h2 class="text-lg text-gray-500 ml-2">{{ $t('repo.settings.badge.url_branch') }}</h2>
+        <h2 class="text-lg text-color ml-2">{{ $t('repo.settings.badge.url_branch') }}</h2>
        <pre class="box">{{ baseUrl }}{{ badgeUrl }}?branch=<span class="font-bold">&lt;branch&gt;</span></pre>
      </div>

      <div>
-        <h2 class="text-lg text-gray-500 ml-2">{{ $t('repo.settings.badge.markdown') }}</h2>
+        <h2 class="text-lg text-color ml-2">{{ $t('repo.settings.badge.markdown') }}</h2>
        <pre class="box">[![status-badge]({{ baseUrl }}{{ badgeUrl }})]({{ baseUrl }}{{ repoUrl }})</pre>
      </div>
    </div>
@ -62,7 +62,7 @@ export default defineComponent({

 <style scoped>
 .box {
-  @apply bg-gray-400 p-2 rounded-md text-white break-words dark:bg-dark-300 dark:text-gray-500;
+  @apply bg-gray-500 p-2 rounded-md text-white break-words dark:bg-dark-400 dark:text-gray-400;
  white-space: pre-wrap;
 }
 </style>
--- a/web/src/components/repo/settings/GeneralTab.vue
+++ b/web/src/components/repo/settings/GeneralTab.vue
@ -1,7 +1,7 @@
 <template>
  <Panel>
    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
-      <h1 class="text-xl ml-2 text-gray-500">{{ $t('general') }}</h1>
+      <h1 class="text-xl ml-2 text-color">{{ $t('general') }}</h1>
    </div>

    <div v-if="repoSettings" class="flex flex-col">
@ -16,7 +16,7 @@
        />
        <template #description>
          <!-- eslint-disable-next-line vue/no-v-html -->
-          <p class="text-sm text-gray-400 dark:text-gray-600" v-html="$t('repo.settings.general.pipeline_path.desc')" />
+          <p class="text-sm text-color-alt" v-html="$t('repo.settings.general.pipeline_path.desc')" />
        </template>
      </InputField>

--- a/web/src/components/repo/settings/RegistriesTab.vue
+++ b/web/src/components/repo/settings/RegistriesTab.vue
@ -2,8 +2,8 @@
  <Panel>
    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
      <div class="ml-2">
-        <h1 class="text-xl text-gray-500">{{ $t('repo.settings.registries.creds') }}</h1>
-        <p class="text-sm text-gray-400 dark:text-gray-600">
+        <h1 class="text-xl text-color">{{ $t('repo.settings.registries.creds') }}</h1>
+        <p class="text-sm text-color-alt">
          {{ $t('repo.settings.registries.desc') }}
          <DocsLink url="docs/usage/registries" />
        </p>
@ -24,13 +24,13 @@
      />
    </div>

-    <div v-if="!selectedRegistry" class="space-y-4 text-gray-500">
+    <div v-if="!selectedRegistry" class="space-y-4 text-color">
      <ListItem v-for="registry in registries" :key="registry.id" class="items-center">
        <span>{{ registry.address }}</span>
        <IconButton icon="edit" class="ml-auto w-8 h-8" @click="selectedRegistry = registry" />
        <IconButton
          icon="trash"
-          class="w-8 h-8 hover:text-red-400"
+          class="w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
          :is-loading="isDeleting"
          @click="deleteRegistry(registry)"
        />
--- a/web/src/components/repo/settings/SecretsTab.vue
+++ b/web/src/components/repo/settings/SecretsTab.vue
@ -2,8 +2,8 @@
  <Panel>
    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
      <div class="ml-2">
-        <h1 class="text-xl text-gray-500">{{ $t('repo.settings.secrets.secrets') }}</h1>
-        <p class="text-sm text-gray-400 dark:text-gray-600">
+        <h1 class="text-xl text-color">{{ $t('repo.settings.secrets.secrets') }}</h1>
+        <p class="text-sm text-color-alt">
          {{ $t('repo.settings.secrets.desc') }}
          <DocsLink url="docs/usage/secrets" />
        </p>
@ -18,21 +18,21 @@
      <Button v-else class="ml-auto" :text="$t('repo.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
    </div>

-    <div v-if="!selectedSecret" class="space-y-4 text-gray-500">
+    <div v-if="!selectedSecret" class="space-y-4 text-color">
      <ListItem v-for="secret in secrets" :key="secret.id" class="items-center">
        <span>{{ secret.name }}</span>
        <div class="ml-auto">
          <span
            v-for="event in secret.event"
            :key="event"
-            class="bg-gray-400 dark:bg-dark-200 dark:text-gray-500 text-white rounded-md mx-1 py-1 px-2 text-sm"
+            class="bg-gray-500 dark:bg-dark-700 dark:text-gray-400 text-white rounded-md mx-1 py-1 px-2 text-sm"
            >{{ event }}</span
          >
        </div>
        <IconButton icon="edit" class="ml-2 w-8 h-8" @click="selectedSecret = secret" />
        <IconButton
          icon="trash"
-          class="ml-2 w-8 h-8 hover:text-red-400"
+          class="ml-2 w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
          :is-loading="isDeleting"
          @click="deleteSecret(secret)"
        />
--- a/web/src/components/tabs/Tabs.vue
+++ b/web/src/components/tabs/Tabs.vue
@ -11,9 +11,9 @@
          flex
          cursor-pointer
          md:border-b-2
-          text-gray-500
+          text-color
          hover:text-gray-700
-          dark:text-gray-500 dark:hover:text-gray-400
+          dark:hover:text-gray-400
          items-center
        "
        :class="{
--- a/web/src/main.ts
+++ b/web/src/main.ts
@ -1,6 +1,7 @@
 import 'windi.css';
 import 'floating-vue/dist/style.css'; // eslint-disable-line no-restricted-imports
 import '~/compositions/useFavicon';
+import '~/style.css';

 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
--- a/web/src/style.css
+++ b/web/src/style.css
@ -0,0 +1,52 @@
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+.vue-notification {
+  @apply rounded-md text-base border-l-6;
+}
+
+.vue-notification .notification-title {
+  @apply font-normal;
+}
+
+.vue-notification.success {
+  @apply bg-lime-600 border-l-lime-700;
+}
+
+.vue-notification.error {
+  @apply bg-red-600 border-l-red-700;
+}
+
+*::-webkit-scrollbar {
+  @apply bg-transparent w-12px h-12px;
+}
+
+* {
+  scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar-thumb {
+  transition: background 0.2s ease-in-out;
+  border: 3px solid transparent;
+  @apply bg-cool-gray-200 dark:bg-dark-200 rounded-full bg-clip-content;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  @apply bg-cool-gray-300 dark:bg-dark-100;
+}
+
+*::-webkit-scrollbar-corner {
+  @apply bg-transparent;
+}
+
+.text-color {
+  @apply text-gray-600 dark:text-gray-400 placeholder-gray-400 dark:placeholder-gray-500;
+}
+
+.text-color-alt {
+  @apply text-gray-500 dark:text-gray-500;
+}
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@ -19,7 +19,7 @@
        <img class="w-48 h-48" src="../assets/logo.svg?url" />
      </div>
      <div class="flex flex-col my-8 md:w-2/5 p-4 items-center justify-center">
-        <h1 class="text-xl text-gray-600 dark:text-gray-500">{{ $t('welcome') }}</h1>
+        <h1 class="text-xl text-color">{{ $t('welcome') }}</h1>
        <Button class="mt-4" @click="doLogin">{{ $t('login') }}</Button>
      </div>
    </div>
--- a/web/src/views/RepoAdd.vue
+++ b/web/src/views/RepoAdd.vue
@ -2,7 +2,7 @@
  <FluidContainer class="flex flex-col">
    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-dark-200">
      <IconButton :to="{ name: 'repos' }" icon="back" />
-      <h1 class="text-xl ml-2 text-gray-500">{{ $t('repo.add') }}</h1>
+      <h1 class="text-xl ml-2 text-color">{{ $t('repo.add') }}</h1>
      <TextField v-model="search" class="w-auto ml-auto" :placeholder="$t('search')" />
      <Button
        class="ml-auto"
@ -21,8 +21,8 @@
        :clickable="repo.active"
        @click="repo.active && $router.push({ name: 'repo', params: { repoOwner: repo.owner, repoName: repo.name } })"
      >
-        <span class="text-gray-500">{{ repo.full_name }}</span>
-        <span v-if="repo.active" class="ml-auto text-gray-500">{{ $t('repo.enable.enabled') }}</span>
+        <span class="text-color">{{ repo.full_name }}</span>
+        <span v-if="repo.active" class="ml-auto text-color-alt">{{ $t('repo.enable.enabled') }}</span>
        <Button
          v-if="!repo.active"
          class="ml-auto"
--- a/web/src/views/Repos.vue
+++ b/web/src/views/Repos.vue
@ -1,7 +1,7 @@
 <template>
  <FluidContainer class="flex flex-col">
    <div class="flex flex-row flex-wrap md:grid md:grid-cols-3 border-b pb-4 mb-4 dark:border-dark-200">
-      <h1 class="text-xl text-gray-500">Repositories</h1>
+      <h1 class="text-xl text-color">Repositories</h1>
      <TextField v-model="search" class="w-auto md:ml-auto md:mr-auto" :placeholder="$t('search')" />
      <Button class="md:ml-auto" :to="{ name: 'repo-add' }" start-icon="plus" :text="$t('repo.add')" />
    </div>
@ -13,7 +13,7 @@
        clickable
        @click="$router.push({ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } })"
      >
-        <span class="text-gray-500">{{ `${repo.owner} / ${repo.name}` }}</span>
+        <span class="text-color">{{ `${repo.owner} / ${repo.name}` }}</span>
      </ListItem>
    </div>
  </FluidContainer>
--- a/web/src/views/ReposOwner.vue
+++ b/web/src/views/ReposOwner.vue
@ -1,7 +1,7 @@
 <template>
  <FluidContainer class="flex flex-col">
    <div class="flex flex-row flex-wrap md:grid md:grid-cols-3 border-b pb-4 mb-4 dark:border-dark-200">
-      <h1 class="text-xl text-gray-500">{{ repoOwner }}</h1>
+      <h1 class="text-xl text-color">{{ repoOwner }}</h1>
      <TextField v-model="search" class="w-auto md:ml-auto md:mr-auto" :placeholder="$t('search')" />
    </div>

@ -12,11 +12,11 @@
        clickable
        @click="$router.push({ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } })"
      >
-        <span class="text-gray-500">{{ `${repo.name}` }}</span>
+        <span class="text-color">{{ `${repo.name}` }}</span>
      </ListItem>
    </div>
    <div v-if="(searchedRepos || []).length <= 0" class="text-center">
-      <span class="text-gray-500 m-auto">{{ $t('repo.user_none') }}</span>
+      <span class="text-color m-auto">{{ $t('repo.user_none') }}</span>
    </div>
  </FluidContainer>
 </template>
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@ -3,23 +3,23 @@
    <Button class="ml-auto" :text="$t('logout')" :to="`${address}/logout`" />

    <div>
-      <h2 class="text-lg text-gray-500">{{ $t('user.token') }}</h2>
+      <h2 class="text-lg text-color">{{ $t('user.token') }}</h2>
      <pre class="cli-box">{{ token }}</pre>
    </div>

    <div>
-      <h2 class="text-lg text-gray-500">{{ $t('user.shell_setup') }}</h2>
+      <h2 class="text-lg text-color">{{ $t('user.shell_setup') }}</h2>
      <pre class="cli-box">{{ usageWithShell }}</pre>
    </div>

    <div>
-      <h2 class="text-lg text-gray-500">{{ $t('user.api_usage') }}</h2>
+      <h2 class="text-lg text-color">{{ $t('user.api_usage') }}</h2>
      <pre class="cli-box">{{ usageWithCurl }}</pre>
    </div>

    <div>
      <div class="flex items-center">
-        <h2 class="text-lg text-gray-500">{{ $t('user.cli_usage') }}</h2>
+        <h2 class="text-lg text-color">{{ $t('user.cli_usage') }}</h2>
        <a :href="cliDownload" target="_blank" class="ml-4 text-link">{{ $t('user.dl_cli') }}</a>
      </div>
      <pre class="cli-box">{{ usageWithCli }}</pre>
@ -77,7 +77,7 @@ export default defineComponent({

 <style scoped>
 .cli-box {
-  @apply bg-gray-400 p-2 rounded-md text-white break-words dark:bg-dark-300 dark:text-gray-500;
+  @apply bg-gray-500 p-2 rounded-md text-white break-words dark:bg-dark-400 dark:text-gray-400;
  white-space: pre-wrap;
 }
 </style>
--- a/web/src/views/repo/RepoBranch.vue
+++ b/web/src/views/repo/RepoBranch.vue
@ -1,6 +1,6 @@
 <template>
  <div class="flex w-full mb-4 justify-center">
-    <span class="text-gray-600 dark:text-gray-500 text-xl">{{ $t('repo.build.pipelines_for', { branch }) }}</span>
+    <span class="text-color text-xl">{{ $t('repo.build.pipelines_for', { branch }) }}</span>
  </div>
  <BuildList :builds="builds" :repo="repo" />
 </template>
--- a/web/src/views/repo/RepoBranches.vue
+++ b/web/src/views/repo/RepoBranches.vue
@ -6,7 +6,7 @@
      :to="{ name: 'repo-branch', params: { branch } }"
      class="flex"
    >
-      <ListItem clickable class="text-gray-600 dark:text-gray-500">
+      <ListItem clickable class="text-color">
        {{ branch }}
      </ListItem>
    </router-link>
--- a/web/src/views/repo/RepoSettings.vue
+++ b/web/src/views/repo/RepoSettings.vue
@ -2,7 +2,7 @@
  <FluidContainer>
    <div class="flex border-b items-center pb-4 mb-4 dark:border-gray-600">
      <IconButton icon="back" @click="goBack" />
-      <h1 class="text-xl ml-2 text-gray-500">{{ $t('repo.settings.settings') }}</h1>
+      <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.settings') }}</h1>
    </div>

    <Tabs>
--- a/web/src/views/repo/RepoWrapper.vue
+++ b/web/src/views/repo/RepoWrapper.vue
@ -1,7 +1,7 @@
 <template>
  <FluidContainer v-if="repo && repoPermissions && $route.meta.repoHeader">
    <div class="flex flex-wrap border-b items-center pb-4 mb-4 dark:border-gray-600 justify-center">
-      <h1 class="text-xl text-gray-500 w-full md:w-auto text-center mb-4 md:mb-0">
+      <h1 class="text-xl text-color w-full md:w-auto text-center mb-4 md:mb-0">
        <router-link :to="{ name: 'repos-owner', params: { repoOwner } }">{{ repoOwner }}</router-link>
        {{ ` / ${repo.name}` }}
      </h1>
@ -11,7 +11,7 @@
      <a
        :href="repo.link_url"
        target="_blank"
-        class="flex ml-4 p-1 rounded-full text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-600"
+        class="flex ml-4 p-1 rounded-full text-color hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-600"
      >
        <Icon v-if="repo.link_url.startsWith('https://github.com/')" name="github" />
        <Icon v-else name="repo" />
--- a/web/src/views/repo/build/Build.vue
+++ b/web/src/views/repo/build/Build.vue
@ -10,8 +10,8 @@
        </div>

        <div v-else-if="build.status === 'blocked'" class="flex flex-col flex-grow justify-center items-center">
-          <Icon name="status-blocked" class="w-32 h-32 text-gray-500" />
-          <p class="text-xl text-gray-500">{{ $t('repo.build.protected.awaits') }}</p>
+          <Icon name="status-blocked" class="w-32 h-32 text-color" />
+          <p class="text-xl text-color">{{ $t('repo.build.protected.awaits') }}</p>
          <div v-if="repoPermissions.push" class="flex mt-2 space-x-4">
            <Button
              color="green"
@ -29,8 +29,8 @@
        </div>

        <div v-else-if="build.status === 'declined'" class="flex flex-col flex-grow justify-center items-center">
-          <Icon name="status-blocked" class="w-32 h-32 text-gray-500" />
-          <p class="text-xl text-gray-500">{{ $t('repo.build.protected.declined') }}</p>
+          <Icon name="status-blocked" class="w-32 h-32 text-color" />
+          <p class="text-xl text-color">{{ $t('repo.build.protected.declined') }}</p>
        </div>

        <BuildLog
--- a/web/src/views/repo/build/BuildChangedFiles.vue
+++ b/web/src/views/repo/build/BuildChangedFiles.vue
@ -1,8 +1,8 @@
 <template>
-  <FluidContainer v-if="build" class="flex flex-col gap-y-6 text-gray-500 justify-between py-0">
+  <FluidContainer v-if="build" class="flex flex-col gap-y-6 text-color justify-between py-0">
    <Panel>
      <div v-if="build.changed_files === undefined || build.changed_files.length < 1" class="w-full">
-        <span class="text-gray-500">{{ $t('repo.build.no_files') }}</span>
+        <span class="text-color">{{ $t('repo.build.no_files') }}</span>
      </div>
      <div v-for="file in build.changed_files" v-else :key="file" class="w-full">
        <div>- {{ file }}</div>
--- a/web/src/views/repo/build/BuildConfig.vue
+++ b/web/src/views/repo/build/BuildConfig.vue
@ -1,5 +1,5 @@
 <template>
-  <FluidContainer v-if="buildConfigs" class="flex flex-col gap-y-6 text-gray-500 justify-between !pt-0">
+  <FluidContainer v-if="buildConfigs" class="flex flex-col gap-y-6 text-color justify-between !pt-0">
    <Panel v-for="buildConfig in buildConfigs" :key="buildConfig.hash" :title="buildConfig.name">
      <span class="font-mono whitespace-pre">{{ buildConfig.data }}</span>
    </Panel>
--- a/web/src/views/repo/build/BuildWrapper.vue
+++ b/web/src/views/repo/build/BuildWrapper.vue
@ -11,7 +11,7 @@
            <md:flex-wrap
            md:order-none md:w-auto md:ml-2
            flex
-            text-center text-xl text-gray-500
+            text-center text-xl text-color
            whitespace-nowrap
            overflow-hidden overflow-ellipsis
          "
@ -48,7 +48,7 @@
          <Tab id="changed-files" :title="$t('repo.build.files', { files: build.changed_files?.length || 0 })" />
        </Tabs>

-        <div class="flex justify-between gap-x-4 text-gray-500 flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
+        <div class="flex justify-between gap-x-4 text-color flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
          <div class="flex space-x-1 items-center flex-shrink-0">
            <Icon name="since" />
            <Tooltip>