Skip to content
This repository was archived by the owner on Aug 28, 2025. It is now read-only.

Commit ab1a24b

Browse files
YoursStoColdHeat
andauthored
added the steps to create a custom theme (based on core-beta) (#110)
* Update README.md --------- Co-authored-by: Kevin Chung <[email protected]>
1 parent 56a327b commit ab1a24b

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,33 @@ git subtree pull --prefix CTFd/themes/core-beta [email protected]:CTFd/core-beta.gi
1919

2020
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.
2121

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
27+
```
28+
git clone https://github.com/CTFd/core-beta.git custom-theme
29+
```
30+
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.
48+
2249
## Todo
2350

2451
- Document how we are using Vite

0 commit comments

Comments
 (0)