feat(theme): add layers option

[Niki2k1]

Description

I was trying to get Tailwind working with Vuetify and enabled layers. I had some issues with the theme overwriting my tailwind colors and such. So I created an option which lets me enable a layer for the generated theme.

Usage:

theme: {
  unimportant: true,
  layer: true, // or specify a custom name: 'my-custom-layer'
},

which then generates:

@layer vuetify-theme { 
 :root {
      --v-theme-background: 255,255,255;
      --v-theme-background-overlay-multiplier: 1;
      --v-theme-surface: 255,255,255;
      --v-theme-surface-overlay-multiplier: 1;
      /* ... */

[KaelWD]

This should use the same layer names as v4 for forwards compatibility:

vuetify/packages/vuetify/src/composables/theme.ts

Lines 422 to 432 in a9a1aa2

	lines.push(
	'@layer background {\n',
	...bgLines.map(v => ` ${v}`),
	'}\n',
	'@layer foreground {\n',
	...fgLines.map(v => ` ${v}`),
	'}\n',
	)
	}
	return '@layer vuetify.theme {\n' + lines.map(v => ` ${v}`).join('') + '\n}'

[Niki2k1]

So I would remove the option for the custom name and set the layer name to vuetify.theme?
I believe foreground and background layer will be a v4 Feature right?

Should it still be opt-in via the layer: true option?

[J-Sek]

I believe foreground and background layer will be a v4 Feature right?

Edit: sorry, linked master previously, this is next:

vuetify/packages/vuetify/src/styles/generic/_layers.scss

Line 11 in a9a1aa2

@layer theme.background, theme.foreground, utilities;

[Niki2k1]

I updated the pr to align with the v4 version. If the layer option is set to true (is now a boolean only) the layer will get generated (with background and foreground like in v4) as well as the vuetify.theme

So this is basically a backport now.