diff --git a/bin/build-sass.js b/bin/build-sass.js index 1c38da2b..721c2ab9 100755 --- a/bin/build-sass.js +++ b/bin/build-sass.js @@ -10,6 +10,7 @@ const pify = require('pify') const writeFile = pify(fs.writeFile.bind(fs)) const readdir = pify(fs.readdir.bind(fs)) const render = pify(sass.render.bind(sass)) +const now = require('performance-now') const globalScss = path.join(__dirname, '../scss/global.scss') const defaultThemeScss = path.join(__dirname, '../scss/themes/_default.scss') @@ -19,9 +20,15 @@ const themesScssDir = path.join(__dirname, '../scss/themes') const assetsDir = path.join(__dirname, '../assets') function doWatch() { + var start = now() chokidar.watch(scssDir).on('change', debounce(() => { - compileGlobalSass() - compileThemesSass() + console.log('Recompiling SCSS...') + Promise.all([ + compileGlobalSass(), + compileThemesSass() + ]).then(() => { + console.log('Recompiled SCSS in ' + (now() - start) + 'ms') + }) }, 500)) chokidar.watch() } @@ -41,7 +48,8 @@ async function compileThemesSass() { let files = (await readdir(themesScssDir)).filter(file => !path.basename(file).startsWith('_')) await Promise.all(files.map(async file => { let res = await render({file: path.join(themesScssDir, file)}) - await writeFile(path.join(assetsDir, path.basename(file).replace(/\.scss$/, '.css')), res.css, 'utf8') + let outputFilename = 'theme-' + path.basename(file).replace(/\.scss$/, '.css') + await writeFile(path.join(assetsDir, outputFilename), res.css, 'utf8') })) } diff --git a/package-lock.json b/package-lock.json index 0bfd6dcd..d4c57a50 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1803,6 +1803,11 @@ "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.1.tgz", "integrity": "sha1-0eJkOzipTXWDtHkGDmxK/8lAcfg=" }, + "fg-loadcss": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/fg-loadcss/-/fg-loadcss-2.0.1.tgz", + "integrity": "sha512-gFtSJjMMt9it0OhXz4wJQT46/LFUrJ2Db6U/fLtwClBEMEEjmVPSWSYrbGCyFwy47Cd4ULOpR+HSWXVkUKciaQ==" + }, "filename-regex": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz", @@ -4806,6 +4811,11 @@ "sha.js": "2.4.9" } }, + "performance-now": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", + "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" + }, "pify": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", diff --git a/package.json b/package.json index dc1e8a7a..9e9307bd 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "css-loader": "^0.28.7", "express": "^4.16.2", "extract-text-webpack-plugin": "^3.0.2", + "fg-loadcss": "^2.0.1", "font-awesome-svg-png": "^1.2.2", "glob": "^7.1.2", "idb": "^2.0.4", @@ -27,6 +28,7 @@ "node-fetch": "^1.7.3", "node-sass": "^4.7.2", "npm-run-all": "^4.1.2", + "performance-now": "^2.1.0", "pify": "^3.0.0", "sapper": "^0.3.1", "serve-static": "^1.13.1", diff --git a/routes/_utils/themeEngine.js b/routes/_utils/themeEngine.js new file mode 100644 index 00000000..6d0b2be3 --- /dev/null +++ b/routes/_utils/themeEngine.js @@ -0,0 +1,15 @@ +import { loadCSS } from 'fg-loadcss'; + +export function switchToTheme(themeName) { + let CL = document.body.classList + for (let i = 0; i < CL.length; i++) { + let clazz = CL.item(i) + if (clazz.startsWith('theme-')) { + CL.remove(clazz) + } + } + if (themeName !== 'default') { + CL.add(`theme-${themeName}`) + loadCSS(`/theme-${themeName}.css`) + } +} \ No newline at end of file diff --git a/routes/settings/instances/[instanceName].html b/routes/settings/instances/[instanceName].html index ddfe80d2..d6f918b3 100644 --- a/routes/settings/instances/[instanceName].html +++ b/routes/settings/instances/[instanceName].html @@ -7,23 +7,30 @@