Dark Mode in combination of Noir (primary) + Soho (Surfaces)

[amanov-begli]

Hi Dear PrimeVue Team, I am a big fan of your work since 3 years already. A while ago I've started to create a nice app and right now decided to use Design tokens as a fundament for my app. Right now I am running into an issue of not getting proppert colors (surfaces, primary). Any support will be appreciated.

Here is how my login from PrimeBlocks looks like:

And here is how I would like to make it look:

My main.ts file looks like this:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import './styles/main.css';

// PrimeVue imports
import { definePreset } from '@primevue/themes';
import Aura from '@primevue/themes/aura';
import PrimeVue from 'primevue/config';
import Ripple from 'primevue/ripple';

// Variables and Function
const app = createApp(App);

const Noir = definePreset(Aura, {
	semantic: {
		colorScheme: {
			dark: {
				primary: {
					50: '{noir.50}',
					100: '{noir.100}',
					200: '{noir.200}',
					300: '{noir.300}',
					400: '{noir.400}',
					500: '{noir.500}',
					600: '{noir.600}',
					700: '{noir.700}',
					800: '{noir.800}',
					900: '{noir.900}',
					950: '{noir.950}',
				},
				surface: {
					50: '{soho.50}',
					100: '{soho.100}',
					200: '{soho.200}',
					300: '{soho.300}',
					400: '{soho.400}',
					500: '{soho.500}',
					600: '{soho.600}',
					700: '{soho.700}',
					800: '{soho.800}',
					900: '{soho.900}',
					950: '{soho.950}',
				},
			},
		},
	},
});

app.directive('ripple', Ripple);
app.use(PrimeVue, {
	theme: {
		preset: Noir,
		options: {
			darkModeSelector: '.my-app-dark',
		},
	},
	ripple: true,
});

app.use(router);
app.mount('#app');

There is nothing in my main.css file beside imports. Here is the entire content of it:

 /* 
==========================================================================
   PLUGIN IMPORTS
==========================================================================
*/

@import "primeicons/primeicons.css";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

After pasting the code from the PirmeBlocks this Form does not get the correct colors I want to have. What I am missing or doing wrong. Any help will be more than appreciated

I would like to have this color palette. Attention on focus rings!

Thank you!
Be well
Begli!

[amanov-begli]

And I've have already set my html to use class="my-app-dark".