diff --git a/app/javascript/flavours/glitch/actions/settings.js b/app/javascript/flavours/glitch/actions/settings.js
index fbd89f9d4b..ffc5aa94d4 100644
--- a/app/javascript/flavours/glitch/actions/settings.js
+++ b/app/javascript/flavours/glitch/actions/settings.js
@@ -26,9 +26,8 @@ const debouncedSave = debounce((dispatch, getState) => {
const data = getState().get('settings').filter((_, path) => path !== 'saved').toJS();
- api().put('/api/web/settings', { data })
- .then(() => dispatch({ type: SETTING_SAVE }))
- .catch(error => dispatch(showAlertForError(error)));
+ localStorage.setItem('web_settings', JSON.stringify(data));
+ dispatch({ type: SETTING_SAVE });
}, 5000, { trailing: true });
export function saveSettings() {
diff --git a/app/javascript/flavours/glitch/containers/mastodon.jsx b/app/javascript/flavours/glitch/containers/mastodon.jsx
index c0f63b95b4..b0c973fdb2 100644
--- a/app/javascript/flavours/glitch/containers/mastodon.jsx
+++ b/app/javascript/flavours/glitch/containers/mastodon.jsx
@@ -20,6 +20,8 @@ import { IntlProvider } from 'flavours/glitch/locales';
import { store } from 'flavours/glitch/store';
import { isProduction } from 'flavours/glitch/utils/environment';
+import { ThemeComponent } from './theme_component';
+
const title = isProduction() ? siteTitle : `${siteTitle} (Dev)`;
const hydrateAction = hydrateStore(initialState);
@@ -58,15 +60,17 @@ export default class Mastodon extends PureComponent {
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
+
+
+
diff --git a/app/javascript/flavours/glitch/containers/theme_component.jsx b/app/javascript/flavours/glitch/containers/theme_component.jsx
new file mode 100644
index 0000000000..a9a2190806
--- /dev/null
+++ b/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 !== '' ? : null}
+ {children}
+ >
+ );
+};
+
+ThemeComponent.propTypes = {
+ children: PropTypes.node,
+};
+
+export { ThemeComponent };
\ No newline at end of file
diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
index 0ba3e46c64..735528d2d0 100644
--- a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
+++ b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
@@ -46,6 +46,19 @@ class LocalSettingsPage extends PureComponent {
({ intl, onChange, settings }) => (
+
+
+