Get a basic gray theme set up.

src/sites/twitch-twilight/modules/theme/index.js

@@ -7,7 +7,7 @@
 import Module from 'utilities/module';
 import {createElement as e} from 'utilities/dom';
 
-import THEME_CSS_URL from 'styles/theme.scss';
+import THEME_CSS_URL from 'site/styles/theme.scss';
 
 
 export default class ThemeEngine extends Module {
@@ -18,24 +18,22 @@ export default class ThemeEngine extends Module {
 
 		this.should_enable = true;
 
-		/*this.settings.add('theme.dark', {
+		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_tokens: [
+				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)',
-						title: 'Appearance',
+				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.',
-						description: 'Personalize the appearance of Twitch. Change the color scheme and fonts and tune the layout to optimize your experience.'
-					},
-					'Theme',
-					{key: 'tabs', page: true},
-					{title: 'General', tab: true}
-				],
-
-				title: 'Dark Mode',
 				component: 'setting-check-box'
-			}
+			},
-		});*/
+
+			changed: val => this.updateSetting(val)
+		});
 
 		this.settings.add('theme.is-dark', {
 			requires: ['context.ui.theme'],
@@ -47,29 +45,34 @@ export default class ThemeEngine extends Module {
 		this._style = null;
 	}
 
-	onLoad() {
+	toggleStyle(enable) {
-		this._style = e('link', {
+		if ( ! this._style ) {
-			rel: 'stylesheet',
+			if ( ! enable )
-			type: 'text/css',
+				return;
-			href: THEME_CSS_URL
+
-		});
+			this._style = e('link', {
+				rel: 'stylesheet',
+				type: 'text/css',
+				href: THEME_CSS_URL
+			});
+
+		} else if ( ! enable ) {
+			if ( this._style.parentElement === document.head )
+				document.head.removeChild(this._style);
+			return;
+
+		}
 
 		document.head.appendChild(this._style);
 	}
 
-	onUnload() {
+	updateSetting(enable) {
-		document.head.removeChild(this._style);
+		console.log('update-setting', enable);
-		this._style = null;
+		this.toggleStyle(enable);
+		document.body.classList.toggle('theme--ffz', enable);
 	}
 
-	/*onEnable() {
+	onEnable() {
-		//document.querySelector('[data-reactroot]').classList.add('theme--ffz');
+		this.updateSetting(this.settings.get('theme.dark'));
-
-		//this._update_dark_mode();
-		//this.settings.on(':changed:theme.dark', this._update_dark_mode, this);
 	}
-
-	_update_dark_mode() {
-		document.querySelector('[data-reactroot]').classList.toggle('theme--dark', this.settings.get('theme.dark'));
-	}*/
 }