Question: How to define custom color schemes?

[NN708]

I would like to define a custom color scheme similar to neversink-CUSTOM-scheme. Is there any guidance on the best practices for implementing this?

[gureckis]

have a look at https://github.com/gureckis/slidev-theme-neversink/blob/main/uno.config.ts. specifically if you look at the navy schemes that is an example. if you add a uno.config.ts file to your project it will merge with the theme's default config. at the extreme end i believe you could just copy the uno.config.ts from my theme and add it to your project folder and then add a new scheme definition but i haven't tested that.

[NN708]

I successfully implemented the uno.config.ts file with the following configuration:

import { defineConfig } from 'unocss'
import { colors } from '@unocss/preset-mini'

export default defineConfig ({
  rules: [
    ['neversink-custom-scheme', {
      '--neversink-bg-color': colors['fuchsia'][600],
      '--neversink-bg-code-color': colors['fuchsia'][700],
      '--neversink-fg-code-color': colors['fuchsia'][100],
      '--neversink-fg-color': colors['fuchsia'][100],
      '--neversink-text-color': colors['fuchsia'][100],
      '--neversink-border-color': colors['fuchsia'][100],
      '--neversink-highlight-color': colors['fuchsia'][100],
    }],
  ],
  safelist: [
    'neversink-custom-scheme'
  ]
})

Thanks for your guidance!