tcitworld/wallabag_theme_tutorial.md

## wallabag_theme_tutorial.md

      
    Raw
  

              wallabag_theme_tutorial.md
            
          
    Requirements


Modern front-end knowledge
Checkout https://doc.wallabag.org/en/developer/front_end.html

Adding your theme

Add your theme name inside app/config/config.yml, key liip_theme.themes:
liip_theme:
    load_controllers: false
    themes:
        - baggy
        - material
        - mynewtheme
    autodetect_theme: wallabag_core.helper.detect_active_theme

Add webpack configuration

Add your theme to webpack inside app/config/webpack/common.js :
entry: {
      material: path.join(rootDir, './app/Resources/static/themes/material/index.js'),
      baggy: path.join(rootDir, './app/Resources/static/themes/baggy/index.js'),
      mytheme: path.join(rootDir, './app/Resources/static/themes/mytheme/index.js'),
      public: path.join(rootDir, './app/Resources/static/themes/_global/share.js'),
    },

Add the assets folder

Create the app/Resources/static/themes/mytheme/ folder. In that repository should be a file named index.js which includes all JS (ES6 and below) and (S)CSS, both in respective subfolders css/ and js.
Add the templates folder

Create the src/Wallabag/CoreBundle/Resources/views/themes/mytheme/. Then it is recommended to copy everything from inside the material theme folder inside your new theme folder, and from here adapt things.
Finish

Just clear the cache, change the theme in the config panel to your new theme and start creating it. Use the npm/yarn tasks to build the assets. Don't forget to look to this page : https://doc.wallabag.org/en/developer/front_end.html