feat: Configurable primary color

.env.example

@@ -30,6 +30,7 @@ BACKUP_LOCATION=
 BACKUP_NAME=
 
 MUSARE_SITENAME=Musare
+MUSARE_PRIMARY_COLOR="#03a9f4"
 
 MUSARE_DEBUG_VERSION=true
 MUSARE_DEBUG_GIT_REMOTE=false

.wiki/Configuration.md

@@ -50,6 +50,7 @@ machine, even though the application within the container is listening on `21017
 | `BACKUP_LOCATION` | Directory to store musare.sh backups. Defaults to `/backups` in script location. |
 | `BACKUP_NAME` | Name of musare.sh backup files. Defaults to `musare-$(date +"%Y-%m-%d-%s").dump`. |
 | `MUSARE_SITENAME` | Should be the name of the site. [^1] |
+| `MUSARE_PRIMARY_COLOR` | Primary color of the application. [^1] |
 | `MUSARE_DEBUG_VERSION` | Log/expose the current package.json version. [^1] |
 | `MUSARE_DEBUG_GIT_REMOTE` | Log/expose the current Git repository's remote. [^1] |
 | `MUSARE_DEBUG_GIT_REMOTE_URL` | Log/expose the current Git repository's remote URL. [^1] |
@@ -139,6 +140,7 @@ For more information on configuration files please refer to the
 | `siteSettings.christmas` | Whether to enable christmas theme. |
 | `footerLinks` | Add custom links to footer by specifying `"title": "url"`, e.g. `"GitHub": "https://github.com/Musare/Musare"`. You can disable about, team and news links (but not the pages themselves) by setting them to false, e.g. `"about": false`. |
 | `shortcutOverrides` | Overwrite keyboard shortcuts, for example `"editSong.useAllDiscogs": { "keyCode": 68, "ctrl": true, "alt": true, "shift": false, "preventDefault": true }`. |
+| `primaryColor` | Primary color of the application. |
 | `registrationDisabled` | If set to `true`, users can't register accounts. |
 | `sendDataRequestEmails` | If `true` all admin users will be sent an email if a data request is received. Requires mail to be enabled and configured. |
 | `skipConfigVersionCheck` | Skips checking if the config version is outdated or not. Should almost always be set to false. |

backend/config/custom-environment-variables.json

@@ -1,5 +1,6 @@
 {
 	"sitename": "MUSARE_SITENAME",
+	"primaryColor": "MUSARE_PRIMARY_COLOR",
 	"redis": {
 		"password": "REDIS_PASSWORD"
 	},

backend/config/default.json

@@ -103,6 +103,7 @@
 		"news": true,
 		"GitHub": "https://github.com/Musare/Musare"
 	},
+	"primaryColor": "#03a9f4",
 	"shortcutOverrides": {},
 	"registrationDisabled": false,
 	"sendDataRequestEmails": true,

backend/logic/ws.js

@@ -579,6 +579,7 @@ class _WSModule extends CoreClass {
 					messages: config.get("messages"),
 					christmas: config.get("christmas"),
 					footerLinks: config.get("footerLinks"),
+					primaryColor: config.get("primaryColor"),
 					shortcutOverrides: config.get("shortcutOverrides"),
 					registrationDisabled: config.get("registrationDisabled"),
 					mailEnabled: config.get("mail.enabled"),

docker-compose.yml

@@ -12,6 +12,7 @@ services:
     environment:
       - CONTAINER_MODE=${CONTAINER_MODE:-production}
       - MUSARE_SITENAME=${MUSARE_SITENAME:-Musare}
+      - MUSARE_PRIMARY_COLOR=${MUSARE_PRIMARY_COLOR:-"#03a9f4"}
       - MUSARE_DEBUG_VERSION=${MUSARE_DEBUG_VERSION:-true}
       - MUSARE_DEBUG_GIT_REMOTE=${MUSARE_DEBUG_GIT_REMOTE:-false}
       - MUSARE_DEBUG_GIT_REMOTE_URL=${MUSARE_DEBUG_GIT_REMOTE_URL:-false}
@@ -36,6 +37,7 @@ services:
         FRONTEND_MODE: "${FRONTEND_MODE:-production}"
         FRONTEND_PROD_DEVTOOLS: "${FRONTEND_PROD_DEVTOOLS:-false}"
         MUSARE_SITENAME: "${MUSARE_SITENAME:-Musare}"
+        MUSARE_PRIMARY_COLOR: "${MUSARE_PRIMARY_COLOR:-#03a9f4}"
         MUSARE_DEBUG_VERSION: "${MUSARE_DEBUG_VERSION:-true}"
         MUSARE_DEBUG_GIT_REMOTE: "${MUSARE_DEBUG_GIT_REMOTE:-false}"
         MUSARE_DEBUG_GIT_REMOTE_URL: "${MUSARE_DEBUG_GIT_REMOTE_URL:-false}"
@@ -54,6 +56,7 @@ services:
       - FRONTEND_DEV_PORT=${FRONTEND_DEV_PORT:-81}
       - FRONTEND_PROD_DEVTOOLS=${FRONTEND_PROD_DEVTOOLS:-false}
       - MUSARE_SITENAME=${MUSARE_SITENAME:-Musare}
+      - MUSARE_PRIMARY_COLOR=${MUSARE_PRIMARY_COLOR:-"#03a9f4"}
       - MUSARE_DEBUG_VERSION=${MUSARE_DEBUG_VERSION:-true}
       - MUSARE_DEBUG_GIT_REMOTE=${MUSARE_DEBUG_GIT_REMOTE:-false}
       - MUSARE_DEBUG_GIT_REMOTE_URL=${MUSARE_DEBUG_GIT_REMOTE_URL:-false}

frontend/Dockerfile

@@ -12,6 +12,7 @@ FROM node:18 AS musare_frontend
 ARG FRONTEND_MODE=production
 ARG FRONTEND_PROD_DEVTOOLS=false
 ARG MUSARE_SITENAME=Musare
+ARG MUSARE_PRIMARY_COLOR="#03a9f4"
 ARG MUSARE_DEBUG_VERSION=true
 ARG MUSARE_DEBUG_GIT_REMOTE=false
 ARG MUSARE_DEBUG_GIT_REMOTE_URL=false
@@ -22,6 +23,7 @@ ARG MUSARE_DEBUG_GIT_LATEST_COMMIT_SHORT=true
 ENV FRONTEND_MODE=${FRONTEND_MODE} \
     FRONTEND_PROD_DEVTOOLS=${FRONTEND_PROD_DEVTOOLS} \
     MUSARE_SITENAME=${MUSARE_SITENAME} \
+    MUSARE_PRIMARY_COLOR=${MUSARE_PRIMARY_COLOR} \
     MUSARE_DEBUG_VERSION=${MUSARE_DEBUG_VERSION} \
     MUSARE_DEBUG_GIT_REMOTE=${MUSARE_DEBUG_GIT_REMOTE} \
     MUSARE_DEBUG_GIT_REMOTE_URL=${MUSARE_DEBUG_GIT_REMOTE_URL} \

frontend/src/App.vue

@@ -105,6 +105,10 @@ watch(christmas, enabled => {
 });
 
 onMounted(async () => {
+	document.getElementsByTagName(
+		"html"
+	)[0].style.cssText = `--primary-color: ${configStore.primaryColor}`;
+
 	window
 		.matchMedia("(prefers-color-scheme: dark)")
 		.addEventListener("change", e => {
@@ -122,6 +126,10 @@ onMounted(async () => {
 	socket.onConnect(() => {
 		socketConnected.value = true;
 
+		document.getElementsByTagName(
+			"html"
+		)[0].style.cssText = `--primary-color: ${configStore.primaryColor}`;
+
 		if (!loggedIn.value) {
 			broadcastChannel.value.user_login = new BroadcastChannel(
 				`${configStore.cookie}.user_login`

frontend/src/pages/Station/index.vue

@@ -54,7 +54,8 @@ const router = useRouter();
 
 const { socket } = useWebsocketsStore();
 const configStore = useConfigStore();
-const { experimental, sitename, christmas } = storeToRefs(configStore);
+const { experimental, primaryColor, sitename, christmas } =
+	storeToRefs(configStore);
 const stationStore = useStationStore();
 const userAuthStore = useUserAuthStore();
 const userPreferencesStore = useUserPreferencesStore();
@@ -1885,7 +1886,9 @@ onMounted(async () => {
 });
 
 onBeforeUnmount(() => {
-	document.getElementsByTagName("html")[0].style.cssText = "";
+	document.getElementsByTagName(
+		"html"
+	)[0].style.cssText = `--primary-color: ${primaryColor.value}`;
 
 	if (experimental.value.media_session) {
 		ms.removeListeners(0);

frontend/src/stores/config.ts

@@ -12,6 +12,7 @@ export const useConfigStore = defineStore("config", {
 		messages: Record<string, string>;
 		christmas: boolean;
 		footerLinks: Record<string, string | boolean>;
+		primaryColor: string;
 		shortcutOverrides: Record<string, any>;
 		registrationDisabled: boolean;
 		mailEnabled: boolean;
@@ -38,6 +39,7 @@ export const useConfigStore = defineStore("config", {
 		},
 		christmas: false,
 		footerLinks: {},
+		primaryColor: MUSARE_PRIMARY_COLOR,
 		shortcutOverrides: {},
 		registrationDisabled: false,
 		mailEnabled: true,

frontend/src/types/vite-env.d.ts

@@ -1 +1,2 @@
 declare const MUSARE_SITENAME: string;
+declare const MUSARE_PRIMARY_COLOR: string;

frontend/vite.config.js

@@ -164,6 +164,9 @@ export default {
 		MUSARE_SITENAME: JSON.stringify(
 			process.env.MUSARE_SITENAME ?? "Musare"
 		),
+		MUSARE_PRIMARY_COLOR: JSON.stringify(
+			process.env.MUSARE_PRIMARY_COLOR ?? "#03a9f4"
+		),
 		MUSARE_VERSION: JSON.stringify(debug.version),
 		MUSARE_GIT_REMOTE: JSON.stringify(debug.git.remote),
 		MUSARE_GIT_REMOTE_URL: JSON.stringify(debug.git.remoteUrl),