Creating a New Theme from Scratch

The default theme in the framework is mizoon, but you can easily create your own custom themes with different colors, fonts, and components.

1. Create Your Theme Folder #

Inside the themes/ directory, make a new folder for your theme, for example:

        

            
Path
            
        
        themes/your-theme/
    

2. Copy the Config Folder #

Take the whole config folder from the mizoon theme and paste it into your new theme:

        

            
Path
            
        
        themes/your-theme/config/
    

Then open the files inside and adjust things like colors, fonts, or spacing to match your theme’s style.

3. Important Note About Colors and Fonts #

When you define new colors or fonts for your theme, make sure you merge them with the main framework’s settings. This keeps your theme compatible with the base system.

Example — Colors:

        

            
SCSS
            
        
        $light-color-palette-theme: (
    primary: #ff6b6b,
    secondary: #ffe66d
);
$light-color-palette: map.merge($light-color-palette, $light-color-palette-theme);
    

Example — Fonts:

        

            
SCSS
            
        
        $fonts-theme: (
    "tektur": (
        "defaults": "'Brush Script MT', cursive",
        "folder": "Tektur",
        "font-types": (
            "bold": ("Tektur-Bold.ttf"),
            "regular": ("Tektur-Regular.ttf")
        )
    )
);
$fonts: map.merge($fonts, $fonts-theme);
    

💡 Tip: Merging ensures your theme and the main system work together smoothly.

4. Enable or Disable the Theme #

Open config.js and set your theme name to activate it:

        

            
JS
            
        
        export const config = {
    theme: 'your-theme',
    output: 'public/assets/js/mizchin.min.js'
};
    

To disable themes completely:

        

            
JS
            
        
        export const config = {
    theme: null,
    output: 'public/assets/js/mizchin.min.js'
};
    

5. Create the Components Folder #

Inside your theme folder, add a new folder called components:

        

            
Path
            
        
        themes/your-theme/components/
    

In there, create _index.scss to connect all components:

        

            
SCSS
            
        
        @forward 'button';
@forward 'card';
    

Each component you make should have its own folder, like this:

        

            
Structure
            
        
        button/
├── index.html
├── script.js
└── _index.scss
    

• index.html: the component's HTML structure
• _index.scss: all related styles
• script.js: JavaScript behavior for that component

6. Connect Components to the Theme #

        

            
SCSS
            
        
        @forward 'config/_index';
@forward 'components/_index';
    

✅ Final Structure #

        

            
Folder Tree
            
        
        themes/
 ├── mizoon/
 └── your-theme/
     ├── _index.scss
     ├── config/
     │    ├── _colors.scss
     │    ├── _component.scss
     │    ├── _dims.scss
     │    ├── _index.scss
     │    ├── _responsive.scss
     │    └── _typography.scss
     └── components/
          ├── _index.scss
          ├── button/
          │    ├── index.html
          │    ├── _index.scss
          │    └── script.js
          └── card/
               ├── index.html
               ├── _index.scss
               └── script.js