Theming 101

This commit is contained in:
Astra 2025-05-15 16:20:16 +09:00
parent ec73af5618
commit fc8d61e1ef
Signed by: astra
SSH key fingerprint: SHA256:jQDNS75/33T59Ey4yAzrUPP/5YQaXEetsW8hwUae+ag
6 changed files with 385 additions and 373 deletions

View file

@ -5,20 +5,20 @@ import { Config } from './config';
// Replaces app.css with the contents of the file specified in the
// config file.
export const themePlugin = (): Plugin => {
const themeFile = Config.THEME;
console.log(`Using theme file: ${themeFile}`);
const themeFolder = Config.THEME;
console.log(`Using theme folder: ${themeFolder}`);
return {
name: 'theme-generator',
transform(code, id) {
if (id.endsWith('app.css')) {
const colorsCode = Deno.readTextFileSync(Deno.cwd() + '/src/themes/colors.css');
const colorsCode = Deno.readTextFileSync(Deno.cwd() + '/themes/colors.css');
// Read the theme file and replace the contents of app.css with it
// Needs full path to the file
const themeCode = Deno.readTextFileSync(Deno.cwd() + '/src/themes/' + themeFile);
const themeCode = Deno.readTextFileSync(Deno.cwd() + '/themes/' + themeFolder + '/theme.css');
// Replace the contents of app.css with the theme code
// and add a comment at the top
const themeComment = `/* Generated from ${themeFile} */\n`;
const themeComment = `/* Generated from ${themeFolder} */\n`;
const themeCodeWithComment = themeComment + colorsCode + themeCode;
// Return the theme code as the new contents of app.css
return {