Cannot apply themes for my project

[CunningLobster]

I'd like to apply theming in my project as it was made here.
I used the same patterns to define base colors for elements, but it works only for dark scheme.

I've created necessary files for approaching this goal:

src/styles/index.scss

// import dark theme
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
@use 'base-role-table.scss';
@use 'permission-group-table.scss';

html.dark {
  --el-fill-color-blank: var(--el-bg-color);
  --side-bar-background: black;
}

body {
  font-family: Inter, system-ui, Avenir, 'Helvetica Neue', Helvetica, 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

a {
  color: var(--el-color-primary);
}

code {
  border-radius: 2px;
  padding: 2px 4px;
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

//Global classes
.side-bar-menu {
  background-color: var(--side-bar-background);
  width: var(--side-bar-width);
  border-style: hidden;
}

.el-input__wrapper {
  border-radius: 8px;
  background-color: #fafaff;
}

src/styles/element/index.scss

$--colors: (
  'primary': (
    'base': #16a896
  ),
  'success': (
    'base': #21ba45
  ),
  'warning': (
    'base': #f2711c
  ),
  'danger': (
    'base': #a8164b
  ),
  'error': (
    'base': #db2828
  ),
  'info': (
    'base': #42b8dd
  )
);

// You should use them in scss, because we calculate it by sass.
// comment next lines to use default color
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  // do not use same name, it will override.
  $colors: $--colors,
  //$button-padding-horizontal: ('default': 50px)
);

@use "./dark.scss";

src/styles/element/dark.scss

$--colors: (
  'primary': (
    'base': #a816a1
  ),
  'success': (
    'base': #21ba45
  ),
  'warning': (
    'base': #f2711c
  ),
  'danger': (
    'base': #a8164b
  ),
  'error': (
    'base': #db2828
  ),
  'info': (
    'base': #42b8dd
  )
);

@forward "element-plus/theme-chalk/src/dark/var.scss" with (
  $colors: $--colors
);

Imported it in main.ts and vite.config.ts

main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'
import router from './router'
import { languages } from './i18n'
import { defaultLocale } from './i18n'  
import { createI18n, useI18n } from 'vue-i18n'
import "~/styles/index.scss";

const messages = Object.assign(languages);

const i18n = createI18n({
    legacy: false,
    locale: defaultLocale,
    fallbackLocale: 'en',
    messages
})

const app = createApp(App, {
    setup() {
        const {t} = useI18n()
        return {t}
    }
})

app.use(createPinia())
app.use(ElementPlus)
app.use(router)
app.use(i18n)

app.mount('#app')

vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'

const pathSrc = path.resolve(__dirname, 'src')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~/': `${pathSrc}/`,
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
  server: {
    port: 5173,
    strictPort : true,
    proxy: {
      '/api' : {
        target: 'http://localhost:5129',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, '/api')
      }
    }
  },
})

And in the result my color scheme works only for dark scheme (colors from dark.scss), but for light scheme all colors are default despite the fact I overridden it in index.scss