add light mode

2026-08-14 11:12:16 +01:00 · 2025-03-28 14:00:19 +01:00
parent 7339b79e35
commit df2fe1da1e
124 changed files with 579 additions and 369 deletions
--- a/resources/js/Components/Dashboard/ActivityGraphCard.vue
+++ b/resources/js/Components/Dashboard/ActivityGraphCard.vue
@@ -64,8 +64,9 @@ const max = computed(() => {
    }
 );

-const backgroundColor = useCssVar("--color-bg-secondary");
-const itemBackgroundColor = useCssVar("--color-bg-tertiary");
+const backgroundColor = useCssVar('--color-card-background', null, { observe: true });
+const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, { observe: true });
+
 const option = computed(() => {
        return {
            tooltip: {},
--- a/resources/js/Components/Dashboard/DayOverviewCardChart.vue
+++ b/resources/js/Components/Dashboard/DayOverviewCardChart.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import VChart from 'vue-echarts';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useCssVar } from '@vueuse/core';

 const props = defineProps<{
    history: number[];
 }>();

-const accentColor = useCssVar('--color-accent-quaternary');
+const accentColor = useCssVar('--theme-color-chart', null, { observe: true });

-const seriesData = props.history.map((el) => {
+const seriesData = computed(() => props.history.map((el) => {
    return {
        value: el,
        ...{
@@ -21,7 +21,7 @@ const seriesData = props.history.map((el) => {
            },
        },
    };
-});
+}));
 const option = ref({
    grid: {
        top: 0,
--- a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
+++ b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
@@ -16,7 +16,7 @@ import {
    <div
        class="px-3.5 py-2 flex justify-between @container border-b border-card-background-separator">
        <div class="flex items-center min-w-[70px]">
-            <p class="font-semibold text-sm text-white">
+            <p class="font-semibold text-sm text-text-primary">
                {{ formatHumanReadableDate(date) }}
            </p>
        </div>
--- a/resources/js/Components/Dashboard/ProjectsChartCard.vue
+++ b/resources/js/Components/Dashboard/ProjectsChartCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VChart, { THEME_KEY } from 'vue-echarts';
-import { provide, ref } from 'vue';
+import { provide } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { PieChart } from 'echarts/charts';
@@ -11,6 +11,7 @@ import {
    TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
+import { useCssVar } from "@vueuse/core";

 use([
    CanvasRenderer,
@@ -22,6 +23,7 @@ use([
 ]);

 provide(THEME_KEY, 'dark');
+const labelColor = useCssVar('--color-text-secondary', null, { observe: true });

 const props = defineProps<{
    weeklyProjectOverview: {
@@ -46,13 +48,18 @@ const seriesData = props.weeklyProjectOverview.map((el) => {
        },
    };
 });
-const option = ref({
+import { computed } from 'vue';
+
+const option = computed(() => ({
    tooltip: {
        trigger: 'item',
    },
    legend: {
        bottom: 'bottom',
        top: '250px',
+        textStyle: {
+            color: labelColor.value,
+        },
    },
    backgroundColor: 'transparent',
    series: [
@@ -71,7 +78,7 @@ const option = ref({
            type: 'pie',
        },
    ],
-});
+}));
 </script>

 <template>
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
+++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
@@ -82,7 +82,7 @@ window.addEventListener("dashboard:refresh", () => {
            <div>
                <PlusCircleIcon
                    class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
-                <h3 class="text-white font-semibold text-sm">
+                <h3 class="text-text-primary font-semibold text-sm">
                    No recent tasks found
                </h3>
                <p class="pb-5 text-sm">Create tasks inside of a project!</p>
@@ -97,7 +97,7 @@ window.addEventListener("dashboard:refresh", () => {
            <div>
                <PlusCircleIcon
                    class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
-                <h3 class="text-white font-semibold">Add more tasks</h3>
+                <h3 class="text-text-primary font-semibold">Add more tasks</h3>
                <p class="pb-5">Create tasks inside of a project!</p>
                <SecondaryButton @click="router.visit(route('projects'))"
                >Go to Projects
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
+++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
@@ -49,7 +49,7 @@ async function startTaskTimer() {
    <div
        class="px-3.5 py-2 grid grid-cols-5 border-b border-b-card-background-separator">
        <div class="col-span-4">
-            <p class="font-medium text-white text-sm pb-1 truncate">
+            <p class="font-medium text-text-primary text-sm pb-1 truncate">
                <span v-if="timeEntry.description"> {{ timeEntry.description }}</span>
                <span v-else class="text-text-tertiary">No description</span>
            </p>
--- a/resources/js/Components/Dashboard/TeamActivityCard.vue
+++ b/resources/js/Components/Dashboard/TeamActivityCard.vue
@@ -51,7 +51,7 @@ const { data: latestTeamActivity, isLoading } = useQuery({
            <div>
                <UserGroupIcon
                    class="w-8 text-icon-default inline pb-2"></UserGroupIcon>
-                <h3 class="text-white font-semibold text-sm">
+                <h3 class="text-text-primary font-semibold text-sm">
                    Invite your co-workers
                </h3>
                <p class="pb-5 text-sm">You can invite your entire team.</p>
--- a/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
+++ b/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
@@ -10,7 +10,7 @@ defineProps<{
    <div class="px-4 py-2 2xl:py-3 border-b border-card-background-separator">
        <div class="col-span-2">
            <div class="flex justify-between">
-                <p class="font-semibold text-sm text-white">
+                <p class="font-semibold text-sm text-text-primary">
                    {{ name }}
                </p>
                <div
--- a/resources/js/Components/Dashboard/ThisWeekOverview.vue
+++ b/resources/js/Components/Dashboard/ThisWeekOverview.vue
@@ -2,12 +2,7 @@
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { BarChart } from "echarts/charts";
-import {
-    GridComponent,
-    LegendComponent,
-    TitleComponent,
-    TooltipComponent
-} from "echarts/components";
+import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from "echarts/components";
 import VChart, { THEME_KEY } from "vue-echarts";
 import { computed, provide } from "vue";
 import StatCard from "@/Components/Common/StatCard.vue";
@@ -34,7 +29,6 @@ use([
 ]);

 provide(THEME_KEY, "dark");
-const accentColor = useCssVar("--color-accent-quaternary");

 const weekdays = computed(() => {
    const daysOrder = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
@@ -47,7 +41,6 @@ const weekdays = computed(() => {
        saturday: "Sat",
        sunday: "Sun"
    };
-
    if (dayMapping[getWeekStart()]) {
        const customOrder = [];
        const startIndex = daysOrder.indexOf(dayMapping[getWeekStart()]);
@@ -60,10 +53,11 @@ const weekdays = computed(() => {
    } else {
        return daysOrder;
    }
+
 });

-const markLineColor = useCssVar("--color-border-secondary");

+const accentColor = useCssVar("--theme-color-chart", null, { observe: true });

 // Get the organization ID using the utility function
 const organizationId = computed(() => getCurrentOrganizationId());
@@ -180,6 +174,8 @@ const seriesData = computed(() => {
 });


+const markLineColor = useCssVar("--color-border-secondary", null, { observe: true });
+const labelColor = useCssVar("--color-text-secondary", null, { observe: true });
 const option = computed(() => {
    return {
        tooltip: {
@@ -187,34 +183,35 @@ const option = computed(() => {
        },
        grid: {
            top: 0,
-                right: 0,
-                bottom: 50,
-                left: 0
+            right: 0,
+            bottom: 50,
+            left: 0
        },
        backgroundColor: "transparent",
-            xAxis: {
-        type: "category",
+        xAxis: {
+            type: "category",
            data: weekdays.value,
            axisLine: {
-            lineStyle: {
-                color: "transparent" // Set desired color here
-            }
-        },
-        axisLabel: {
-            fontSize: 16,
+                lineStyle: {
+                    color: "transparent" // Set desired color here
+                }
+            },
+            axisLabel: {
+                fontSize: 16,
                fontWeight: 600,
                margin: 24,
-                fontFamily: "Outfit, sans-serif"
-        },
-        axisTick: {
-            lineStyle: {
-                color: "transparent" // Set desired color here
+                fontFamily: "Outfit, sans-serif",
+                color: labelColor.value
+            },
+            axisTick: {
+                lineStyle: {
+                    color: "transparent" // Set desired color here
+                }
            }
-        }
-    },
+        },
        yAxis: {
            type: "value",
-                splitLine: {
+            splitLine: {
                lineStyle: {
                    color: markLineColor.value
                }
@@ -231,7 +228,7 @@ const option = computed(() => {
                }
            }
        ]
-    }
+    };
 });