feat: implement dark-theme presets

client-app/app-runner.ts

@@ -3,7 +3,7 @@ import { DefaultApolloClient } from "@vue/apollo-composable";
 import { createApp, h, provide } from "vue";
 import { apolloClient, getPageContext } from "@/core/api/graphql";
 import { GetSlugInfoDocument } from "@/core/api/graphql/types";
-import { useCurrency, useThemeContext, useNavigations, useWhiteLabeling } from "@/core/composables";
+import { useCurrency, useDarkMode, useThemeContext, useNavigations, useWhiteLabeling } from "@/core/composables";
 import { useHotjar } from "@/core/composables/useHotjar";
 import { useLanguages } from "@/core/composables/useLanguages";
 import { FALLBACK_LOCALE, IS_DEVELOPMENT } from "@/core/constants";
@@ -85,6 +85,7 @@ export default async () => {
   const { init: initializeHotjar } = useHotjar();
   const { fetchCatalogMenu } = useNavigations();
   const { themePresetName, setWhiteLabelingSettings } = useWhiteLabeling();
+  useDarkMode();
 
   const fallback = {
     locale: FALLBACK_LOCALE,

client-app/assets/presets/black-gold.dark.json

@@ -0,0 +1,127 @@
+{
+  "color_primary_50": "#080809",
+  "color_primary_100": "#0a0b0d",
+  "color_primary_200": "#0c1015",
+  "color_primary_300": "#10151d",
+  "color_primary_400": "#161a20",
+  "color_primary_500": "#7c7e81",
+  "color_primary_600": "#4a4c4e",
+  "color_primary_700": "#77797b",
+  "color_primary_800": "#a6a7a9",
+  "color_primary_900": "#d5d6d7",
+  "color_primary_950": "#eeeeef",
+  "color_secondary_50": "#2b2926",
+  "color_secondary_100": "#3f3b33",
+  "color_secondary_200": "#685e49",
+  "color_secondary_300": "#9e8a67",
+  "color_secondary_400": "#baa06d",
+  "color_secondary_500": "#987836",
+  "color_secondary_600": "#edbe6d",
+  "color_secondary_700": "#f4cf90",
+  "color_secondary_800": "#ffe0ad",
+  "color_secondary_900": "#fff3de",
+  "color_secondary_950": "#fff8ee",
+  "color_accent_50": "#020306",
+  "color_accent_100": "#060b14",
+  "color_accent_200": "#121c2b",
+  "color_accent_300": "#1e2d44",
+  "color_accent_400": "#2d3e58",
+  "color_accent_500": "#718096",
+  "color_accent_600": "#606c7e",
+  "color_accent_700": "#818b99",
+  "color_accent_800": "#a4aab4",
+  "color_accent_900": "#dfe2e7",
+  "color_accent_950": "#f1f4f4",
+  "color_neutral_50": "#030201",
+  "color_neutral_100": "#120f0d",
+  "color_neutral_200": "#2f2b2b",
+  "color_neutral_300": "#63605d",
+  "color_neutral_400": "#696260",
+  "color_neutral_500": "#4e4744",
+  "color_neutral_600": "#b0a9a6",
+  "color_neutral_700": "#d5cecd",
+  "color_neutral_800": "#ebe4e2",
+  "color_neutral_900": "#f8f0f0",
+  "color_neutral_950": "#fef8f4",
+  "color_warning_50": "#292417",
+  "color_warning_100": "#41371b",
+  "color_warning_200": "#735e19",
+  "color_warning_300": "#977300",
+  "color_warning_400": "#d09213",
+  "color_warning_500": "#af711e",
+  "color_warning_600": "#ffb55b",
+  "color_warning_700": "#ffcd9e",
+  "color_warning_800": "#ffe0c6",
+  "color_warning_900": "#ffeee1",
+  "color_warning_950": "#fff7ef",
+  "color_danger_50": "#130c0b",
+  "color_danger_100": "#2d1617",
+  "color_danger_200": "#663133",
+  "color_danger_300": "#8c3438",
+  "color_danger_400": "#ae3135",
+  "color_danger_500": "#dd4741",
+  "color_danger_600": "#ea5e51",
+  "color_danger_700": "#fb7e70",
+  "color_danger_800": "#ffa99e",
+  "color_danger_900": "#ffd5ce",
+  "color_danger_950": "#fff2f0",
+  "color_success_50": "#0e1511",
+  "color_success_100": "#051d09",
+  "color_success_200": "#1c3c2b",
+  "color_success_300": "#2c6245",
+  "color_success_400": "#2f7951",
+  "color_success_500": "#4c8a64",
+  "color_success_600": "#72a886",
+  "color_success_700": "#91bea0",
+  "color_success_800": "#b5d4bf",
+  "color_success_900": "#d1e4d8",
+  "color_success_950": "#e7f7ee",
+  "color_info_50": "#2c3337",
+  "color_info_100": "#2f3b40",
+  "color_info_200": "#324c59",
+  "color_info_300": "#335d71",
+  "color_info_400": "#316c88",
+  "color_info_500": "#4086ac",
+  "color_info_600": "#75a7c7",
+  "color_info_700": "#95bdd7",
+  "color_info_800": "#b4d3e9",
+  "color_info_900": "#d5eafb",
+  "color_info_950": "#ebf6ff",
+  "color_additional_50": "#141110",
+  "color_additional_950": "#f0e6dd",
+  "color_body_bg": "#060302",
+  "color_body_text": "#ebe3da",
+  "color_link": "#ae8946",
+  "color_link_hover": "#938e8d",
+  "color_shape_icon_bg": "#69511e",
+  "color_shape_icon": "#cecece",
+  "color_empty_list_icon": "#d8b167",
+  "color_mobile_menu_bg": "#1a1515",
+  "color_mobile_menu_text": "#d5ccc4",
+  "color_mobile_menu_link": "#938f85",
+  "color_mobile_menu_link_active": "#f0e6dd",
+  "color_mobile_menu_icon": "#4f4644",
+  "color_mobile_menu_icon_active": "#f0e6dd",
+  "color_mobile_menu_navigation": "#e0c287",
+  "color_mobile_menu_control": "#ad863f",
+  "color_header_top_bg": "#010000",
+  "color_header_top_text": "#d5ccc4",
+  "color_header_top_link": "#968d8a",
+  "color_header_top_link_hover": "#938e8d",
+  "color_header_top_link_active": "#a3a09f",
+  "color_header_bottom_bg": "#010000",
+  "color_header_bottom_text": "#d5ccc4",
+  "color_header_bottom_link": "#ae8946",
+  "color_header_bottom_link_hover": "#938e8d",
+  "color_header_bottom_link_active": "#a3a09f",
+  "color_footer_top_bg": "#14161a",
+  "color_footer_top_text": "#d5ccc4",
+  "color_footer_top_link": "#9a8e76",
+  "color_footer_top_link_hover": "#8f8f8f",
+  "color_footer_top_link_active": "#8f8f8f",
+  "color_footer_bottom_bg": "#14161a",
+  "color_footer_bottom_text": "#d5ccc4",
+  "color_footer_bottom_link": "#908f8f",
+  "color_footer_bottom_link_hover": "#8f8f8f",
+  "color_footer_bottom_link_active": "#8f8f8f"
+}

client-app/assets/presets/coffee.dark.json

@@ -0,0 +1,126 @@
+{
+  "color_primary_50": "#0e0c0a",
+  "color_primary_100": "#1d1815",
+  "color_primary_200": "#3a2c27",
+  "color_primary_300": "#5a433a",
+  "color_primary_400": "#78574a",
+  "color_primary_500": "#9f7665",
+  "color_primary_600": "#ad897c",
+  "color_primary_700": "#c4a79b",
+  "color_primary_800": "#d8c3bb",
+  "color_primary_900": "#eee2dd",
+  "color_primary_950": "#f8f0ee",
+  "color_secondary_50": "#0a0b0c",
+  "color_secondary_100": "#15181a",
+  "color_secondary_200": "#293033",
+  "color_secondary_300": "#3c484d",
+  "color_secondary_400": "#4f6068",
+  "color_secondary_500": "#6e8189",
+  "color_secondary_600": "#84939b",
+  "color_secondary_700": "#a2aeb5",
+  "color_secondary_800": "#c1cace",
+  "color_secondary_900": "#dfe4e7",
+  "color_secondary_950": "#edf0f2",
+  "color_accent_50": "#070b0d",
+  "color_accent_100": "#111a1e",
+  "color_accent_200": "#1f333e",
+  "color_accent_300": "#2a4a5a",
+  "color_accent_400": "#36647c",
+  "color_accent_500": "#5284a0",
+  "color_accent_600": "#749cb3",
+  "color_accent_700": "#96b6c7",
+  "color_accent_800": "#b5ccda",
+  "color_accent_900": "#d8e6ee",
+  "color_accent_950": "#ecf4f8",
+  "color_neutral_50": "#0c0908",
+  "color_neutral_100": "#191615",
+  "color_neutral_200": "#292523",
+  "color_neutral_300": "#64605d",
+  "color_neutral_400": "#55514f",
+  "color_neutral_500": "#575350",
+  "color_neutral_600": "#a7a29e",
+  "color_neutral_700": "#d9d3cf",
+  "color_neutral_800": "#f0eae6",
+  "color_neutral_900": "#faf4f0",
+  "color_neutral_950": "#fff9f5",
+  "color_warning_50": "#292417",
+  "color_warning_100": "#41371b",
+  "color_warning_200": "#735e19",
+  "color_warning_300": "#977300",
+  "color_warning_400": "#d09213",
+  "color_warning_500": "#af711e",
+  "color_warning_600": "#ffb55b",
+  "color_warning_700": "#ffcd9e",
+  "color_warning_800": "#ffe0c6",
+  "color_warning_900": "#ffeee1",
+  "color_warning_950": "#fff7ef",
+  "color_danger_50": "#130c0b",
+  "color_danger_100": "#2d1617",
+  "color_danger_200": "#663133",
+  "color_danger_300": "#8c3438",
+  "color_danger_400": "#ae3135",
+  "color_danger_500": "#dd4741",
+  "color_danger_600": "#ea5e51",
+  "color_danger_700": "#fb7e70",
+  "color_danger_800": "#ffa99e",
+  "color_danger_900": "#ffd5ce",
+  "color_danger_950": "#fff2f0",
+  "color_success_50": "#0e1511",
+  "color_success_100": "#051d09",
+  "color_success_200": "#1c3c2b",
+  "color_success_300": "#2c6245",
+  "color_success_400": "#2f7951",
+  "color_success_500": "#4c8a64",
+  "color_success_600": "#72a886",
+  "color_success_700": "#91bea0",
+  "color_success_800": "#b5d4bf",
+  "color_success_900": "#d1e4d8",
+  "color_success_950": "#e7f7ee",
+  "color_info_50": "#2c3337",
+  "color_info_100": "#2f3b40",
+  "color_info_200": "#324c59",
+  "color_info_300": "#335d71",
+  "color_info_400": "#316c88",
+  "color_info_500": "#4086ac",
+  "color_info_600": "#75a7c7",
+  "color_info_700": "#95bdd7",
+  "color_info_800": "#b4d3e9",
+  "color_info_900": "#d5eafb",
+  "color_info_950": "#ebf6ff",
+  "color_additional_50": "#141110",
+  "color_additional_950": "#f0e6dd",
+  "color_body_bg": "#060302",
+  "color_body_text": "#ebe3da",
+  "color_shape_icon_bg": "#2d5b72",
+  "color_shape_icon": "#cecece",
+  "color_price": "#d6b6a9",
+  "color_empty_list_icon": "#a17462",
+  "color_mobile_menu_bg": "#1d1310",
+  "color_mobile_menu_text": "#d5ccc4",
+  "color_mobile_menu_link": "#9d8b85",
+  "color_mobile_menu_link_active": "#f0e6dd",
+  "color_mobile_menu_icon": "#4f2e20",
+  "color_mobile_menu_icon_active": "#f0e6dd",
+  "color_mobile_menu_navigation": "#b08878",
+  "color_mobile_menu_control": "#a17462",
+  "color_header_top_bg": "#1d1310",
+  "color_header_top_text": "#d5ccc4",
+  "color_header_top_link": "#a3897e",
+  "color_header_top_link_hover": "#8b9092",
+  "color_header_top_link_active": "#889194",
+  "color_header_bottom_bg": "#010000",
+  "color_header_bottom_text": "#d5ccc4",
+  "color_header_bottom_link": "#ac978e",
+  "color_header_bottom_link_hover": "#82929a",
+  "color_header_bottom_link_active": "#969fa4",
+  "color_footer_top_bg": "#1d1310",
+  "color_footer_top_text": "#d5ccc4",
+  "color_footer_top_link": "#a3897e",
+  "color_footer_top_link_hover": "#8e8f91",
+  "color_footer_top_link_active": "#849298",
+  "color_footer_bottom_bg": "#1a1512",
+  "color_footer_bottom_text": "#d5ccc4",
+  "color_footer_bottom_link": "#889194",
+  "color_footer_bottom_link_hover": "#8b9092",
+  "color_footer_bottom_link_active": "#889194"
+}

client-app/assets/presets/default.dark.json

@@ -0,0 +1,92 @@
+{
+  "color_primary_50": "#17130b",
+  "color_primary_100": "#2b200f",
+  "color_primary_200": "#4b3511",
+  "color_primary_300": "#7f5405",
+  "color_primary_400": "#aa720e",
+  "color_primary_500": "#b0701e",
+  "color_primary_600": "#ffb977",
+  "color_primary_700": "#fec590",
+  "color_primary_800": "#ffd8b6",
+  "color_primary_900": "#ffe8d3",
+  "color_primary_950": "#fff7ef",
+  "color_secondary_50": "#010202",
+  "color_secondary_100": "#0c1013",
+  "color_secondary_200": "#232c32",
+  "color_secondary_300": "#3b4853",
+  "color_secondary_400": "#536474",
+  "color_secondary_500": "#698095",
+  "color_secondary_600": "#96a8bb",
+  "color_secondary_700": "#c0cfde",
+  "color_secondary_800": "#d6dee9",
+  "color_secondary_900": "#e9edf2",
+  "color_secondary_950": "#f2f7f7",
+  "color_accent_50": "#141e22",
+  "color_accent_100": "#18323a",
+  "color_accent_200": "#003a4a",
+  "color_accent_300": "#00495e",
+  "color_accent_400": "#005f7e",
+  "color_accent_500": "#3c87a8",
+  "color_accent_600": "#66a1bc",
+  "color_accent_700": "#86b6cd",
+  "color_accent_800": "#a5cedf",
+  "color_accent_900": "#c4eaf5",
+  "color_accent_950": "#e1f6ff",
+  "color_neutral_50": "#0c0908",
+  "color_neutral_100": "#191615",
+  "color_neutral_200": "#292523",
+  "color_neutral_300": "#64605d",
+  "color_neutral_400": "#55514f",
+  "color_neutral_500": "#575350",
+  "color_neutral_600": "#a7a29e",
+  "color_neutral_700": "#d9d3cf",
+  "color_neutral_800": "#f0eae6",
+  "color_neutral_900": "#faf4f0",
+  "color_neutral_950": "#fff9f5",
+  "color_warning_50": "#292417",
+  "color_warning_100": "#41371b",
+  "color_warning_200": "#735e19",
+  "color_warning_300": "#977300",
+  "color_warning_400": "#d09213",
+  "color_warning_500": "#af711e",
+  "color_warning_600": "#ffb55b",
+  "color_warning_700": "#ffcd9e",
+  "color_warning_800": "#ffe0c6",
+  "color_warning_900": "#ffeee1",
+  "color_warning_950": "#fff7ef",
+  "color_danger_50": "#130c0b",
+  "color_danger_100": "#2d1617",
+  "color_danger_200": "#663133",
+  "color_danger_300": "#8c3438",
+  "color_danger_400": "#ae3135",
+  "color_danger_500": "#dd4741",
+  "color_danger_600": "#ea5e51",
+  "color_danger_700": "#fb7e70",
+  "color_danger_800": "#ffa99e",
+  "color_danger_900": "#ffd5ce",
+  "color_danger_950": "#fff2f0",
+  "color_success_50": "#0e1511",
+  "color_success_100": "#051d09",
+  "color_success_200": "#1c3c2b",
+  "color_success_300": "#2c6245",
+  "color_success_400": "#2f7951",
+  "color_success_500": "#4c8a64",
+  "color_success_600": "#72a886",
+  "color_success_700": "#91bea0",
+  "color_success_800": "#b5d4bf",
+  "color_success_900": "#d1e4d8",
+  "color_success_950": "#e7f7ee",
+  "color_info_50": "#2c3337",
+  "color_info_100": "#2f3b40",
+  "color_info_200": "#324c59",
+  "color_info_300": "#335d71",
+  "color_info_400": "#316c88",
+  "color_info_500": "#4086ac",
+  "color_info_600": "#75a7c7",
+  "color_info_700": "#95bdd7",
+  "color_info_800": "#b4d3e9",
+  "color_info_900": "#d5eafb",
+  "color_info_950": "#ebf6ff",
+  "color_additional_50": "#141110",
+  "color_additional_950": "#f0e6dd"
+}

client-app/assets/presets/index.ts

@@ -1,8 +1,14 @@
+import blackGoldDark from './black-gold.dark.json'
 import blackGold from './black-gold.json'
+import coffeeDark from './coffee.dark.json'
 import coffee from './coffee.json'
+import defaultDark from './default.dark.json'
 import defaultPreset from './default.json'
+import mercuryDark from './mercury.dark.json'
 import mercury from './mercury.json'
+import purplePinkDark from './purple-pink.dark.json'
 import purplePink from './purple-pink.json'
+import watermelonDark from './watermelon.dark.json'
 import watermelon from './watermelon.json'
 import type { IThemeConfigPreset } from "@/core/types";
 
@@ -14,3 +20,12 @@ export const presets: Record<string, IThemeConfigPreset> = {
   watermelon: watermelon,
   coffee: coffee,
 } as const;
+
+export const darkPresets: Record<string, IThemeConfigPreset> = {
+  ['black-gold']: blackGoldDark,
+  default: defaultDark,
+  mercury: mercuryDark,
+  ['purple-pink']: purplePinkDark,
+  watermelon: watermelonDark,
+  coffee: coffeeDark,
+} as const;