-
Notifications
You must be signed in to change notification settings - Fork 0
Theming
This applies only to exporting HTML, as all other types don't have as many visual aspects.
Installing the HTML themes is quite simple. Simply download the theme, move the theme into the /themes/ folder, such that it looks like this /themes/Theme Name/. Then, in your .env file, set the theme name (EXPORT_HTML_THEME) to be the name of the folder. There is no need to build this code again, simply re-run the binary, it should export with the new theme :)
These themes are creating through html & css. This is build through a component based system, so if you want to majorly change the way that this outputs, you can change the 'building blocks' (or components)
To start off, you have to create a new theme. Simply create a folder under the themes directory from the index. The name of the folder is the name of the theme.
For testing your theme, you can just 'install' the theme.
Adding custom css is easy. Just add a folder called 'css' into your theme, then make a style.css file.
Because both this file & the base file will be copied into the output, there is no need to redefine all rules, only those you want to modify
The project offers you a wide array of css options to make your themeing journey easier.
TODO: add docs for each css var
For now, you can check all available vars in the base theme
To add or overwrite css properties to existing classes, just re define the class from the base theme, and add all the properties you want to overwrite
Say you want to change the very building blocks of the app. No problem, just make a folder called 'components', and copy the needed files into the components (file names can be taken from the base theme).
These files will overwrite the base components when building, so you want to include everything. In these components, you can see that it uses the same var syntax, which is {{%VAR_NAME}}. So far, the only vars available to that component is the vars needed for the base theme. If there is a demand for other vars, please make an issue!
You created a custom component, that uses a custom image. Great! Add an assets folder into your theme root, and place that image into the asset directory. This image will be copied into the output dir/assets. You can link to it from your component through ./assets/filename.ext
Discord Chat Exporter or the developers behind it are not liable for any damage done, including but not limited to discord account bans, the destruction of relations, or god's wrath.