From 1f94513e1cd01a313ad473e2a636b2fc3e0a9a68 Mon Sep 17 00:00:00 2001
From: tycrek <josh.moore@jmoore.dev>
Date: Mon, 18 Apr 2022 11:24:59 -0600
Subject: [PATCH] Added theme system

---
 tailwind.config.js | 56 +++++++++++++++++++++++++++++++++++-----------
 tailwind.css       |  2 +-
 views/view.pug     |  6 ++---
 3 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index bc59370..1afa099 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,38 @@
-const primary = '#FD842D';
-const primaryDim = '#B64D02';
+const fs = require('fs-extra');
+const path = require('path');
+const themePath = path.join(process.cwd(), 'share', 'theme.json');
+
+/**
+ * ! IMPORTANT !
+ * Do NOT edit this file directly!
+ * 
+ * Instead, edit the `theme.js` file in the `share` directory.
+ * For more info, please see the README: https://github.com/tycrek/ass/#customizing-the-viewer
+ */
+const defaults = {
+	// Font
+	font: '"Josefin Sans"',
+
+	// Background colours
+	bgPage: '#212121',
+	bgViewer: '#151515',
+
+	// Text colours
+	txtPrimary: '#FD842D',
+	txtSecondary: '#BDBDBD',
+
+	// Links
+	linkHover: '#FD710D',
+	linkActive: '#DE5E02',
+
+	// Other
+	borderHover: '#B64D02',
+};
+
+let theme = {};
+if (fs.existsSync(themePath))
+	theme = fs.readJsonSync(themePath);
+
 module.exports = {
 	separator: '_',
 	darkMode: 'class',
@@ -10,23 +43,20 @@ module.exports = {
 	theme: {
 		extend: {
 			fontFamily: {
-				main: ['"Josefin Sans"', 'ui-sans-serif', 'system-ui', 'sans-serif']
+				main: [theme.font || defaults.font, 'ui-sans-serif', 'system-ui', 'sans-serif']
 			},
 			backgroundColor: {
-				'primary': primary,
-				'body': '#212121',
+				'page': theme.bgPage || defaults.bgPage,
+				'viewer': theme.bgViewer || defaults.bgViewer,
 			},
 			colors: {
-				'content-bg': '#151515',
-				'primary': primary,
-				'primary-dim': primaryDim,
-				'primary-dark': '#793301',
-				'link-hover': '#FD710D',
-				'link-active': '#DE5E02',
-				'text-primary': '#BDBDBD',
+				'primary': theme.txtPrimary || defaults.txtPrimary,
+				'secondary': theme.txtSecondary || defaults.txtSecondary,
+				'link-hover': theme.linkHover || defaults.linkHover,
+				'link-active': theme.linkActive || defaults.linkActive,
 			},
 			borderColor: {
-				'primary-dim': primaryDim
+				'hover': theme.borderHover || defaults.borderHover
 			},
 			maxHeight: {
 				'half-port': '50vh'
diff --git a/tailwind.css b/tailwind.css
index 038f758..8098b96 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -17,7 +17,7 @@
 	
 		/* hover */
 		hover_text-link-hover
-		hover_border-primary-dim
+		hover_border-hover
 
 		/* active */
 		active_text-link-active
diff --git a/views/view.pug b/views/view.pug
index 2e493ae..2ef16ed 100644
--- a/views/view.pug
+++ b/views/view.pug
@@ -21,10 +21,10 @@ html
 				* { display: none !important; }
 			meta(http-equiv='refresh' content=`0; url='${resourceAttr.src}'`)
 
-	body.font-main.text-text-primary.bg-body
+	body.font-main.text-secondary.bg-page
 		.w-full.h-full.flex.justify-center.items-center.text-center
-			.bg-content-bg.rounded-24
-				h4.mt-6.mb-4.text-3xl.font-main!=title
+			.bg-viewer.rounded-24
+				h4.mx-4.mt-6.mb-4.text-3xl.font-main!=title
 				figure.block.mx-10.my-4.flex.flex-col.align-items-center
 					if fileIs.video
 						video.res-media(controls loop muted playsinline preload='metadata')&attributes(resourceAttr)