Css vars меняется не одновременно для вложенных элементов

Question

У меня есть проект Vue 3 с Pinia. У меня есть магазин для темы

      export const useThemeStore = defineStore('theme', {
  state: () => ({
    dark: false,
  }),

  getters: {
    current(state) {
      return state.dark ? Theme.dark : Theme.light
    },
  },

  persist: true,
})

И я использую его в своем файле App.vue (с шаблонами Pug), как это

      Head
  html(:data-theme="theme.current")

Также у меня есть такие стили, как

      html {
  --col-white: 255 255 255;
  --col-black: 22 25 33;

  &[data-theme='dark'] {
    --col-primary: 255 255 255;
    --col-secondary: 230 236 245;
    --col-page: 22 25 33;
    --col-page-content: 116 140 171;
    --col-success: 57 158 90;
    --col-info: 58 133 199;
    --col-warning: 255 127 17;
    --col-danger: 255 27 28;
  }

  &[data-theme='light'] {
    --col-primary: 22 25 33;
    --col-secondary: 116 140 171;
    --col-page: 255 255 255;
    --col-page-content: 230 236 245;
    --col-success: 57 158 90;
    --col-info: 58 133 199;
    --col-warning: 255 127 17;
    --col-danger: 255 27 28;
  }
}

И у меня проблема - все переменные меняются с задержкой сверху вниз во вложенности DOM

Вот гифка для понимания