Very basic outline of how theme editor should work

src/core/builtins/registry.ts

@@ -1,8 +1,9 @@
 export * as ErrorBoundary from './error-boundary';
+export * as ThemeEditor from './theme-editor';
 export * as Onboarding from './onboarding';
 export * as AntiTrack from './anti-track';
 export * as Protocols from './protocols';
 export * as Settings from './settings';
 export * as Badges from './badges';
 export * as Debug from './debug';
-export * as Misc from './misc';
+export * as Misc from './misc';

src/core/builtins/theme-editor/editor.tsx

@@ -0,0 +1,12 @@
+// This page should allow you to edit your theme.
+// Every time a property on the screen changes,
+// the theme updates and this means discord
+// updates to reflect these changes
+
+// This means
+// -- save the theme
+// -- update the json containing the theme on the runtime
+// -- reapply the theme
+//
+// This may cause performance issues so this should be disable-able.
+// If disabled, add an easy-to-access save button

src/core/builtins/theme-editor/index.tsx

@@ -0,0 +1,30 @@
+// This page should handle only the opening and closing of the theme editor
+// Aka the floating button
+//
+// This button should only appear when the theme editor is enabled
+// ie a theme has been selected by the user to be edited.
+//
+// NOTE: Use reanimated for fading the editor into view
+import { React, ReactNative as RN } from '@metro/common';
+import { createPatcher } from '@patcher';
+import { findByName } from '@metro';
+const Patcher = createPatcher('onboarding');
+
+export const data = {
+	id: 'modules.editor',
+	default: true
+};
+
+export function initialize() {
+	const LaunchPadContainer = findByName('LaunchPadContainer', { interop: false });
+
+	Patcher.after(LaunchPadContainer, 'default', (_, __, res) => {
+		return <>
+			{res}
+		</>;
+	});
+}
+
+export function shutdown() {
+	Patcher.unpatchAll();
+}

src/ui/settings/design/editor/create.tsx

@@ -0,0 +1,11 @@
+// Here we create a them
+// Allow the user to specify basic metadata like:
+//
+// -- name
+// -- author(s)
+// -- color scheme (light or dark)
+// etc.
+//
+// This page should create a new theme locally and then send a flux
+// event that closes the settings page and takes you to the home page
+// then opens the theme editor, just like selecting a theme from select.tsx

src/ui/settings/design/editor/index.tsx

@@ -0,0 +1,6 @@
+// Shows like, a main menu
+// Options such as
+//
+// -- Get started ~ pushes select.tsx
+// -- Open recent ~ opens a page that shows you recent themes you edited
+// -- Load from link(?) ~ allows you to install and load a theme from a link

src/ui/settings/design/editor/select.tsx

@@ -0,0 +1,9 @@
+// Here we select a theme or allow the user to create a new theme
+// If the user chooses to create a new theme, push create.tsx
+//
+// This page should send a flux event that closes the settings page
+// and takes you to the main page of discord (where channels and stuff are)
+// then opens the theme editor view
+//
+// NOTE: You can use the themes Addons page for this, just modify its appearance,
+// its props allow for this, due to the sources page using an onPress

src/ui/settings/design/themes.tsx

@@ -33,6 +33,7 @@ export const callback = ({ type, ref }) => {
 			{
 				text: Strings.UNBOUND_THEME_GET_OPTION_CREATE,
 				variant: 'tertiary',
+				// Should push editor/index.tsx
 				onPress: noop
 			},
 		]
@@ -43,4 +44,4 @@ export default {
 	page: <ThemesPage />,
 	callback,
 	icon: <TintedIcon source={Icons[Themes.icon]} />
-};
+};