From d84565f21b69e9d79e50fb6bb8ea1f63b30c4e89 Mon Sep 17 00:00:00 2001 From: LIghtJUNction Date: Sun, 29 Mar 2026 15:40:27 +0800 Subject: [PATCH] feat(dashboard): switch to BlueBusiness theme Replace PurpleTheme with BlueBusiness theme for improved visual design. Includes new light and dark theme definitions. --- dashboard/src/plugins/vuetify.ts | 8 +- dashboard/src/stores/common.ts | 4 +- dashboard/src/theme/BlueBusinessDarkTheme.ts | 141 +++++++++++++++++ dashboard/src/theme/BlueBusinessLightTheme.ts | 143 ++++++++++++++++++ dashboard/src/theme/constants.ts | 4 +- 5 files changed, 292 insertions(+), 8 deletions(-) create mode 100644 dashboard/src/theme/BlueBusinessDarkTheme.ts create mode 100644 dashboard/src/theme/BlueBusinessLightTheme.ts diff --git a/dashboard/src/plugins/vuetify.ts b/dashboard/src/plugins/vuetify.ts index e1e71a8d3..c861a623f 100644 --- a/dashboard/src/plugins/vuetify.ts +++ b/dashboard/src/plugins/vuetify.ts @@ -2,8 +2,8 @@ import { createVuetify } from "vuetify"; import "@/assets/mdi-subset/materialdesignicons-subset.css"; import * as components from "vuetify/components"; import * as directives from "vuetify/directives"; -import { PurpleTheme } from "@/theme/LightTheme"; -import { PurpleThemeDark } from "@/theme/DarkTheme"; +import { BlueBusinessLightTheme } from "@/theme/BlueBusinessLightTheme"; +import { BlueBusinessDarkTheme } from "@/theme/BlueBusinessDarkTheme"; import { LIGHT_THEME_NAME, DARK_THEME_NAME } from "@/theme/constants"; export default createVuetify({ @@ -13,8 +13,8 @@ export default createVuetify({ theme: { defaultTheme: LIGHT_THEME_NAME, themes: { - [LIGHT_THEME_NAME]: PurpleTheme, - [DARK_THEME_NAME]: PurpleThemeDark, + [LIGHT_THEME_NAME]: BlueBusinessLightTheme, + [DARK_THEME_NAME]: BlueBusinessDarkTheme, }, }, defaults: { diff --git a/dashboard/src/stores/common.ts b/dashboard/src/stores/common.ts index ed4a44858..64b4d19d3 100644 --- a/dashboard/src/stores/common.ts +++ b/dashboard/src/stores/common.ts @@ -1,6 +1,6 @@ import { defineStore } from "pinia"; import { ref } from "vue"; -import axios from "@/utils/request"; +import axios, { resolveApiUrl } from "@/utils/request"; interface LogObject { uuid?: string; @@ -51,7 +51,7 @@ export const useCommonStore = defineStore("common", () => { Authorization: "Bearer " + localStorage.getItem("token"), }; - fetch("/api/live-log", { + fetch(resolveApiUrl("/api/live-log"), { method: "GET", headers, signal, diff --git a/dashboard/src/theme/BlueBusinessDarkTheme.ts b/dashboard/src/theme/BlueBusinessDarkTheme.ts new file mode 100644 index 000000000..390d1f629 --- /dev/null +++ b/dashboard/src/theme/BlueBusinessDarkTheme.ts @@ -0,0 +1,141 @@ +import type { ThemeTypes } from "@/types/themeTypes/ThemeType"; +import { DARK_THEME_NAME } from "./constants"; + +/** + * BlueBusiness Dark Theme - Material Design 3 inspired + * Seed Color: #005FB0 (Business Blue) + * + * MD3 Dark Mode Colors: + * - Uses tonal surface variants instead of shadows for elevation + * - Higher saturation for better contrast in dark mode + * - Surface tint color applied to create depth perception + */ +const BlueBusinessDarkTheme: ThemeTypes = { + name: DARK_THEME_NAME, + dark: true, + variables: { + "border-color": "#A1C9FF", + "carousel-control-size": 10, + }, + colors: { + // === MD3 Core Colors (Business Blue - Dark Mode) === + primary: "#A1C9FF", // Lighter blue for better contrast on dark + "primary-darken-1": "#5BA4FF", // Hover state blue + secondary: "#CCC2DC", // Light purple-gray + "secondary-darken-1": "#B8B0C8", // Hover state + tertiary: "#7DD9CC", // Light teal + "tertiary-darken-1": "#5FCBBA", // Hover state + + // === MD3 Semantic Colors (Dark Mode) === + info: "#4DD0E1", // Cyan - informational + success: "#69F0AE", // Green - success states + warning: "#FFD54F", // Amber - warnings + error: "#FFB4AB", // Light red - errors + + // === MD3 Container Colors (Dark Mode - darker containers) === + "primary-container": "#004A8F", // Dark blue container + "on-primary-container": "#D8E2FF", // Light text on container + "secondary-container": "#3F4354", // Dark gray-blue container + "on-secondary-container": "#D8E2EC", // Light text on container + "tertiary-container": "#00574A", // Dark teal container + "on-tertiary-container": "#9CF1E8", // Light text on container + "error-container": "#93000A", // Dark red container + "on-error-container": "#FFDAD6", // Light text on container + + // === MD3 Surface Colors (Dark Mode) === + surface: "#141218", // Very dark purple-gray background + "on-surface": "#E4E1E6", // Light text on dark surface + "surface-variant": "#43444E", // Elevated dark surface + "on-surface-variant": "#C4C6D0", // Light text on variant + surfaceTint: "#A1C9FF", // Blue tint for elevation + + // === MD3 Outline Colors (Dark Mode) === + outline: "#8E9099", // Borders in dark mode + "outline-variant": "#44474F", // Subtle borders + + // === MD3 Inverse Colors (Dark Mode becomes light) === + "inverse-surface": "#E4E1E6", // Light surface + "inverse-on-surface": "#303033", // Dark text on light + "inverse-primary": "#005FB0", // Dark primary on light + + // === Additional UI Colors === + background: "#141218", // Same as surface + accent: "#FFAB91", // Peach accent + + // === Light Variant Colors (inverted for dark mode) === + lightprimary: "#1A3A5C", // Dark blue for subtle backgrounds + lightsecondary: "#2A2D38", // Dark gray for subtle backgrounds + lightsuccess: "#1B3D1F", // Dark green + lighterror: "#4D1F1F", // Dark red + lightwarning: "#4D3D00", // Dark amber + + // === Text Colors === + primaryText: "#D8E2FF", // Light text + secondaryText: "#C4C6D0", // Muted light text + + // === Border Colors === + borderLight: "#43444E", // Light borders on dark + border: "#303033", // Default dark border + inputBorder: "#8E9099", // Input borders + + // === Container/Card Colors === + containerBg: "#1A1A1F", // Dark card backgrounds + "on-surface-variant-bg": "#1E1E24", // Slightly lighter background + + // === Social Colors === + facebook: "#5388D4", + twitter: "#4DA6E8", + linkedin: "#2A7BB0", + + // === Gray Scale (Dark Mode - inverted feel) === + gray100: "#303033", + gray200: "#424250", + gray300: "#5C5C6B", + gray400: "#787888", + gray500: "#9E9EAB", + gray600: "#BDBDCA", + gray700: "#D1D1D9", + gray800: "#E8E8EC", + gray900: "#F5F5F7", + + // === Primary/Secondary Tonal Range (Dark Mode) === + primary50: "#001A41", + primary100: "#002D64", + primary200: "#004A8F", + primary300: "#0068BA", + primary400: "#1E88E5", + primary500: "#42A5F5", + primary600: "#64B5F6", + primary700: "#90CAF9", + primary800: "#BBDEFB", + primary900: "#E3F2FD", + + secondary50: "#1A1B21", + secondary100: "#2F303A", + secondary200: "#454655", + secondary300: "#5C5E70", + secondary400: "#74778B", + secondary500: "#8E91A6", + secondary600: "#ABABC4", + secondary700: "#CACAE0", + secondary800: "#E0E0EC", + secondary900: "#F3F3F8", + + // === Code/Monaco Editor Colors (Dark) === + codeBg: "#1A1B21", + preBg: "#121218", + code: "#E4E1E6", + + // === Chat Bubble Colors (Dark Mode) === + chatMessageBubble: "#2D3040", // User bubble - darker + chatAssistantBubble: "#1E2A3F", // Assistant bubble - dark blue + + // === Component Specific === + mcpCardBg: "#1E1E26", + + // === Overlay === + overlay: "#000000AA", + }, +}; + +export { BlueBusinessDarkTheme }; diff --git a/dashboard/src/theme/BlueBusinessLightTheme.ts b/dashboard/src/theme/BlueBusinessLightTheme.ts new file mode 100644 index 000000000..f55faf1e5 --- /dev/null +++ b/dashboard/src/theme/BlueBusinessLightTheme.ts @@ -0,0 +1,143 @@ +import type { ThemeTypes } from "@/types/themeTypes/ThemeType"; +import { LIGHT_THEME_NAME } from "./constants"; + +/** + * BlueBusiness Light Theme - Material Design 3 inspired + * Seed Color: #005FB0 (Business Blue) + * + * MD3 Color Roles: + * - Primary: Most prominent color, used for FABs and key actions + * - Secondary: Less prominent components like Chips + * - Tertiary: Emphasis/balance, used for inputs and decorations + * - Surface: Background areas with tonal elevation + * - Error: Error/warning states + */ +const BlueBusinessLightTheme: ThemeTypes = { + name: LIGHT_THEME_NAME, + dark: false, + variables: { + "border-color": "#005FB0", + "carousel-control-size": 10, + }, + colors: { + // === MD3 Core Colors (Business Blue) === + primary: "#005FB0", // Deep blue - main brand color + "primary-darken-1": "#004A8F", // Darker primary for hover states + secondary: "#565E71", // Cool gray-blue - secondary components + "secondary-darken-1": "#454859", // Darker secondary + tertiary: "#006B5B", // Teal - tertiary accent + "tertiary-darken-1": "#00574A", // Darker tertiary + + // === MD3 Semantic Colors === + info: "#03C9D7", // Cyan - informational + success: "#00C853", // Green - success states + warning: "#FFB300", // Amber - warnings + error: "#BA1A1A", // Red - errors + + // === MD3 Container Colors (lighter tones) === + "primary-container": "#D8E2FF", // Light blue container + "on-primary-container": "#001A41", // Text on primary container + "secondary-container": "#D8E2EC", // Light gray-blue container + "on-secondary-container": "#111423", // Text on secondary container + "tertiary-container": "#9CF1E8", // Light teal container + "on-tertiary-container": "#00201D", // Text on tertiary container + "error-container": "#FFDAD6", // Light red container + "on-error-container": "#410002", // Text on error container + + // === MD3 Surface Colors === + surface: "#FEF7FF", // Page background + "on-surface": "#1B1B1F", // Text on surface + "surface-variant": "#E1E2EC", // Elevated surface variant + "on-surface-variant": "#44474F", // Text on surface variant + surfaceTint: "#005FB0", // Tint overlay for elevation + + // === MD3 Outline Colors === + outline: "#74777F", // Borders and dividers + "outline-variant": "#C4C6D0", // Subtle borders + + // === MD3 Inverse Colors === + "inverse-surface": "#303033", // Used for dark surfaces in light mode + "inverse-on-surface": "#F3F0F4", // Text on inverse surface + "inverse-primary": "#A1C9FF", // Primary on dark backgrounds + + // === Additional UI Colors === + background: "#FEF7FF", // Page background (same as surface) + accent: "#FFAB91", // Peach accent (Vuetify legacy) + + // === Light Variant Colors === + lightprimary: "#E8F4FD", // Very light blue for subtle backgrounds + lightsecondary: "#F0F2F5", // Very light gray for subtle backgrounds + lightsuccess: "#E8F5E9", // Very light green + lighterror: "#FFEBEE", // Very light red + lightwarning: "#FFF8E1", // Very light amber + + // === Text Colors === + primaryText: "#001A41", // Primary text color + secondaryText: "#44474F", // Secondary text color + + // === Border Colors === + borderLight: "#E1E2EC", // Light borders + border: "#C4C6D0", // Default borders + inputBorder: "#74777F", // Input field borders + + // === Container/Card Colors === + containerBg: "#F5F7FF", // Card backgrounds + "on-surface-variant-bg": "#F8F9FF", // Slightly tinted background + + // === Social Colors === + facebook: "#4267B2", + twitter: "#1DA1F2", + linkedin: "#0E76A8", + + // === Gray Scale === + gray100: "#F5F5F5", + gray200: "#EEEEEE", + gray300: "#E0E0E0", + gray400: "#BDBDBD", + gray500: "#9E9E9E", + gray600: "#757575", + gray700: "#616161", + gray800: "#424242", + gray900: "#212121", + + // === Primary/Secondary Tonal Range === + primary50: "#E3F2FD", + primary100: "#BBDEFB", + primary200: "#90CAF9", + primary300: "#64B5F6", + primary400: "#42A5F5", + primary500: "#2196F3", + primary600: "#1E88E5", + primary700: "#1976D2", + primary800: "#1565C0", + primary900: "#0D47A1", + + secondary50: "#ECEFF1", + secondary100: "#CFD8DC", + secondary200: "#B0BEC5", + secondary300: "#90A4AE", + secondary400: "#78909C", + secondary500: "#607D8B", + secondary600: "#546E7A", + secondary700: "#455A64", + secondary800: "#37474F", + secondary900: "#263238", + + // === Code/Monaco Editor Colors === + codeBg: "#F5F7FF", + preBg: "#F8F9FF", + code: "#1B1B1F", + + // === Chat Bubble Colors === + chatMessageBubble: "#E8EDF5", // User message bubble + chatAssistantBubble: "#D8E2FF", // Assistant message bubble + + // === Component Specific === + mcpCardBg: "#F5F7FF", + + // === Overlay === + overlay: "#FFFFFFDD", + }, +}; + +export { BlueBusinessLightTheme }; diff --git a/dashboard/src/theme/constants.ts b/dashboard/src/theme/constants.ts index a47b359d8..7844da86d 100644 --- a/dashboard/src/theme/constants.ts +++ b/dashboard/src/theme/constants.ts @@ -1,2 +1,2 @@ -export const LIGHT_THEME_NAME = "PurpleTheme"; -export const DARK_THEME_NAME = "PurpleThemeDark"; +export const LIGHT_THEME_NAME = "BlueBusinessTheme"; +export const DARK_THEME_NAME = "BlueBusinessDarkTheme";