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".

[j0rgedev]

Hello @amanov-begli. It’s fantastic to see you’ve been using primevue for so long! Regarding your question, the issue with your custom preset not working is likely due to a few missing layers. The preset you chose is called Noir, which PrimeVue provides as a base template. I used this preset as a starting point and added the specific surface layer you requested.

import { definePreset } from '@primevue/themes';
import Aura from '@primevue/themes/aura';

const Noir = definePreset(Aura, {
  semantic: {
    primary: {
      50: '{surface.50}',
      100: '{surface.100}',
      200: '{surface.200}',
      300: '{surface.300}',
      400: '{surface.400}',
      500: '{surface.500}',
      600: '{surface.600}',
      700: '{surface.700}',
      800: '{surface.800}',
      900: '{surface.900}',
      950: '{surface.950}',
    },
    colorScheme: {
      light: {
        primary: {
          color: '{primary.950}',
          contrastColor: '#ffffff',
          hoverColor: '{primary.900}',
          activeColor: '{primary.800}',
        },
        highlight: {
          background: '{primary.950}',
          focusBackground: '{primary.700}',
          color: '#ffffff',
          focusColor: '#ffffff',
        },
        surface: {
          0: '#ffffff',
          50: '#f4f4f4',
          100: '#e8e9e9',
          200: '#d2d2d4',
          300: '#bbbcbe',
          400: '#a5a5a9',
          500: '#8e8f93',
          600: '#77787d',
          700: '#616268',
          800: '#4a4b52',
          900: '#34343d',
          950: '#1d1e27',
        },
      },
      dark: {
        primary: {
          color: '{primary.50}',
          contrastColor: '{primary.950}',
          hoverColor: '{primary.100}',
          activeColor: '{primary.200}',
        },
        highlight: {
          background: '{primary.50}',
          focusBackground: '{primary.300}',
          color: '{primary.950}',
          focusColor: '{primary.950}',
        },
        surface: {
          0: '#ffffff',
          50: '#f4f4f4',
          100: '#e8e9e9',
          200: '#d2d2d4',
          300: '#bbbcbe',
          400: '#a5a5a9',
          500: '#8e8f93',
          600: '#77787d',
          700: '#616268',
          800: '#4a4b52',
          900: '#34343d',
          950: '#1d1e27',
        },
      },
    },
  },
});

export default Noir;

Hope this helps. Let me know if you have any questions 😁