Update Default Layout Config in Vue

I have a Vue app using v8.1.0 demo1
Now I want to change the layout theme to be like demo 7

I copied the config from v8.2.1 demo 7 and pasted it in my app - Default Layout Config, but it didn't work!

here is my old config:

const config: LayoutConfigTypes = {
themeName: "HRO",
themeVersion: "8.1.0",
demo: "demo1",
main: {
type: "default",
primaryColor: "#009EF7",
logo: {
dark: "media/logos/default-dark.svg",
light: "media/logos/default.svg",
},
},
illustrations: {
set: "sketchy-1",
},
loader: {
logo: "media/logos/default-dark.svg",
display: true,
type: "default",
},
scrollTop: {
display: true,
},
header: {
display: true,
menuIcon: "font",
width: "fluid",
fixed: {
desktop: true,
tabletAndMobile: true,
},
},
toolbar: {
display: true,
width: "fluid",
fixed: {
desktop: true,
tabletAndMobile: true,
},
},
aside: {
display: true,
theme: "dark",
fixed: true,
menuIcon: "svg",
minimized: false,
minimize: true,
hoverable: true,
},
content: {
width: "fixed",
},
footer: {
width: "fluid",
},
};


and here is what i copied:

const config: LayoutConfigTypes = {
general: {
mode: "system",
iconsType: "duotone",
},
main: {
type: "default",
primaryColor: "#009EF7",
logo: {
dark: "media/logos/default-dark.svg",
light: "media/logos/default.svg",
},
},
illustrations: {
set: "sketchy-1",
},
scrollTop: {
display: true,
},
header: {
display: true,
menuIcon: "keenthemes",
width: "fixed",
fixed: {
desktop: true,
tabletAndMobile: true,
},
},
toolbar: {
display: true,
width: "fixed",
fixed: {
desktop: true,
tabletAndMobile: true,
},
},
pageTitle: {
display: true,
breadcrumb: true,
direction: "column",
},
aside: {
display: true,
secondaryDisplay: true,
theme: "dark",
fixed: true,
menuIcon: "keenthemes",
minimized: false,
minimize: true,
hoverable: true,
},
content: {
width: "fixed",
},
footer: {
width: "fixed",
},
};

can you help me, please?