mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-03 08:28:31 +00:00
f506b512b4
* Configure the project to allow the use of JSX in .jsx files. * Add linting for JSX. * Rewrite most existing code that uses `createElement` to use JSX syntax. * Stop importing `createElement as e`. That's what the minifier is for. And we don't have to write it manually so much now because of JSX syntax.
84 lines
No EOL
2.1 KiB
JavaScript
84 lines
No EOL
2.1 KiB
JavaScript
'use strict';
|
|
|
|
// ============================================================================
|
|
// Menu Module
|
|
// ============================================================================
|
|
|
|
import Module from 'utilities/module';
|
|
import {createElement} from 'utilities/dom';
|
|
|
|
import THEME_CSS_URL from 'site/styles/theme.scss';
|
|
|
|
|
|
export default class ThemeEngine extends Module {
|
|
constructor(...args) {
|
|
super(...args);
|
|
this.inject('site');
|
|
this.inject('settings');
|
|
|
|
this.should_enable = true;
|
|
|
|
this.settings.add('theme.dark', {
|
|
requires: ['context.ui.theme'],
|
|
default: false,
|
|
process(ctx, val) {
|
|
return ctx.get('context.ui.theme') === 1 ? val : false
|
|
},
|
|
|
|
ui: {
|
|
path: 'Appearance @{"description": "Personalize the appearance of Twitch. Change the color scheme and fonts and tune the layout to optimize your experience."} > Theme >> General',
|
|
title: 'Gray (no Purple)',
|
|
description: '<em>Requires Dark Theme to be Enabled.</em><br>I see my website and I want it painted black...<br>This is a very early feature and will change as there is time.',
|
|
component: 'setting-check-box'
|
|
},
|
|
|
|
changed: val => this.updateSetting(val)
|
|
});
|
|
|
|
this.settings.add('theme.is-dark', {
|
|
requires: ['context.ui.theme'],
|
|
process(ctx) {
|
|
return ctx.get('context.ui.theme') === 1;
|
|
},
|
|
changed: val => document.body.classList.toggle('tw-theme--dark', val)
|
|
});
|
|
|
|
this.settings.add('theme.tooltips-dark', {
|
|
requires: ['theme.is-dark'],
|
|
process(ctx) {
|
|
return ! ctx.get('theme.is-dark')
|
|
}
|
|
});
|
|
|
|
this._style = null;
|
|
}
|
|
|
|
toggleStyle(enable) {
|
|
if ( ! this._style ) {
|
|
if ( ! enable )
|
|
return;
|
|
|
|
this._style = createElement('link', {
|
|
rel: 'stylesheet',
|
|
type: 'text/css',
|
|
href: THEME_CSS_URL
|
|
});
|
|
|
|
} else if ( ! enable ) {
|
|
this._style.remove();
|
|
return;
|
|
}
|
|
|
|
document.head.appendChild(this._style);
|
|
}
|
|
|
|
updateSetting(enable) {
|
|
this.toggleStyle(enable);
|
|
document.body.classList.toggle('tw-theme--ffz', enable);
|
|
}
|
|
|
|
onEnable() {
|
|
this.updateSetting(this.settings.get('theme.dark'));
|
|
document.body.classList.toggle('tw-theme--dark', this.settings.get('theme.is-dark'));
|
|
}
|
|
} |