Theming

This repo of pwgen-for-bios supports multiple themes, as seen by the default 2 themes dark and light mode.

To create a new themes you have to edit a couple files to fully support it.

Table UI Change

1. src/ui.ts | Line 12 - 16

View Code

This change is for the result table which is generated by the script. This step is important for the templates!

if ( themeMode === "light" ) {
        table.className = "table table-striped";
    } else if ( themeMode === "dark" ) {
        table.className = "table table-striped table-dark";
}

---

Create template

2. Create a new template in html/ (Name it whatever you want, below are a few examples!)

One important note to say is that a meta tag is required for the theming to work! See here

It must match with the variable themeMode in step 1.!

<!-- This little meta tag defines in which theme we want the site to show -->
<meta name="theme_mode" content="dark">

---

Add template to wepack.config.js

3. webpack.config.js

View Code

Adding a new HtmlWebpackPlugin causes webpack to include it in the bundle process later on.

new HtmlWebpackPlugin({
        inject: true,
        template: 'html/template_file_name.html',
        filename: 'output_file_name.html',
})