diff --git a/app/javascript/retrospring/features/settings/index.ts b/app/javascript/retrospring/features/settings/index.ts
index 629d5264..ad6b214e 100644
--- a/app/javascript/retrospring/features/settings/index.ts
+++ b/app/javascript/retrospring/features/settings/index.ts
@@ -1,13 +1,9 @@
 import registerEvents from "utilities/registerEvents";
 import { profileHeaderChangeHandler, profilePictureChangeHandler } from "./crop";
-import { themeDocumentHandler, themeSubmitHandler } from "./theme";
 import { userSubmitHandler } from "./password";
 
 export default (): void => {
-  themeDocumentHandler();
-
   registerEvents([
-    { type: 'submit', target: document.querySelector('form.edit_theme, form.new_theme'), handler: themeSubmitHandler },
     { type: 'submit', target: document.querySelector('#edit_user'), handler: userSubmitHandler },
     { type: 'change', target: document.querySelector('#user_profile_picture[type=file]'), handler: profilePictureChangeHandler },
     { type: 'change', target: document.querySelector('#user_profile_header[type=file]'), handler: profileHeaderChangeHandler }
diff --git a/app/javascript/retrospring/features/settings/theme.ts b/app/javascript/retrospring/features/settings/theme.ts
deleted file mode 100644
index d2c4602b..00000000
--- a/app/javascript/retrospring/features/settings/theme.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import Coloris from "@melloware/coloris";
-
-let previewStyle = null;
-let previewTimeout = null;
-
-const previewTheme = (): void => {
-  const payload = {};
-
-  Array.from(document.querySelectorAll('#update .color')).forEach((color: HTMLInputElement) => {
-    const name = color.name.substring(6, color.name.length - 1);
-    payload[name] = parseInt(color.value.substr(1, 6), 16);
-  });
-
-  generateTheme(payload);
-}
-
-const generateTheme = (payload: Record<string, string>): void => {
-  const themeAttributeMap = {
-    'primary_color': 'primary',
-    'primary_text': 'primary-text',
-    'danger_color': 'danger',
-    'danger_text': 'danger-text',
-    'warning_color': 'warning',
-    'warning_text': 'warning-text',
-    'info_color': 'info',
-    'info_text': 'info-text',
-    'success_color': 'success',
-    'success_text': 'success-text',
-    'dark_color': 'dark',
-    'dark_text': 'dark-text',
-    'light_color': 'light',
-    'light_text': 'light-text',
-    'raised_background': 'raised-bg',
-    'raised_accent': 'raised-accent',
-    'background_color': 'background',
-    'body_text': 'body-text',
-    'input_color': 'input-bg',
-    'input_text': 'input-text',
-    'input_placeholder': 'input-placeholder',
-    'muted_text': 'muted-text'
-  };
-
-  let body = ":root {\n";
-
-  (Object.keys(payload)).forEach((payloadKey) => {
-    if (themeAttributeMap[payloadKey]) {
-      if (themeAttributeMap[payloadKey].includes('text') || themeAttributeMap[payloadKey].includes('placeholder')) {
-        const hex = getHexColorFromThemeValue(payload[payloadKey]);
-        body += `--${themeAttributeMap[payloadKey]}: ${getDecimalTripletsFromHex(hex)};\n`;
-      }
-      else {
-        body += `--${themeAttributeMap[payloadKey]}: #${getHexColorFromThemeValue(payload[payloadKey])};\n`;
-      }
-    }
-  });
-
-  body += "}";
-
-  previewStyle.innerHTML = body;
-}
-
-const getHexColorFromThemeValue = (themeValue: string): string => {
-  return ('000000' + parseInt(themeValue).toString(16)).substr(-6, 6);
-}
-
-const getDecimalTripletsFromHex = (hex: string): string => {
-  return hex.match(/.{1,2}/g).map((value) => parseInt(value, 16)).join(', ');
-}
-
-export function themeDocumentHandler(): void {
-  if (!document.querySelector('[action="/settings/theme"]')) return;
-  if (document.querySelector('#clr-picker')) return;
-
-  previewStyle = document.createElement('style');
-  previewStyle.setAttribute('data-preview-style', '');
-  document.body.appendChild(previewStyle);
-
-  Coloris.init();
-
-  Array.from(document.querySelectorAll('#update .color')).forEach((color: HTMLInputElement) => {
-    // If there already is a hex-color in the input, skip
-    if (color.value.startsWith('#')) return;
-
-    let colorValue;
-
-    // match for value="[digits]" to ALWAYS get a color value
-    // TODO: Fix this later with rethinking the entire lifecycle, or dropping Turbolinks
-    colorValue = color.outerHTML.match(/value="(\d+)"/)[1];
-
-    // matching failed, or no result was found, we just fallback to the input value
-    if (colorValue === null) {
-      colorValue = color.value;
-    }
-
-    color.value = `#${getHexColorFromThemeValue(colorValue)}`;
-
-    Coloris({
-      el: '.color',
-      wrap: false,
-      formatToggle: false,
-      alpha: false
-    });
-
-    color.addEventListener('input', () => {
-      clearTimeout(previewTimeout);
-      previewTimeout = setTimeout(previewTheme, 1000);
-    });
-  });
-}
-
-export function themeSubmitHandler(): void {
-  Array.from(document.querySelectorAll('#update .color')).forEach((color: HTMLInputElement) => {
-    color.value = String(parseInt(color.value.substr(1, 6), 16));
-  });
-}