diff --git a/README.md b/README.md index aa45f79..f4bc81a 100644 --- a/README.md +++ b/README.md @@ -156,24 +156,27 @@ TypeScript is configured and ready for use if desired, but is not required. ## Theme -This starter kit features a built-in light/dark mode toggle along with a collection of custom theme presets built using the powerful **PrimeVue V4** theming system. It leverages styled mode and custom design token values to create flexible and cohesive UI designs. +This starter kit provides a collection of custom theme presets to choose from, built using the powerful **PrimeVue V4** theming system. It leverages styled mode and custom design token values to create flexible and cohesive UI designs. -### Prebuilt Theme Presets +### Provided Theme Presets -The prebuilt theme presets are located in the `/src/theme` directory. Each preset offers a distinct visual style: - -- **noir** - A minimal, monochromatic theme that serves as the default style. +The theme presets are located in the `/resources/js/theme` directory. Each preset offers a distinct visual style: - **bootstrap** - Emulates the familiar look and feel of [Bootstrap](https://getbootstrap.com/). + Emulates the look and feel of [Bootstrap](https://getbootstrap.com/). - **breeze** - Captures the aesthetic of [Laravel Breeze](https://github.com/laravel/breeze). + Captures the aesthetic of [Laravel Breeze](https://github.com/laravel/breeze). (R.I.P. :pray:) - **enterprise** Provides a clean, no-nonsense corporate design. +- **noir** + A minimal & clean monochromatic style that serves as the default theme. + +- **warm** + A boxy design with a warmer color pallette. + ### Customizing Your Own Theme Creating your own theme preset is simple. You can: diff --git a/src/theme/enterprise-preset.js b/src/theme/enterprise-preset.js index a0d7334..87caba9 100644 --- a/src/theme/enterprise-preset.js +++ b/src/theme/enterprise-preset.js @@ -1,4 +1,4 @@ -import Preset from '@primeuix/themes/nora'; +import Preset from '@primeuix/themes/material'; import { definePreset } from '@primeuix/themes'; const customThemePreset = definePreset(Preset, { diff --git a/src/theme/warm-preset.js b/src/theme/warm-preset.js new file mode 100644 index 0000000..08f961f --- /dev/null +++ b/src/theme/warm-preset.js @@ -0,0 +1,54 @@ +import Preset from '@primeuix/themes/nora'; +import { definePreset } from '@primeuix/themes'; + +const customThemePreset = definePreset(Preset, { + semantic: { + primary: { + 50: '{orange.50}', + 100: '{orange.100}', + 200: '{orange.200}', + 300: '{orange.300}', + 400: '{orange.400}', + 500: '{orange.500}', + 600: '{orange.600}', + 700: '{orange.700}', + 800: '{orange.800}', + 900: '{orange.900}', + 950: '{orange.950}', + }, + colorScheme: { + light: { + surface: { + 50: '{stone.50}', + 100: '{stone.100}', + 200: '{stone.200}', + 300: '{stone.300}', + 400: '{stone.400}', + 500: '{stone.500}', + 600: '{stone.600}', + 700: '{stone.700}', + 800: '{stone.800}', + 900: '{stone.900}', + 950: '{stone.950}', + }, + }, + dark: { + surface: { + 50: '{stone.50}', + 100: '{stone.100}', + 200: '{stone.200}', + 300: '{stone.300}', + 400: '{stone.400}', + 500: '{stone.500}', + 600: '{stone.600}', + 700: '{stone.700}', + 800: '{stone.800}', + 900: '{stone.900}', + 950: '{stone.950}', + }, + }, + }, + }, +}); + +export default customThemePreset;