diff --git a/src/App.vue b/src/App.vue index 6735d88..53f1ce3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -123,7 +123,7 @@ import img_bottomGradiant from '@/views/login/assets/img/gr_bottom_white.svg' import {DotLottieVue} from '@lottiefiles/dotlottie-vue' import BasicButton from '@/components/BasicPacks/BasicButton.vue' import {useConfigStore} from "@/store/configStore"; -import {getProjectFontFamily, getProjectLoginLogo, getProjectSplashBackground, isBoursecuProject} from "@/utils/config"; +import {getProjectFontFamily, getProjectLoginLogo, getProjectSplashBackground, getProjectBrandRed, isBoursecuProject} from "@/utils/config"; import {ConfigProvider as AConfigProvider} from 'ant-design-vue' import BasicIcon from "@/components/BasicPacks/BasicIcon.vue"; @@ -142,13 +142,22 @@ const popVisible = ref(false) const antTheme = computed(() => { if (!config.config?.color) return null + const brandRed = getProjectBrandRed() + return { token: { - colorPrimary: "#ff0000", + colorPrimary: config.config.color, colorLink: config.config.color, colorLinkActive: config.config.color, colorLinkHover: config.config.color, fontFamily: getProjectFontFamily(), + ...(brandRed ? { + colorError: brandRed, + colorErrorHover: brandRed, + colorErrorActive: brandRed, + colorErrorBg: '#f8ecec', + colorErrorBorder: '#f0d8d8', + } : {}), }, } }) diff --git a/src/assets/css/boursecu-theme.less b/src/assets/css/boursecu-theme.less new file mode 100644 index 0000000..2740a3d --- /dev/null +++ b/src/assets/css/boursecu-theme.less @@ -0,0 +1,54 @@ +html.project-boursecu { + .text-red, + .text-red-600, + .text-red-700, + [class*='text-red-'] { + color: var(--App-brand-red) !important; + } + + .text-red-700 { + color: var(--App-brand-red-700) !important; + } + + .bg-red, + .bg-red-50 { + background-color: var(--App-brand-red-50) !important; + } + + .bg-red-100 { + background-color: var(--App-brand-red-100) !important; + } + + .bg-red-600 { + background-color: var(--App-brand-red) !important; + } + + .border-red, + .border-red-600, + [class*='border-red-'] { + border-color: var(--App-brand-red) !important; + } + + [style*='color: red'], + [style*='color:red'] { + color: var(--App-brand-red) !important; + } + + [style*='background-color: red'], + [style*='background-color:red'] { + background-color: var(--App-brand-red) !important; + } + + .ant-tag-red, + .ant-tag-error { + color: var(--App-brand-red) !important; + background: var(--App-brand-red-50) !important; + border-color: var(--App-brand-red-100) !important; + } + + .ant-btn-dangerous, + .ant-btn-dangerous:not(:disabled):hover { + border-color: var(--App-brand-red) !important; + color: var(--App-brand-red) !important; + } +} diff --git a/src/assets/css/main.less b/src/assets/css/main.less index 504e09b..38eb0e3 100644 --- a/src/assets/css/main.less +++ b/src/assets/css/main.less @@ -1,6 +1,7 @@ @import (less) './var.less'; @import (less) './fonts.less'; @import (less) './ant.less'; +@import (less) './boursecu-theme.less'; html { scroll-behavior: smooth; diff --git a/src/components/BasicPacks/BasicIcon.vue b/src/components/BasicPacks/BasicIcon.vue index 1d1c291..2a4a305 100644 --- a/src/components/BasicPacks/BasicIcon.vue +++ b/src/components/BasicPacks/BasicIcon.vue @@ -11,6 +11,7 @@