ass/tailwind.config.js

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.json` 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',
	plugins: [
		//require('tailwindcss-textshadow')
	],
	content: ['./views/**/*.pug'],
	theme: {
		extend: {
			fontFamily: {
				main: [theme.font || defaults.font, 'ui-sans-serif', 'system-ui', 'sans-serif']
			},
			backgroundColor: {
				'page': theme.bgPage || defaults.bgPage,
				'viewer': theme.bgViewer || defaults.bgViewer,
			},
			colors: {
				'primary': theme.txtPrimary || defaults.txtPrimary,
				'secondary': theme.txtSecondary || defaults.txtSecondary,
				'link-hover': theme.linkHover || defaults.linkHover,
				'link-active': theme.linkActive || defaults.linkActive,
			},
			borderColor: {
				'hover': theme.borderHover || defaults.borderHover
			},
			maxHeight: {
				'half-port': '50vh'
			},
			borderRadius: {
				'24': '24px'
			},
			fontSize: {
				'footer': '0.9rem'
			}
		}
	}
};