You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Aug 28, 2025. It is now read-only.
Make sure to use Merge Commits when dealing with the subtree here. For some reason Github's squash and commit uses the wrong line ending which causes issues with the subtree script: https://stackoverflow.com/a/47190256.
21
21
22
+
## Creating Custom Theme (based on core-beta)
23
+
24
+
To create a custom theme based on the core-beta one, here are the steps to follow:
25
+
26
+
1. Clone core-beta theme locally to a seperate folder
To clarify the structure of the project, the `./assets` folder contains the uncompiled source files (the ones you can modify), while the `./static` directory contains the compiled ones.
31
+
32
+
2. Install [Yarn](https://classic.yarnpkg.com/en/) following the [official installation guides](https://classic.yarnpkg.com/en/docs/install).
33
+
***Yarn** is a dependency management tool used to install and manage project packages
34
+
***[Vite](https://vite.dev/guide/)** handles the frontend tooling in CTFd by building optimized assets that are served through Flask.
35
+
36
+
4. Run `yarn install` in the root of `custom-theme` folder to install the necessary Node packages including `vite`.
37
+
38
+
5. Run the appropriate yarn build mode:
39
+
- Run `yarn dev` (this will run `vite build --watch`) while developing the theme.
40
+
- Run `yarn build` (which will run `vite build`) for a one-time build.
41
+
Vite allows you to preview changes instantly with hot reloading.
42
+
43
+
44
+
6. Now, you can start your modifications in the `assets` folder. Each time you save, Vite will automatically recompile everything (assuming you are using `yarn dev`), and you can directly see the result by importing your compiled theme into a CTFd instance.
45
+
Note: You do not need the `node_modules` folder, you can simply zip the theme directory without it.
46
+
47
+
7. When you are ready you can use `yarn build` to build the production copy of your theme.
0 commit comments