Allow switching theme, fixes #5

app/gabsocial/actions/theme.js

@@ -0,0 +1,7 @@
+export const SET_THEME = 'SET_THEME';
+
+export function setTheme(theme) {
+  return (dispatch, getState) => {
+    dispatch({ type: SET_THEME, theme });
+  };
+}

app/gabsocial/containers/gabsocial.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { Provider, connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { Helmet } from'react-helmet';
 import configureStore from '../store/configureStore';
 import { INTRODUCTION_VERSION } from '../actions/onboarding';
 import { Switch, BrowserRouter, Route } from 'react-router-dom';
@@ -40,6 +41,7 @@ const mapStateToProps = (state) => {
   return {
     showIntroduction,
     me,
+    theme: state.getIn(['settings', 'theme']),
   };
 };
 
@@ -49,10 +51,11 @@ class GabSocialMount extends React.PureComponent {
   static propTypes = {
     showIntroduction: PropTypes.bool,
     me: PropTypes.string,
+    theme: PropTypes.string,
   };
 
   render() {
-    const { me } = this.props;
+    const { me, theme } = this.props;
     if (me === null) return null;
 
     // Disabling introduction for launch
@@ -63,6 +66,10 @@ class GabSocialMount extends React.PureComponent {
     // }
 
     return (
+      <>
+        <Helmet>
+          {theme && <link rel='stylesheet' href={`/packs/css/${theme}.chunk.css`} />}
+        </Helmet>
         <BrowserRouter basename='/web'>
           <ScrollContext>
             <Switch>
@@ -71,6 +78,7 @@ class GabSocialMount extends React.PureComponent {
             </Switch>
           </ScrollContext>
         </BrowserRouter>
+      </>
     );
   }
 

app/gabsocial/reducers/settings.js

@@ -3,6 +3,7 @@ import { NOTIFICATIONS_FILTER_SET } from '../actions/notifications';
 import { STORE_HYDRATE } from '../actions/store';
 import { EMOJI_USE } from '../actions/emojis';
 import { LIST_DELETE_SUCCESS, LIST_FETCH_FAIL } from '../actions/lists';
+import { SET_THEME } from '../actions/theme';
 import { Map as ImmutableMap, fromJS } from 'immutable';
 import uuid from '../uuid';
 
@@ -83,6 +84,8 @@ const initialState = ImmutableMap({
   trends: ImmutableMap({
     show: true,
   }),
+
+  theme: 'lime',
 });
 
 const defaultColumns = fromJS([
@@ -114,6 +117,8 @@ export default function settings(state = initialState, action) {
     return action.error.response.status === 404 ? filterDeadListColumns(state, action.id) : state;
   case LIST_DELETE_SUCCESS:
     return filterDeadListColumns(state, action.id);
+  case SET_THEME:
+    return state.set('theme', action.theme);
   default:
     return state;
   }

package.json

@@ -88,6 +88,7 @@
     "rails-ujs": "^5.2.3",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "react-helmet": "^6.0.0",
     "react-hotkeys": "^1.1.4",
     "react-immutable-proptypes": "^2.1.0",
     "react-immutable-pure-component": "^1.1.1",

yarn.lock

@@ -8472,6 +8472,21 @@ react-event-listener@^0.6.0:
     prop-types "^15.6.0"
     warning "^4.0.1"
 
+react-fast-compare@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
+react-helmet@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.0.0.tgz#fcb93ebaca3ba562a686eb2f1f9d46093d83b5f8"
+  integrity sha512-My6S4sa0uHN/IuVUn0HFmasW5xj9clTkB9qmMngscVycQ5vVG51Qp44BEvLJ4lixupTwDlU9qX1/sCrMN4AEPg==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^2.0.4"
+    react-side-effect "^2.1.0"
+
 react-hotkeys@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-1.1.4.tgz#a0712aa2e0c03a759fd7885808598497a4dace72"
@@ -8643,6 +8658,11 @@ react-select@^2.4.4:
     react-input-autosize "^2.2.1"
     react-transition-group "^2.2.1"
 
+react-side-effect@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3"
+  integrity sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==
+
 react-sparklines@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/react-sparklines/-/react-sparklines-1.7.0.tgz#9b1d97e8c8610095eeb2ad658d2e1fcf91f91a60"