[feature] Add theme selector to app settings

app/javascript/flavours/glitch/containers/mastodon.jsx

@@ -19,6 +19,8 @@ import initialState, { title as siteTitle } from 'flavours/glitch/initial_state'
 import { IntlProvider } from 'flavours/glitch/locales';
 import { store } from 'flavours/glitch/store';
 
+import { ThemeComponent } from './theme_component';
+
 const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`;
 
 const hydrateAction = hydrateStore(initialState);
@@ -79,15 +81,17 @@ export default class Mastodon extends PureComponent {
     return (
       <IntlProvider>
         <ReduxProvider store={store}>
-          <ErrorBoundary>
-            <Router>
-              <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>
-                <Route path='/' component={UI} />
-              </ScrollContext>
-            </Router>
+          <ThemeComponent>
+            <ErrorBoundary>
+              <Router>
+                <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>
+                  <Route path='/' component={UI} />
+                </ScrollContext>
+              </Router>
 
-            <Helmet defaultTitle={title} titleTemplate={`%s - ${title}`} />
-          </ErrorBoundary>
+              <Helmet defaultTitle={title} titleTemplate={`%s - ${title}`} />
+            </ErrorBoundary>
+          </ThemeComponent>
         </ReduxProvider>
       </IntlProvider>
     );

app/javascript/flavours/glitch/containers/theme_component.jsx

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { useAppSelector } from 'flavours/glitch/store';
+
+const ThemeComponent = ({ children }) => {
+  const theme = useAppSelector(
+    (state) => state.getIn(['local_settings', 'theme']) ?? 'mastodon-light',
+  );
+
+  let href;
+  switch (true) {
+  case theme === 'mastodon':
+    href = '';
+    break;
+  case theme === 'mastodon-light':
+    href = '/packs/css/skins/glitch/mastodon-light/common.css';
+    break;
+  case theme === 'contrast':
+    href = '/packs/css/skins/glitch/contrast/common.css';
+    break;
+  }
+
+  return (
+    <>
+      {href !== '' ? <link rel='stylesheet' media='all' href={href} /> : null}
+      {children}
+    </>
+  );
+};
+
+ThemeComponent.propTypes = {
+  children: PropTypes.node,
+};
+
+export { ThemeComponent };