[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>
+          <ThemeComponent>
-            <Router>
+            <ErrorBoundary>
-              <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>
+              <Router>
-                <Route path='/' component={UI} />
+                <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>
-              </ScrollContext>
+                  <Route path='/' component={UI} />
-            </Router>
+                </ScrollContext>
+              </Router>
 
-            <Helmet defaultTitle={title} titleTemplate={`%s - ${title}`} />
+              <Helmet defaultTitle={title} titleTemplate={`%s - ${title}`} />
-          </ErrorBoundary>
+            </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 };

app/javascript/flavours/glitch/features/local_settings/page/index.jsx

@@ -52,6 +52,19 @@ class LocalSettingsPage extends PureComponent {
     ({ intl, onChange, settings }) => (
       <div className='glitch local-settings__page general'>
         <h1><FormattedMessage id='settings.general' defaultMessage='General' /></h1>
+        <LocalSettingsPageItem
+          settings={settings}
+          item={['theme']}
+          id='mastodon-settings--theme'
+          options={[
+            { value: 'mastodon-light', message: 'Light' },
+            { value: 'mastodon', message: 'Dark' },
+            { value: 'contrast', message: 'High contrast' },
+          ]}
+          onChange={onChange}
+        >
+          <FormattedMessage id='settings.theme' defaultMessage='Theme' />
+        </LocalSettingsPageItem>
         <LocalSettingsPageItem
           settings={settings}
           item={['show_reply_count']}

app/javascript/flavours/glitch/reducers/local_settings.js

@@ -62,6 +62,7 @@ const initialState = ImmutableMap({
     media:      true,
     visibility: true,
   }),
+  theme: 'mastodon-light',
 });
 
 const hydrate = (state, localSettings) => state.mergeDeep(localSettings);