feat: move theme logic to modules and update docs

docs/.vitepress/config/index.ts

@@ -30,6 +30,7 @@ export default defineConfig({
       '/guide/': { base: '/guide/', items: sidebarGuide() },
       '/config/': { base: '/config/', items: sidebarGuide() },
       '/types/': { base: '/types/', items: sidebarGuide() },
+      '/styles/': { base: '/styles/', items: sidebarGuide() },
     },
 
     socialLinks: [
@@ -102,6 +103,17 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
         { text: 'Dark', link: 'theme-dark' },
         { text: 'Smooth', link: 'theme-smooth' },
         { text: 'Contrast', link: 'theme-contrast' },
+        { text: 'Custom', link: 'theme-custom' },
+      ],
+    },
+    {
+      text: 'Styles',
+      base: '/styles/',
+      items: [
+        { text: 'General', link: 'general' },
+        // { text: 'Typography', link: 'typography' },
+        // { text: 'Buttons', link: 'buttons' },
+        // { text: 'Layout', link: 'layout' },
       ],
     },
     {

docs/config/shared-options.md

@@ -100,3 +100,10 @@ Parameters that define the custom cookies.
 - **Reference:** [Callback Functions](./callback-functions.md)
 
 Functions that will be invoked after some events: first load, every load, after accepting cookies, and after rejecting cookies. Callback functions allow us to control the actions that must be executed depending on the state of the cookies.
+
+## theme
+
+- **Type:** `darkTheme | contrastTheme | smoothTheme | undefined`
+- **Default:** `undefined`
+
+Theme that will be applied to the cookies consent. Need to import module and add to the configuration.

docs/guide/theme-contrast.md

@@ -2,25 +2,18 @@
 
 Contrast theme is a simple theme that is designed to be a starting point for your own customizations.
 
-## Installation
+## Usage
 
-You need to import this css files `before` the main CSS file.
+```typescript
+import { CookiesConsent, contrastTheme } from '../index'
 
-::: code-group
+const cookiesConsent = new CookiesConsent({
+  // other configurations
 
-```postcss [postcss]
-@import '@metamorfosilab/cookies-consent/dist/themes/contrast.css';
+  theme: contrastTheme, // [!code highlight]
+})
 ```
 
-```scss [scss]
-@import '~@metamorfosilab/cookies-consent/dist/themes/contrast.css';
-```
-
-```css [css]
-@import '@metamorfosilab/cookies-consent/dist/themes/contrast.css';
-```
-:::
-
 ## Preview
 
 ![Contrast Theme](../assets/images/themes/cc-theme-contrast.jpeg)

docs/guide/theme-custom.md

@@ -0,0 +1,5 @@
+# Custom Theme
+
+To make CookiesConsent look like your website, you can create your own theme. just pass your theme object to the `theme` property of the configuration object.
+
+Please refer to the [Styles API](../styles/general.md) for more information.

docs/guide/theme-dark.md

@@ -2,25 +2,18 @@
 
 Dark theme is a simple theme that is designed to be a starting point for your own customizations.
 
-## Installation
+## Usage
 
-You need to import this css files `before` the main CSS file.
+```typescript
+import { CookiesConsent, darkTheme } from '../index'
 
-::: code-group
+const cookiesConsent = new CookiesConsent({
+  // other configurations
 
-```postcss [postcss]
-@import '@metamorfosilab/cookies-consent/dist/themes/dark.css';
+  theme: darkTheme, // [!code highlight]
+})
 ```
 
-```scss [scss]
-@import '~@metamorfosilab/cookies-consent/dist/themes/dark.css';
-```
-
-```css [css]
-@import '@metamorfosilab/cookies-consent/dist/themes/dark.css';
-```
-:::
-
 ## Preview
 
 ![Dark Theme](../assets/images/themes/cc-theme-dark.jpeg)

docs/guide/theme-default.md

@@ -4,7 +4,7 @@ The default theme is a simple theme that is designed to be a starting point for
 
 ## Installation
 
-For this theme, you don't need to import any CSS file. It's already included in the main CSS file.
+For this theme, you don't need to specify `theme` property in the configuration object.
 
 ## Preview
 

docs/guide/theme-smooth.md

@@ -2,25 +2,18 @@
 
 Smooth theme is a simple theme that is designed to be a starting point for your own customizations.
 
-## Installation
+## Usage
 
-You need to import this css files `before` the main CSS file.
+```typescript
+import { CookiesConsent, smoothTheme } from '../index'
 
-::: code-group
+const cookiesConsent = new CookiesConsent({
+  // other configurations
 
-```postcss [postcss]
-@import '@metamorfosilab/cookies-consent/dist/themes/smooth.css';
+  theme: smoothTheme, // [!code highlight]
+})
 ```
 
-```scss [scss]
-@import '~@metamorfosilab/cookies-consent/dist/themes/smooth.css';
-```
-
-```css [css]
-@import '@metamorfosilab/cookies-consent/dist/themes/smooth.css';
-```
-:::
-
 ## Preview
 
 ![Smooth Theme](../assets/images/themes/cc-theme-smooth.jpeg)