How to update useWebAppTheme params to make them work in Nuxt3?

[Raxort]

Hello! First of all: thank you for your component! I am trying to use it in Nuxt 3 and I managed to get useWebApp work correctly with ssr: false option in nuxt-config.ts. But I can't change useWebAppTheme for some reason. Looks like I am doing something wrong. Can you help me, please?

I am importing the code in my default layout

<script setup>
  import { useWebAppTheme } from 'vue-tg'
  useWebAppTheme().colorScheme.value = 'dark'
  useWebAppTheme().headerColor.value = '#000000'
  useWebAppTheme().backgroundColor.value = '#000000'

  useWebAppTheme().themeParams.value = {
    bg_color: '#000000',
    header_bg_color: '#000000'
  }

</script>

As you see I am trying to set a black background and black header bg color. But when I load the app in Telegram it still stays white.

[deptyped]

Hello. You can't change colorScheme and themeParams, these fields are intended to get the current theme settings from the user's Telegram application. If you want to use a different colour scheme in your web app, you can simply ignore these fields.

You can change headerColor and backgroundColor with setHeaderColor(color) and setBackgroundColor(color), respectively. Direct modification is not implemented, but I like this idea, I will implement it soon.

Thank you for the feedback!

[Raxort]

Thank you very much for your reply! I am building a dark application and setting dark colors for the background and header would be amazing.

[deptyped]

I published 0.2.0. Now you can change headerColor and backgroundColor directly via refs. This code should work:

<script lang="ts" setup>
import { useWebAppTheme } from 'vue-tg'

const { headerColor, backgroundColor } = useWebAppTheme()

headerColor.value = '#000000'
backgroundColor.value = '#000000'
</script>

<template>
  Header color: {{ headerColor }} 
  <br />
  Background color: {{ backgroundColor }}
</template>

[Raxort]

Nice! You are the best! I just tried to change colors and it works great. Thank you for this update!