From 517807d052f727d3a9ef40e3607e7893b90e6ee2 Mon Sep 17 00:00:00 2001 From: Yury Uvarov Date: Thu, 30 Nov 2023 14:58:15 +0300 Subject: [PATCH] fix readme --- package/README.md | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) 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