diff --git a/config/assets.config.ts b/config/assets.config.ts
index 9e255087..59833359 100644
--- a/config/assets.config.ts
+++ b/config/assets.config.ts
@@ -23,9 +23,10 @@ export default defineConfig({
},
},
input: {
+ main: resolve(__dirname, '../package/src/styles/vanilla-calendar.css'),
+ layout: resolve(__dirname, '../package/src/styles/vanilla-calendar.layout.css'),
light: resolve(__dirname, '../package/src/styles/themes/light.css'),
dark: resolve(__dirname, '../package/src/styles/themes/dark.css'),
- 'vanilla-calendar': resolve(__dirname, '../package/src/styles/vanilla-calendar.css'),
},
},
},
diff --git a/demo/main.ts b/demo/main.ts
index 44816a38..5ed1e3bc 100644
--- a/demo/main.ts
+++ b/demo/main.ts
@@ -1,16 +1,10 @@
// import { IOptions } from '@package/types';
// import VanillaCalendar from '@/package/build/vanilla-calendar.min';
-
// import '@/package/build/vanilla-calendar.min.css';
-// import '@/package/build/themes/light.min.css';
-// import '@/package/build/themes/dark.min.css';
import { IOptions } from '@package/types';
import VanillaCalendar from '@src/vanilla-calendar';
-
import '@src/styles/vanilla-calendar.css';
-import '@src/styles/themes/light.css';
-import '@src/styles/themes/dark.css';
const config: IOptions = {
settings: {
diff --git a/package/README.md b/package/README.md
index 76f9e643..f1eb2a84 100644
--- a/package/README.md
+++ b/package/README.md
@@ -68,13 +68,9 @@ To add the necessary styles and scripts, you can use the following code:
// JS Script
import VanillaCalendar from '@uvarov.frontend/vanilla-calendar';
-// Basic styles
+// Styles
import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
-// Additional styles
-import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
-import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';
-
// Initialize the calendar
const calendar = new VanillaCalendar('#calendar');
calendar.init();
@@ -90,8 +86,6 @@ If you're not using a package manager and prefer manual installation or CDN usag
-
-
@@ -110,13 +104,24 @@ If you're not using a package manager and prefer manual installation or CDN usag
## CSS Themes
+```js
+// Only layout calendar
+import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.layout.min.css';
+
+// Themes
+import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
+import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';
+```
+
VanillaCalendar includes two CSS themes: the **light theme** and the **dark theme**.
-- The **vanilla-calendar.min.css** file contains the essential structural styles for the calendar.
-- The **light.min.css** theme provides a light color scheme.
-- The **dark.min.css** theme offers a dark color scheme.
+- The **vanilla-calendar.min.css** file contains all styles with all themes.
+- The **vanilla-calendar.layout.min.css** file contains the essential structural styles for the calendar.
+- The **themes/light.min.css** theme provides a light color scheme.
+- The **themes/dark.min.css** theme offers a dark color scheme.
+
-The calendar will automatically display the theme based on the user's system preferences. If you want to enforce a specific theme, you can do so manually without the need to import all themes separately.
+The calendar will automatically display the theme according to the user's system preferences. If you want to apply a specific theme, it is recommended to import **«vanilla-calendar.layout.min.css»** along with the theme you prefer: **«light.min.css»** or **«dark.min.css»**, instead of **«vanilla-calendar.min.css»**.
## DOM Templates
diff --git a/package/build/demo.html b/package/build/demo.html
index 7a07b0ac..4b73eac3 100644
--- a/package/build/demo.html
+++ b/package/build/demo.html
@@ -1,15 +1,14 @@
-
+
+
-
+
+
+ Demo VanillaCalendar
-
-
-
-
-