Skip to content

Commit

Permalink
feat: theming (#641)
Browse files Browse the repository at this point in the history
* feat: theming script
* docs: theming
blt950 authored Oct 3, 2023
1 parent 96eb178 commit 6593503
Showing 3 changed files with 50 additions and 11 deletions.
28 changes: 18 additions & 10 deletions CONFIGURE.md
Original file line number Diff line number Diff line change
@@ -76,19 +76,27 @@ To change the logo to yours, bind your logo image files to `public/images/logos`
| APP_LOGO | vatsca.svg | The logo of your subdivision, located in `public/images/logos` |
| APP_LOGO_MAIL | vatsca-email.png | The logo of your subdivision, located in `public/images/logos` |

To change the colors of your Control Center, change the following variables and run `npm run build` in the container to rebuild.
To change the bootstrap colors to match your division, first change the environment variables and then run the following command

| Variable | Default value | Explanation |
| ------- | --- | --- |
| BOOTSTRAP_COLOR_PRIMARY | #1a475f | Primary color of your theme |
| BOOTSTRAP_COLOR_SECONDARY | #484b4c | Secondary color of your theme |
| BOOTSTRAP_COLOR_TERTIARY | #011328 | Tertiary color of your theme |
| BOOTSTRAP_COLOR_INFO | #17a2b8 | Info color of your theme |
| BOOTSTRAP_COLOR_SUCCESS | #41826e | Success color of your theme |
| BOOTSTRAP_COLOR_WARNING | #ff9800 | Warning color of your theme |
| BOOTSTRAP_COLOR_DANGER | #b63f3f | Danger color of your theme |
| BOOTSTRAP_BORDER_RADIUS | 2px | Border radius of your theme |

| VITE_THEME_PRIMARY | #1a475f | Primary color of your theme |
| VITE_THEME_SECONDARY | #484b4c | Secondary color of your theme |
| VITE_THEME_TERTIARY | #011328 | Tertiary color of your theme |
| VITE_THEME_INFO | #17a2b8 | Info color of your theme |
| VITE_THEME_SUCCESS | #41826e | Success color of your theme |
| VITE_THEME_WARNING | #ff9800 | Warning color of your theme |
| VITE_THEME_DANGER | #b63f3f | Danger color of your theme |
| VITE_THEME_BORDER_RADIUS | 2px | Border radius of your theme |

Run this command to build the theme. If you get an error like `"#5f271a" is not a color`, remove the `"` quotes from your environment variable.
```sh
docker exec -it control-center sh container/theme/build.sh
```

> **Note**
> 1. Building custom themes will increase your container size with ~200mb when completed. When you run this command, we need install dependencies inside your container to build the theme and then remove them again. This is done to keep the container size down.
> 2. You need to run this command each time you recreate the container.
### Optional: Extras

2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -50,7 +50,7 @@ To setup your Docker instance simply follow these steps:

## Updating

Updating only requires you to run migration and clear caches.
Updating only requires you to run migration and clear caches. Remember also running the theming command again if you have a custom theme.

```sh
docker exec -it --user www-data control-center php artisan migrate
31 changes: 31 additions & 0 deletions container/theme/build.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
#!/bin/bash

echo "Starting theme building process..."

# Install
apt update
apt install -y ca-certificates curl gnupg
mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

NODE_MAJOR=20
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list

apt update
apt install nodejs -y

# Build
npm ci --omit dev
npm config set cache /tmp --global
su www-data -s /usr/bin/npm run build

# Cleanup
npm cache clean --force
apt purge curl gnupg nodejs -y
apt autoremove -y
rm -r /etc/apt/sources.list.d/nodesource.list
rm -r /etc/apt/keyrings/nodesource.gpg

rm -rf /app/node_modules/

echo "Theme building process complete. Cleaned up all dependecies to save space."

0 comments on commit 6593503

Please sign in to comment.