Creating Your Own Theme
PreviousUnderstanding The Vartheme Starterkit ThemeNextIntegration of Varbase with Storybook 1.0 - CL Server
Last updated
10.0.x
Last updated
After building and installing the project with the template, use the using the Vartheme starterkit command.
Before that have a look at:
Utilize the command provided in the following link to automatically configure all necessary Node.js or theme processing requirements:
Please refer to the following link for a comprehensive set of instructions or an external resource to guide you through the setup process:
To generate a new theme from Vartheme BS5 using the starterkit/theme-generation script, run the following from Drupal's installation root:
Run the following Drupal Generate Theme script:
Additionally, you can create the theme's human-readable name and it description with two optional arguments:
This script will copy over all the files from the Vartheme BS5 theme, and replace instances of Vartheme BS5's machine name and label with the strings you provide.
After Installing the New Custom Theme
Uninstall Vartheme BS5 after creating a new theme
At this point the new generated theme will not need the Vartheme BS5 to be installed.
Add replaces: to all copied Varbase Components within all .component.yml files.
Follow up with the following link
The new theme should look and function identically to Vartheme BS5 out of the box, but the styles could be changed to suit the project's needs. Vartheme BS5's styles are written using Bootstrap 5, SASS, PostCSS, which is installed and configured Varbase, and allows CSS authors to write modern CSS while still supporting browsers that have not fully implemented the newest methodologies.
As part of the generate-theme command, the necessary package.json dependencies and scripts files are copied over for the project. Simply install the dependencies and then run yarn theme:init once, and then either the yarn theme:full-build command to compile the assets once or the yarn theme:watch command to re-compile the assets every time a .scss file is changed.
Recommended to use Yarn, Please do not use npm install
you may run into issue while installing
the list of packages in the package.json was optimized for better use with Yarn
Additionally, any additional external libraries from the node_modules folder can be managed by copying them to a designated target libraries folder.
It is essential to include comprehensive "install once" or "configure once" options that can be utilized by new development team members when they join the project for custom theme development or theming. This approach ensures a smooth onboarding process and facilitates seamless setup for new team members.
With webpack, project can compile may type of files and integrate with more nodejs processing tools.
Use the following alias script command to compile all SCSS, JS, or SVG icons.
In case of working on a custom SDC component, an alias script command can help with the.
Have a look at the following link for more info:
In case of working on small custom theme styling, which no need to compile components. The following alias script command can help compile in a quick way.
Use to only while working to auto compile custom theme styling
theme:watch is targeted for the theme only, but it can be customized in custom theme
Starterkit is for generating new themes that include reasonably un-opinionated templates and styles that eliminate much of the the initial work required to create a theme.
On the state of working in a team in a project, the created theme could be don by other member of the team.
When the theme get committed by git for example, the node_modules folder will not be committed. As it is listed in the .gitignore file.
After cloning a project with a Vartheme cloned generated theme.
Run the following commands to get all development tools
Issue : Moved all Bootstrap ~5.3.0 JavaScript libraries to Single Directory Components (SDC) in Varbase Components
Issue : Added Bootstrap ~5.3.0 JavaScript libraries in Varbase Components and only attache them with needed SDC components
The theme:init script alias will trigger the execution of webpack --progress --config webpack.config.init.js. This command is responsible for copying the specified files and folders from the configuration file to their respective locations.
The components:build script alias will trigger the execution of webpack --progress --config webpack.config.components.js. This command is responsible only for compiling custom SDC components in the them. The file has the list of entry, and output for compiled css/js/svg script to the right public path.
Should you encounter a bug while generating a new theme, please
Starterkit is the recommended approach for creating new themes. For more information, consult the .