diff --git a/apps/tlon-mobile/ios/Podfile.lock b/apps/tlon-mobile/ios/Podfile.lock
index afcde31336..a2f40838f4 100644
--- a/apps/tlon-mobile/ios/Podfile.lock
+++ b/apps/tlon-mobile/ios/Podfile.lock
@@ -3105,6 +3105,6 @@ SPEC CHECKSUMS:
   UMAppLoader: 7e7e0eaa7854ffd652c00a68c443afb28c3bedba
   Yoga: 1259c7a8cbaccf7b4c3ddf8ee36ca11be9dee407
 
-PODFILE CHECKSUM: 500570d1beacee20d34e48624934e3f43e61b2f6
+PODFILE CHECKSUM: dd34a8cdd9a705bb933b1a7bc6788c8909f0edcb
 
 COCOAPODS: 1.16.2
diff --git a/cosmos.imports.ts b/cosmos.imports.ts
index 4d6d9d1649..ff138b4125 100644
--- a/cosmos.imports.ts
+++ b/cosmos.imports.ts
@@ -1,92 +1,95 @@
 // This file is automatically generated by Cosmos. Add it to .gitignore and
 // only edit if you know what you're doing.
+
 import { RendererConfig, UserModuleWrappers } from 'react-cosmos-core';
 
-import * as fixture75 from './apps/tlon-mobile/src/App.fixture';
-import * as fixture78 from './apps/tlon-mobile/src/fixtures/InputToolbar.fixture';
-import * as fixture77 from './apps/tlon-mobile/src/fixtures/Onboarding.fixture';
-import * as fixture76 from './apps/tlon-mobile/src/fixtures/SetNicknameScreen.fixture';
-import * as decorator1 from './apps/tlon-mobile/src/fixtures/cosmos.decorator';
-import * as fixture74 from './packages/app/fixtures/ActionSheet/AddGalleryPostSheet.fixture';
-import * as fixture73 from './packages/app/fixtures/ActionSheet/AttachmentSheet.fixture';
-import * as fixture72 from './packages/app/fixtures/ActionSheet/CreateChannelSheet.fixture';
-import * as fixture71 from './packages/app/fixtures/ActionSheet/EditSectionNameSheet.fixture';
-import * as fixture70 from './packages/app/fixtures/ActionSheet/GenericActionSheet.fixture';
-import * as fixture69 from './packages/app/fixtures/ActionSheet/GroupJoinRequestSheet.fixture';
-import * as fixture68 from './packages/app/fixtures/ActionSheet/GroupPreviewSheet.fixture';
-import * as fixture67 from './packages/app/fixtures/ActionSheet/ProfileSheet.fixture';
-import * as fixture63 from './packages/app/fixtures/Activity.fixture';
-import * as fixture62 from './packages/app/fixtures/AddContactsView.fixture';
-import * as fixture61 from './packages/app/fixtures/AttachmentPreviewList.fixture';
-import * as fixture60 from './packages/app/fixtures/AttestationPane.fixture';
-import * as fixture59 from './packages/app/fixtures/AudioEmbed.fixture';
-import * as fixture58 from './packages/app/fixtures/AudioRecorder.fixture';
-import * as fixture57 from './packages/app/fixtures/Avatar.fixture';
-import * as fixture56 from './packages/app/fixtures/BlockSectionList.fixture';
-import * as fixture55 from './packages/app/fixtures/Button.fixture';
-import * as fixture54 from './packages/app/fixtures/ButtonV2.fixture';
-import * as fixture53 from './packages/app/fixtures/Carousel.fixture';
-import * as fixture52 from './packages/app/fixtures/Channel.fixture';
-import * as fixture51 from './packages/app/fixtures/ChannelConfigurationBar.fixture';
-import * as fixture50 from './packages/app/fixtures/ChannelDivider.fixture';
-import * as fixture49 from './packages/app/fixtures/ChannelHeader.fixture';
-import * as fixture48 from './packages/app/fixtures/ChannelListItem.fixture';
-import * as fixture47 from './packages/app/fixtures/ChatMessage.fixture';
-import * as fixture46 from './packages/app/fixtures/ChatOptionsSheet.fixture';
-import * as fixture45 from './packages/app/fixtures/ConfirmDialog.fixture';
-import * as fixture44 from './packages/app/fixtures/ContactList.fixture';
-import * as fixture43 from './packages/app/fixtures/CreateChatSheet.fixture';
-import * as fixture66 from './packages/app/fixtures/DetailView/ChatDetailView.fixture';
-import * as fixture65 from './packages/app/fixtures/DetailView/GalleryDetailView.fixture';
-import * as fixture64 from './packages/app/fixtures/DetailView/NotebookDetailView.fixture';
-import * as fixture42 from './packages/app/fixtures/DmInviteOptions.fixture';
-import * as fixture41 from './packages/app/fixtures/EditProfileScreen.fixture';
-import * as fixture40 from './packages/app/fixtures/EmbedContent.fixture';
-import * as fixture39 from './packages/app/fixtures/EmptyChannelNotice.fixture';
-import * as fixture38 from './packages/app/fixtures/FacePile.fixture';
-import * as fixture37 from './packages/app/fixtures/Form.fixture';
-import * as fixture36 from './packages/app/fixtures/ForwardChannelListItem.fixture';
-import * as fixture35 from './packages/app/fixtures/GalleryPost.fixture';
-import * as fixture34 from './packages/app/fixtures/GroupListItem.fixture';
-import * as fixture33 from './packages/app/fixtures/Input.fixture';
-import * as fixture32 from './packages/app/fixtures/InviteFriendsToTlonButton.fixture';
-import * as fixture31 from './packages/app/fixtures/InviteUsersSheet.fixture';
-import * as fixture30 from './packages/app/fixtures/MediaImageViewer.fixture';
-import * as fixture29 from './packages/app/fixtures/MessageActions.fixture';
-import * as fixture28 from './packages/app/fixtures/MessageInput.fixture';
-import * as fixture27 from './packages/app/fixtures/MetaEditorScreen.fixture';
-import * as fixture26 from './packages/app/fixtures/NotebookPost.fixture';
-import * as fixture25 from './packages/app/fixtures/Onboarding.fixture';
-import * as fixture24 from './packages/app/fixtures/ParentAgnosticKeyboardAvoidingView.fixture';
-import * as fixture23 from './packages/app/fixtures/PostErrorMessage.fixture';
-import * as fixture22 from './packages/app/fixtures/PostReference.fixture';
-import * as fixture21 from './packages/app/fixtures/PostScreen.fixture';
-import * as fixture20 from './packages/app/fixtures/Pressable.fixture';
-import * as fixture19 from './packages/app/fixtures/ProfileBlock.fixture';
-import * as fixture18 from './packages/app/fixtures/ProfileSheet.fixture';
-import * as fixture17 from './packages/app/fixtures/ProfileStatusSheet.fixture';
-import * as fixture16 from './packages/app/fixtures/ReferenceSkeleton.fixture';
-import * as fixture15 from './packages/app/fixtures/ScreenHeader.fixture';
-import * as fixture14 from './packages/app/fixtures/SearchBar.fixture';
-import * as fixture13 from './packages/app/fixtures/SplashSequence.fixture';
-import * as fixture12 from './packages/app/fixtures/StoppedNodePushSheet.fixture';
-import * as fixture11 from './packages/app/fixtures/StorageQuotaIndicator.fixture';
-import * as fixture10 from './packages/app/fixtures/SummaryCollectionView.fixture';
-import * as fixture9 from './packages/app/fixtures/SystemNotice.fixture';
-import * as fixture8 from './packages/app/fixtures/SystemNotices.fixture';
-import * as fixture7 from './packages/app/fixtures/Text.fixture';
-import * as fixture6 from './packages/app/fixtures/Toast.fixture';
-import * as fixture5 from './packages/app/fixtures/TwitterVerification.fixture';
-import * as fixture4 from './packages/app/fixtures/UserProfileScreen.fixture';
-import * as fixture3 from './packages/app/fixtures/VideoEmbed.fixture';
-import * as fixture2 from './packages/app/fixtures/ViewReactionsSheet.fixture';
-import * as fixture1 from './packages/app/fixtures/Waveform.fixture';
 import * as fixture0 from './packages/app/fixtures/WayfindingNotices.fixture';
+import * as fixture1 from './packages/app/fixtures/Waveform.fixture';
+import * as fixture2 from './packages/app/fixtures/ViewReactionsSheet.fixture';
+import * as fixture3 from './packages/app/fixtures/VideoEmbed.fixture';
+import * as fixture4 from './packages/app/fixtures/UserProfileScreen.fixture';
+import * as fixture5 from './packages/app/fixtures/TwitterVerification.fixture';
+import * as fixture6 from './packages/app/fixtures/Toast.fixture';
+import * as fixture7 from './packages/app/fixtures/Text.fixture';
+import * as fixture8 from './packages/app/fixtures/SystemNotices.fixture';
+import * as fixture9 from './packages/app/fixtures/SystemNotice.fixture';
+import * as fixture10 from './packages/app/fixtures/SummaryCollectionView.fixture';
+import * as fixture11 from './packages/app/fixtures/StorageQuotaIndicator.fixture';
+import * as fixture12 from './packages/app/fixtures/StoppedNodePushSheet.fixture';
+import * as fixture13 from './packages/app/fixtures/SplashSequence.fixture';
+import * as fixture14 from './packages/app/fixtures/SearchBar.fixture';
+import * as fixture15 from './packages/app/fixtures/ScreenHeader.fixture';
+import * as fixture16 from './packages/app/fixtures/ReferenceSkeleton.fixture';
+import * as fixture17 from './packages/app/fixtures/ProfileStatusSheet.fixture';
+import * as fixture18 from './packages/app/fixtures/ProfileSheet.fixture';
+import * as fixture19 from './packages/app/fixtures/ProfileBlock.fixture';
+import * as fixture20 from './packages/app/fixtures/Pressable.fixture';
+import * as fixture21 from './packages/app/fixtures/PostScreen.fixture';
+import * as fixture22 from './packages/app/fixtures/PostReference.fixture';
+import * as fixture23 from './packages/app/fixtures/PostErrorMessage.fixture';
+import * as fixture24 from './packages/app/fixtures/ParentAgnosticKeyboardAvoidingView.fixture';
+import * as fixture25 from './packages/app/fixtures/Onboarding.fixture';
+import * as fixture26 from './packages/app/fixtures/NotebookPost.fixture';
+import * as fixture27 from './packages/app/fixtures/MetaEditorScreen.fixture';
+import * as fixture28 from './packages/app/fixtures/MessageInput.fixture';
+import * as fixture29 from './packages/app/fixtures/MessageActions.fixture';
+import * as fixture30 from './packages/app/fixtures/MediaImageViewer.fixture';
+import * as fixture31 from './packages/app/fixtures/InviteUsersSheet.fixture';
+import * as fixture32 from './packages/app/fixtures/InviteFriendsToTlonButton.fixture';
+import * as fixture33 from './packages/app/fixtures/Input.fixture';
+import * as fixture34 from './packages/app/fixtures/GroupListItem.fixture';
+import * as fixture35 from './packages/app/fixtures/GestureMediaViewer.fixture';
+import * as fixture36 from './packages/app/fixtures/GalleryPost.fixture';
+import * as fixture37 from './packages/app/fixtures/ForwardChannelListItem.fixture';
+import * as fixture38 from './packages/app/fixtures/Form.fixture';
+import * as fixture39 from './packages/app/fixtures/FacePile.fixture';
+import * as fixture40 from './packages/app/fixtures/EmptyChannelNotice.fixture';
+import * as fixture41 from './packages/app/fixtures/EmbedContent.fixture';
+import * as fixture42 from './packages/app/fixtures/EditProfileScreen.fixture';
+import * as fixture43 from './packages/app/fixtures/DmInviteOptions.fixture';
+import * as fixture44 from './packages/app/fixtures/CreateChatSheet.fixture';
+import * as fixture45 from './packages/app/fixtures/ContactList.fixture';
+import * as fixture46 from './packages/app/fixtures/ConfirmDialog.fixture';
+import * as fixture47 from './packages/app/fixtures/ChatOptionsSheet.fixture';
+import * as fixture48 from './packages/app/fixtures/ChatMessage.fixture';
+import * as fixture49 from './packages/app/fixtures/ChannelListItem.fixture';
+import * as fixture50 from './packages/app/fixtures/ChannelHeader.fixture';
+import * as fixture51 from './packages/app/fixtures/ChannelDivider.fixture';
+import * as fixture52 from './packages/app/fixtures/ChannelConfigurationBar.fixture';
+import * as fixture53 from './packages/app/fixtures/Channel.fixture';
+import * as fixture54 from './packages/app/fixtures/Carousel.fixture';
+import * as fixture55 from './packages/app/fixtures/ButtonV2.fixture';
+import * as fixture56 from './packages/app/fixtures/Button.fixture';
+import * as fixture57 from './packages/app/fixtures/BlockSectionList.fixture';
+import * as fixture58 from './packages/app/fixtures/Avatar.fixture';
+import * as fixture59 from './packages/app/fixtures/AudioRecorder.fixture';
+import * as fixture60 from './packages/app/fixtures/AudioEmbed.fixture';
+import * as fixture61 from './packages/app/fixtures/AttestationPane.fixture';
+import * as fixture62 from './packages/app/fixtures/AttachmentPreviewList.fixture';
+import * as fixture63 from './packages/app/fixtures/AddContactsView.fixture';
+import * as fixture64 from './packages/app/fixtures/Activity.fixture';
+import * as fixture65 from './packages/app/fixtures/DetailView/NotebookDetailView.fixture';
+import * as fixture66 from './packages/app/fixtures/DetailView/GalleryDetailView.fixture';
+import * as fixture67 from './packages/app/fixtures/DetailView/ChatDetailView.fixture';
+import * as fixture68 from './packages/app/fixtures/ActionSheet/ProfileSheet.fixture';
+import * as fixture69 from './packages/app/fixtures/ActionSheet/GroupPreviewSheet.fixture';
+import * as fixture70 from './packages/app/fixtures/ActionSheet/GroupJoinRequestSheet.fixture';
+import * as fixture71 from './packages/app/fixtures/ActionSheet/GenericActionSheet.fixture';
+import * as fixture72 from './packages/app/fixtures/ActionSheet/EditSectionNameSheet.fixture';
+import * as fixture73 from './packages/app/fixtures/ActionSheet/CreateChannelSheet.fixture';
+import * as fixture74 from './packages/app/fixtures/ActionSheet/AttachmentSheet.fixture';
+import * as fixture75 from './packages/app/fixtures/ActionSheet/AddGalleryPostSheet.fixture';
+import * as fixture76 from './apps/tlon-mobile/src/App.fixture';
+import * as fixture77 from './apps/tlon-mobile/src/fixtures/SetNicknameScreen.fixture';
+import * as fixture78 from './apps/tlon-mobile/src/fixtures/Onboarding.fixture';
+import * as fixture79 from './apps/tlon-mobile/src/fixtures/InputToolbar.fixture';
+
 import * as decorator0 from './packages/app/fixtures/cosmos.decorator';
+import * as decorator1 from './apps/tlon-mobile/src/fixtures/cosmos.decorator';
 
 export const rendererConfig: RendererConfig = {
-  playgroundUrl: 'http://localhost:5001',
-  rendererUrl: null,
+  "playgroundUrl": "http://localhost:5001",
+  "rendererUrl": null
 };
 
 const fixtures = {
@@ -100,15 +103,9 @@ const fixtures = {
   'packages/app/fixtures/Text.fixture.tsx': { module: fixture7 },
   'packages/app/fixtures/SystemNotices.fixture.tsx': { module: fixture8 },
   'packages/app/fixtures/SystemNotice.fixture.tsx': { module: fixture9 },
-  'packages/app/fixtures/SummaryCollectionView.fixture.tsx': {
-    module: fixture10,
-  },
-  'packages/app/fixtures/StorageQuotaIndicator.fixture.tsx': {
-    module: fixture11,
-  },
-  'packages/app/fixtures/StoppedNodePushSheet.fixture.tsx': {
-    module: fixture12,
-  },
+  'packages/app/fixtures/SummaryCollectionView.fixture.tsx': { module: fixture10 },
+  'packages/app/fixtures/StorageQuotaIndicator.fixture.tsx': { module: fixture11 },
+  'packages/app/fixtures/StoppedNodePushSheet.fixture.tsx': { module: fixture12 },
   'packages/app/fixtures/SplashSequence.fixture.tsx': { module: fixture13 },
   'packages/app/fixtures/SearchBar.fixture.tsx': { module: fixture14 },
   'packages/app/fixtures/ScreenHeader.fixture.tsx': { module: fixture15 },
@@ -120,9 +117,7 @@ const fixtures = {
   'packages/app/fixtures/PostScreen.fixture.tsx': { module: fixture21 },
   'packages/app/fixtures/PostReference.fixture.tsx': { module: fixture22 },
   'packages/app/fixtures/PostErrorMessage.fixture.tsx': { module: fixture23 },
-  'packages/app/fixtures/ParentAgnosticKeyboardAvoidingView.fixture.tsx': {
-    module: fixture24,
-  },
+  'packages/app/fixtures/ParentAgnosticKeyboardAvoidingView.fixture.tsx': { module: fixture24 },
   'packages/app/fixtures/Onboarding.fixture.tsx': { module: fixture25 },
   'packages/app/fixtures/NotebookPost.fixture.tsx': { module: fixture26 },
   'packages/app/fixtures/MetaEditorScreen.fixture.tsx': { module: fixture27 },
@@ -130,96 +125,63 @@ const fixtures = {
   'packages/app/fixtures/MessageActions.fixture.tsx': { module: fixture29 },
   'packages/app/fixtures/MediaImageViewer.fixture.tsx': { module: fixture30 },
   'packages/app/fixtures/InviteUsersSheet.fixture.tsx': { module: fixture31 },
-  'packages/app/fixtures/InviteFriendsToTlonButton.fixture.tsx': {
-    module: fixture32,
-  },
+  'packages/app/fixtures/InviteFriendsToTlonButton.fixture.tsx': { module: fixture32 },
   'packages/app/fixtures/Input.fixture.tsx': { module: fixture33 },
   'packages/app/fixtures/GroupListItem.fixture.tsx': { module: fixture34 },
-  'packages/app/fixtures/GalleryPost.fixture.tsx': { module: fixture35 },
-  'packages/app/fixtures/ForwardChannelListItem.fixture.tsx': {
-    module: fixture36,
-  },
-  'packages/app/fixtures/Form.fixture.tsx': { module: fixture37 },
-  'packages/app/fixtures/FacePile.fixture.tsx': { module: fixture38 },
-  'packages/app/fixtures/EmptyChannelNotice.fixture.tsx': { module: fixture39 },
-  'packages/app/fixtures/EmbedContent.fixture.tsx': { module: fixture40 },
-  'packages/app/fixtures/EditProfileScreen.fixture.tsx': { module: fixture41 },
-  'packages/app/fixtures/DmInviteOptions.fixture.tsx': { module: fixture42 },
-  'packages/app/fixtures/CreateChatSheet.fixture.tsx': { module: fixture43 },
-  'packages/app/fixtures/ContactList.fixture.tsx': { module: fixture44 },
-  'packages/app/fixtures/ConfirmDialog.fixture.tsx': { module: fixture45 },
-  'packages/app/fixtures/ChatOptionsSheet.fixture.tsx': { module: fixture46 },
-  'packages/app/fixtures/ChatMessage.fixture.tsx': { module: fixture47 },
-  'packages/app/fixtures/ChannelListItem.fixture.tsx': { module: fixture48 },
-  'packages/app/fixtures/ChannelHeader.fixture.tsx': { module: fixture49 },
-  'packages/app/fixtures/ChannelDivider.fixture.tsx': { module: fixture50 },
-  'packages/app/fixtures/ChannelConfigurationBar.fixture.tsx': {
-    module: fixture51,
-  },
-  'packages/app/fixtures/Channel.fixture.tsx': { module: fixture52 },
-  'packages/app/fixtures/Carousel.fixture.tsx': { module: fixture53 },
-  'packages/app/fixtures/ButtonV2.fixture.tsx': { module: fixture54 },
-  'packages/app/fixtures/Button.fixture.tsx': { module: fixture55 },
-  'packages/app/fixtures/BlockSectionList.fixture.tsx': { module: fixture56 },
-  'packages/app/fixtures/Avatar.fixture.tsx': { module: fixture57 },
-  'packages/app/fixtures/AudioRecorder.fixture.tsx': { module: fixture58 },
-  'packages/app/fixtures/AudioEmbed.fixture.tsx': { module: fixture59 },
-  'packages/app/fixtures/AttestationPane.fixture.tsx': { module: fixture60 },
-  'packages/app/fixtures/AttachmentPreviewList.fixture.tsx': {
-    module: fixture61,
-  },
-  'packages/app/fixtures/AddContactsView.fixture.tsx': { module: fixture62 },
-  'packages/app/fixtures/Activity.fixture.tsx': { module: fixture63 },
-  'packages/app/fixtures/DetailView/NotebookDetailView.fixture.tsx': {
-    module: fixture64,
-  },
-  'packages/app/fixtures/DetailView/GalleryDetailView.fixture.tsx': {
-    module: fixture65,
-  },
-  'packages/app/fixtures/DetailView/ChatDetailView.fixture.tsx': {
-    module: fixture66,
-  },
-  'packages/app/fixtures/ActionSheet/ProfileSheet.fixture.tsx': {
-    module: fixture67,
-  },
-  'packages/app/fixtures/ActionSheet/GroupPreviewSheet.fixture.tsx': {
-    module: fixture68,
-  },
-  'packages/app/fixtures/ActionSheet/GroupJoinRequestSheet.fixture.tsx': {
-    module: fixture69,
-  },
-  'packages/app/fixtures/ActionSheet/GenericActionSheet.fixture.tsx': {
-    module: fixture70,
-  },
-  'packages/app/fixtures/ActionSheet/EditSectionNameSheet.fixture.tsx': {
-    module: fixture71,
-  },
-  'packages/app/fixtures/ActionSheet/CreateChannelSheet.fixture.tsx': {
-    module: fixture72,
-  },
-  'packages/app/fixtures/ActionSheet/AttachmentSheet.fixture.tsx': {
-    module: fixture73,
-  },
-  'packages/app/fixtures/ActionSheet/AddGalleryPostSheet.fixture.tsx': {
-    module: fixture74,
-  },
-  'apps/tlon-mobile/src/App.fixture.tsx': { module: fixture75 },
-  'apps/tlon-mobile/src/fixtures/SetNicknameScreen.fixture.tsx': {
-    module: fixture76,
-  },
-  'apps/tlon-mobile/src/fixtures/Onboarding.fixture.tsx': { module: fixture77 },
-  'apps/tlon-mobile/src/fixtures/InputToolbar.fixture.tsx': {
-    module: fixture78,
-  },
+  'packages/app/fixtures/GestureMediaViewer.fixture.tsx': { module: fixture35 },
+  'packages/app/fixtures/GalleryPost.fixture.tsx': { module: fixture36 },
+  'packages/app/fixtures/ForwardChannelListItem.fixture.tsx': { module: fixture37 },
+  'packages/app/fixtures/Form.fixture.tsx': { module: fixture38 },
+  'packages/app/fixtures/FacePile.fixture.tsx': { module: fixture39 },
+  'packages/app/fixtures/EmptyChannelNotice.fixture.tsx': { module: fixture40 },
+  'packages/app/fixtures/EmbedContent.fixture.tsx': { module: fixture41 },
+  'packages/app/fixtures/EditProfileScreen.fixture.tsx': { module: fixture42 },
+  'packages/app/fixtures/DmInviteOptions.fixture.tsx': { module: fixture43 },
+  'packages/app/fixtures/CreateChatSheet.fixture.tsx': { module: fixture44 },
+  'packages/app/fixtures/ContactList.fixture.tsx': { module: fixture45 },
+  'packages/app/fixtures/ConfirmDialog.fixture.tsx': { module: fixture46 },
+  'packages/app/fixtures/ChatOptionsSheet.fixture.tsx': { module: fixture47 },
+  'packages/app/fixtures/ChatMessage.fixture.tsx': { module: fixture48 },
+  'packages/app/fixtures/ChannelListItem.fixture.tsx': { module: fixture49 },
+  'packages/app/fixtures/ChannelHeader.fixture.tsx': { module: fixture50 },
+  'packages/app/fixtures/ChannelDivider.fixture.tsx': { module: fixture51 },
+  'packages/app/fixtures/ChannelConfigurationBar.fixture.tsx': { module: fixture52 },
+  'packages/app/fixtures/Channel.fixture.tsx': { module: fixture53 },
+  'packages/app/fixtures/Carousel.fixture.tsx': { module: fixture54 },
+  'packages/app/fixtures/ButtonV2.fixture.tsx': { module: fixture55 },
+  'packages/app/fixtures/Button.fixture.tsx': { module: fixture56 },
+  'packages/app/fixtures/BlockSectionList.fixture.tsx': { module: fixture57 },
+  'packages/app/fixtures/Avatar.fixture.tsx': { module: fixture58 },
+  'packages/app/fixtures/AudioRecorder.fixture.tsx': { module: fixture59 },
+  'packages/app/fixtures/AudioEmbed.fixture.tsx': { module: fixture60 },
+  'packages/app/fixtures/AttestationPane.fixture.tsx': { module: fixture61 },
+  'packages/app/fixtures/AttachmentPreviewList.fixture.tsx': { module: fixture62 },
+  'packages/app/fixtures/AddContactsView.fixture.tsx': { module: fixture63 },
+  'packages/app/fixtures/Activity.fixture.tsx': { module: fixture64 },
+  'packages/app/fixtures/DetailView/NotebookDetailView.fixture.tsx': { module: fixture65 },
+  'packages/app/fixtures/DetailView/GalleryDetailView.fixture.tsx': { module: fixture66 },
+  'packages/app/fixtures/DetailView/ChatDetailView.fixture.tsx': { module: fixture67 },
+  'packages/app/fixtures/ActionSheet/ProfileSheet.fixture.tsx': { module: fixture68 },
+  'packages/app/fixtures/ActionSheet/GroupPreviewSheet.fixture.tsx': { module: fixture69 },
+  'packages/app/fixtures/ActionSheet/GroupJoinRequestSheet.fixture.tsx': { module: fixture70 },
+  'packages/app/fixtures/ActionSheet/GenericActionSheet.fixture.tsx': { module: fixture71 },
+  'packages/app/fixtures/ActionSheet/EditSectionNameSheet.fixture.tsx': { module: fixture72 },
+  'packages/app/fixtures/ActionSheet/CreateChannelSheet.fixture.tsx': { module: fixture73 },
+  'packages/app/fixtures/ActionSheet/AttachmentSheet.fixture.tsx': { module: fixture74 },
+  'packages/app/fixtures/ActionSheet/AddGalleryPostSheet.fixture.tsx': { module: fixture75 },
+  'apps/tlon-mobile/src/App.fixture.tsx': { module: fixture76 },
+  'apps/tlon-mobile/src/fixtures/SetNicknameScreen.fixture.tsx': { module: fixture77 },
+  'apps/tlon-mobile/src/fixtures/Onboarding.fixture.tsx': { module: fixture78 },
+  'apps/tlon-mobile/src/fixtures/InputToolbar.fixture.tsx': { module: fixture79 }
 };
 
 const decorators = {
   'packages/app/fixtures/cosmos.decorator.tsx': { module: decorator0 },
-  'apps/tlon-mobile/src/fixtures/cosmos.decorator.tsx': { module: decorator1 },
+  'apps/tlon-mobile/src/fixtures/cosmos.decorator.tsx': { module: decorator1 }
 };
 
 export const moduleWrappers: UserModuleWrappers = {
   lazy: false,
   fixtures,
-  decorators,
+  decorators
 };
diff --git a/packages/app/features/settings/ThemeScreen.tsx b/packages/app/features/settings/ThemeScreen.tsx
index bfd4b61c77..0f3034155b 100644
--- a/packages/app/features/settings/ThemeScreen.tsx
+++ b/packages/app/features/settings/ThemeScreen.tsx
@@ -1,20 +1,31 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { useThemeSettings } from '@tloncorp/shared';
 import * as store from '@tloncorp/shared/store';
-import { useEffect, useState } from 'react';
-import { ScrollView, YStack } from 'tamagui';
+import {
+  ThemeHarmony,
+  ThemeMode,
+  builtInThemeOptions,
+  createCustomThemeDefinition,
+  customThemeSlotId,
+  getCustomThemeName,
+  getCustomThemeRuntimeName,
+} from '@tloncorp/shared/utils';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { ScrollView, Slider, XStack, YStack } from 'tamagui';
 import { useTheme } from 'tamagui';
 
 import { useIsDarkMode } from '../../hooks/useIsDarkMode';
 import { RootStackParamList } from '../../navigation/types';
 import { AppTheme } from '../../types/theme';
 import {
+  Button,
   ListItem,
   ListItemInputOption,
   LoadingSpinner,
   Pressable,
   RadioControl,
   ScreenHeader,
+  Text,
   View,
   useIsWindowNarrow,
 } from '../../ui';
@@ -22,36 +33,69 @@ import { normalizeTheme } from '../../ui/utils/themeUtils';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Theme'>;
 
+const harmonyOptions: { title: string; value: ThemeHarmony }[] = [
+  { title: 'Analogous', value: 'analogous' },
+  { title: 'Monochromatic', value: 'monochromatic' },
+  { title: 'Complementary', value: 'complementary' },
+  { title: 'Split complementary', value: 'split-complementary' },
+  { title: 'Triadic', value: 'triadic' },
+];
+
+const modeOptions: { title: string; value: ThemeMode }[] = [
+  { title: 'Dark', value: 'dark' },
+  { title: 'Light', value: 'light' },
+];
+
 export function ThemeScreen(props: Props) {
   const theme = useTheme();
   const { data: storedTheme, isLoading } = useThemeSettings();
+  const { value: localThemePreference } = store.useLocalThemePreference();
+  const { value: customThemes, setValue: setCustomThemes } =
+    store.useCustomThemes();
   const isDarkMode = useIsDarkMode();
   const [selectedTheme, setSelectedTheme] = useState<AppTheme>('auto');
   const [loadingTheme, setLoadingTheme] = useState<AppTheme | null>(null);
+  const [customThemeHue, setCustomThemeHue] = useState(210);
+  const [customThemeMode, setCustomThemeMode] = useState<ThemeMode>('dark');
+  const [customThemeHarmony, setCustomThemeHarmony] =
+    useState<ThemeHarmony>('analogous');
+  const [customThemeAccentSpread, setCustomThemeAccentSpread] = useState(72);
+  const [customThemeSaturation, setCustomThemeSaturation] = useState(66);
+  const [customThemeBrightness, setCustomThemeBrightness] = useState(82);
+  const [savingCustomTheme, setSavingCustomTheme] = useState(false);
 
-  const themes: ListItemInputOption<AppTheme>[] = [
-    {
-      title: 'Auto',
-      value: 'auto',
-      subtitle: `Uses system ${isDarkMode ? 'dark' : 'light'} theme`,
-    },
-    { title: 'Tlon Light', value: 'light' },
-    { title: 'Tlon Dark', value: 'dark' },
-    { title: 'Dracula', value: 'dracula' },
-    { title: 'Greenscreen', value: 'greenscreen' },
-    { title: 'Gruvbox', value: 'gruvbox' },
-    { title: 'Monokai', value: 'monokai' },
-    { title: 'Nord', value: 'nord' },
-    { title: 'Peony', value: 'peony' },
-    { title: 'Solarized', value: 'solarized' },
-  ];
+  const savedCustomTheme = customThemes[0];
+  const customThemeValue = savedCustomTheme
+    ? getCustomThemeRuntimeName(savedCustomTheme)
+    : getCustomThemeName(customThemeSlotId);
+
+  const customThemeNames = useMemo(
+    () => customThemes.map(getCustomThemeRuntimeName),
+    [customThemes]
+  );
+
+  const themes: ListItemInputOption<AppTheme>[] = useMemo(
+    () => [
+      {
+        title: 'Auto',
+        value: 'auto',
+        subtitle: `Uses system ${isDarkMode ? 'dark' : 'light'} theme`,
+      },
+      ...builtInThemeOptions,
+      {
+        title: 'Custom',
+        value: customThemeValue,
+      },
+    ],
+    [customThemeValue, isDarkMode]
+  );
 
   const handleThemeChange = async (value: AppTheme) => {
     if (value === selectedTheme || loadingTheme) return;
 
     setLoadingTheme(value);
     try {
-      await store.updateTheme(value);
+      await store.updateThemePreference(value);
       setSelectedTheme(value);
     } catch (err) {
       console.error('Failed to save theme preference:', err);
@@ -60,11 +104,70 @@ export function ThemeScreen(props: Props) {
     }
   };
 
+  const handleCreateCustomTheme = async () => {
+    if (savingCustomTheme) return null;
+
+    setSavingCustomTheme(true);
+    try {
+      const customTheme = createCustomThemeDefinition({
+        name: 'Custom',
+        hue: customThemeHue,
+        mode: customThemeMode,
+        harmony: customThemeHarmony,
+        width: customThemeAccentSpread,
+        saturation: customThemeSaturation,
+        brightness: customThemeBrightness,
+        createdAt: savedCustomTheme?.createdAt,
+      });
+      const runtimeName = getCustomThemeRuntimeName(customTheme);
+
+      await setCustomThemes([customTheme]);
+      await store.updateThemePreference(runtimeName);
+      setSelectedTheme(runtimeName);
+      return runtimeName;
+    } catch (err) {
+      console.error('Failed to create custom theme:', err);
+      return null;
+    } finally {
+      setSavingCustomTheme(false);
+    }
+  };
+
+  const handleCustomThemeChange = async () => {
+    if (savedCustomTheme) {
+      await handleThemeChange(customThemeValue);
+      return;
+    }
+
+    await handleCreateCustomTheme();
+  };
+
+  useEffect(() => {
+    if (!savedCustomTheme) {
+      return;
+    }
+
+    setCustomThemeHue(savedCustomTheme.params.hue);
+    setCustomThemeMode(savedCustomTheme.mode);
+    setCustomThemeHarmony(savedCustomTheme.params.harmony);
+    setCustomThemeAccentSpread(savedCustomTheme.params.width);
+    setCustomThemeSaturation(savedCustomTheme.params.saturation);
+    setCustomThemeBrightness(savedCustomTheme.params.brightness);
+  }, [savedCustomTheme]);
+
+  useEffect(() => {
+    if (customThemes.length > 1 && savedCustomTheme) {
+      setCustomThemes([savedCustomTheme]);
+    }
+  }, [customThemes.length, savedCustomTheme, setCustomThemes]);
+
   useEffect(() => {
     if (!isLoading && storedTheme !== undefined) {
-      setSelectedTheme(normalizeTheme(storedTheme));
+      setSelectedTheme(
+        normalizeTheme(localThemePreference ?? storedTheme, customThemeNames)
+      );
     }
-  }, [storedTheme, isLoading]);
+  }, [storedTheme, localThemePreference, customThemeNames, isLoading]);
 
   const isWindowNarrow = useIsWindowNarrow();
 
@@ -87,33 +190,215 @@ export function ThemeScreen(props: Props) {
       >
         <YStack flex={1} padding="$l">
           {themes.map((theme) => (
-            <Pressable
-              key={theme.value}
-              disabled={loadingTheme !== null}
-              onPress={() => handleThemeChange(theme.value)}
-              borderRadius="$xl"
-            >
-              <ListItem>
-                <ListItem.MainContent>
-                  <ListItem.Title>{theme.title}</ListItem.Title>
-                  {theme.subtitle && (
-                    <ListItem.Subtitle>{theme.subtitle}</ListItem.Subtitle>
-                  )}
-                </ListItem.MainContent>
-                <ListItem.EndContent>
-                  {loadingTheme === theme.value ? (
-                    <View padding="$m">
-                      <LoadingSpinner color="$primaryText" size="small" />
-                    </View>
-                  ) : (
-                    <RadioControl checked={theme.value === selectedTheme} />
-                  )}
-                </ListItem.EndContent>
-              </ListItem>
-            </Pressable>
+            <Fragment key={theme.value}>
+              <Pressable
+                disabled={loadingTheme !== null || savingCustomTheme}
+                onPress={() =>
+                  theme.value === customThemeValue
+                    ? handleCustomThemeChange()
+                    : handleThemeChange(theme.value)
+                }
+                borderRadius="$xl"
+              >
+                <ListItem>
+                  <ListItem.MainContent>
+                    <ListItem.Title>{theme.title}</ListItem.Title>
+                    {theme.subtitle && (
+                      <ListItem.Subtitle>{theme.subtitle}</ListItem.Subtitle>
+                    )}
+                  </ListItem.MainContent>
+                  <ListItem.EndContent>
+                    {loadingTheme === theme.value ||
+                    (theme.value === customThemeValue && savingCustomTheme) ? (
+                      <View padding="$m">
+                        <LoadingSpinner color="$primaryText" size="small" />
+                      </View>
+                    ) : (
+                      <RadioControl checked={theme.value === selectedTheme} />
+                    )}
+                  </ListItem.EndContent>
+                </ListItem>
+              </Pressable>
+              {theme.value === customThemeValue &&
+                selectedTheme === customThemeValue && (
+                  <YStack
+                    gap="$l"
+                    paddingVertical="$l"
+                    paddingHorizontal="$xl"
+                    borderRadius="$xl"
+                    backgroundColor="$secondaryBackground"
+                    marginHorizontal="$l"
+                    marginBottom="$l"
+                  >
+                    <CustomThemeSlider
+                      label="Hue"
+                      value={customThemeHue}
+                      min={0}
+                      max={359}
+                      onValueChange={setCustomThemeHue}
+                    />
+                    <CustomThemeOptionGroup<ThemeHarmony>
+                      label="Harmony"
+                      options={harmonyOptions}
+                      value={customThemeHarmony}
+                      onChange={setCustomThemeHarmony}
+                      presentation="scroll"
+                    />
+                    <CustomThemeSlider
+                      label="Accent spread"
+                      value={customThemeAccentSpread}
+                      min={0}
+                      max={100}
+                      onValueChange={setCustomThemeAccentSpread}
+                    />
+                    <CustomThemeSlider
+                      label="Saturation"
+                      value={customThemeSaturation}
+                      min={0}
+                      max={100}
+                      onValueChange={setCustomThemeSaturation}
+                    />
+                    <CustomThemeSlider
+                      label="Brightness"
+                      value={customThemeBrightness}
+                      min={0}
+                      max={100}
+                      onValueChange={setCustomThemeBrightness}
+                    />
+                    <CustomThemeOptionGroup<ThemeMode>
+                      label="Appearance"
+                      options={modeOptions}
+                      value={customThemeMode}
+                      onChange={setCustomThemeMode}
+                      presentation="segmented"
+                    />
+                    <Button
+                      label={savingCustomTheme ? 'Saving...' : 'Apply custom'}
+                      disabled={savingCustomTheme}
+                      onPress={handleCreateCustomTheme}
+                    />
+                  </YStack>
+                )}
+            </Fragment>
           ))}
         </YStack>
       </ScrollView>
     </View>
   );
 }
+
+function CustomThemeOptionGroup<T extends string>({
+  label,
+  options,
+  value,
+  onChange,
+  presentation,
+}: {
+  label: string;
+  options: { title: string; value: T }[];
+  value: T;
+  onChange: (value: T) => void;
+  presentation: 'scroll' | 'segmented';
+}) {
+  const content = (
+    <XStack
+      gap="$s"
+      flexWrap={presentation === 'segmented' ? 'nowrap' : undefined}
+    >
+      {options.map((option) => {
+        const selected = value === option.value;
+        return (
+          <Button
+            key={option.value}
+            onPress={() => onChange(option.value)}
+            label={option.title}
+            size="small"
+            fill={selected ? 'solid' : 'outline'}
+            intent="primary"
+            centered
+            flex={presentation === 'segmented' ? 1 : undefined}
+            minWidth={presentation === 'segmented' ? undefined : 128}
+          />
+        );
+      })}
+    </XStack>
+  );
+
+  return (
+    <YStack gap="$m">
+      <Text color="$primaryText">{label}</Text>
+      {presentation === 'scroll' ? (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ paddingRight: 12 }}
+        >
+          {content}
+        </ScrollView>
+      ) : (
+        content
+      )}
+    </YStack>
+  );
+}
+
+function CustomThemeSlider({
+  label,
+  value,
+  min,
+  max,
+  onValueChange,
+}: {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  onValueChange: (value: number) => void;
+}) {
+  const [localValue, setLocalValue] = useState(value);
+
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  const commitValue = useCallback(
+    (nextValue: number) => {
+      const roundedValue = Math.round(nextValue);
+      setLocalValue(roundedValue);
+      onValueChange(roundedValue);
+    },
+    [onValueChange]
+  );
+
+  return (
+    <YStack gap="$m">
+      <XStack justifyContent="space-between" gap="$m">
+        <Text color="$primaryText">{label}</Text>
+        <Text color="$secondaryText">{localValue}</Text>
+      </XStack>
+      <Slider
+        value={[localValue]}
+        min={min}
+        max={max}
+        step={1}
+        onValueChange={([nextValue]) =>
+          setLocalValue(Math.round(nextValue ?? localValue))
+        }
+        onSlideEnd={(_event, nextValue) => commitValue(nextValue)}
+        height="$2xl"
+        aria-label={label}
+      >
+        <Slider.Track height="$xs" backgroundColor="$border">
+          <Slider.TrackActive backgroundColor="$positiveActionText" />
+        </Slider.Track>
+        <Slider.Thumb
+          index={0}
+          size="$3xl"
+          circular
+          backgroundColor="$primaryBackground"
+          borderColor="$border"
+        />
+      </Slider>
+    </YStack>
+  );
+}
diff --git a/packages/app/navigation/RootStack.tsx b/packages/app/navigation/RootStack.tsx
index 5b8a91e27b..5066a5a99f 100644
--- a/packages/app/navigation/RootStack.tsx
+++ b/packages/app/navigation/RootStack.tsx
@@ -32,8 +32,8 @@ import MediaViewerScreen from '../features/top/MediaViewerScreen';
 import PostScreen from '../features/top/PostScreen';
 import { PostUsingContentConfigurationScreen } from '../features/top/PostUsingContentConfigurationScreen';
 import { UserProfileScreen } from '../features/top/UserProfileScreen';
-import { useIsDarkMode } from '../hooks/useIsDarkMode';
 import { useFeatureFlag } from '../lib/featureFlags';
+import { useActiveThemeIsDark } from '../provider';
 import { useTheme } from '../ui';
 import { GroupSettingsStack } from './GroupSettingsStack';
 import type { RootStackParamList } from './types';
@@ -42,14 +42,16 @@ import { mediaViewerScreenOptions } from './utils';
 const Root = createNativeStackNavigator<RootStackParamList>();
 
 export function RootStack() {
-  const isDarkMode = useIsDarkMode();
+  const activeThemeIsDark = useActiveThemeIsDark();
   const [contactsTabEnabled] = useFeatureFlag('contactsTab');
 
   // Android status bar has a solid color by default, so we clear it
   useFocusEffect(() => {
     if (Platform.OS === 'android') {
       StatusBar.setBackgroundColor('transparent');
-      StatusBar.setBarStyle(isDarkMode ? 'light-content' : 'dark-content');
+      StatusBar.setBarStyle(
+        activeThemeIsDark ? 'light-content' : 'dark-content'
+      );
     }
   });
 
diff --git a/packages/app/provider/index.tsx b/packages/app/provider/index.tsx
index dc6ed85fa0..51c8f66292 100644
--- a/packages/app/provider/index.tsx
+++ b/packages/app/provider/index.tsx
@@ -1,16 +1,21 @@
 import * as store from '@tloncorp/shared';
+import {
+  getCustomThemeRuntimeName,
+  getThemePreferenceMode,
+} from '@tloncorp/shared/utils';
 import React, { useEffect, useMemo, useState } from 'react';
 import { TamaguiProvider, TamaguiProviderProps } from 'tamagui';
 
 import { useIsDarkMode } from '../hooks/useIsDarkMode';
 import { SplashScreenTask, splashScreenProgress } from '../lib/splashscreen';
 import { AppTheme } from '../types/theme';
-import { config } from '../ui/tamagui.config';
+import { config, registerCustomTheme } from '../ui/tamagui.config';
 import { getDisplayTheme, normalizeTheme } from '../ui/utils/themeUtils';
 
 const ThemeContext = React.createContext<{
   activeTheme: AppTheme;
-}>({ activeTheme: 'light' });
+  activeThemeIsDark: boolean;
+}>({ activeTheme: 'light', activeThemeIsDark: false });
 
 export function Provider({
   children,
@@ -28,11 +33,14 @@ function ThemeProviderContent({
   children: React.ReactNode;
   tamaguiProps: Omit<TamaguiProviderProps, 'config'>;
 }) {
-  const [activeTheme] = useSyncedAppTheme();
+  const [activeTheme, activeThemeIsDark] = useSyncedAppTheme();
 
   return (
     <ThemeContext.Provider
-      value={useMemo(() => ({ activeTheme }), [activeTheme])}
+      value={useMemo(
+        () => ({ activeTheme, activeThemeIsDark }),
+        [activeTheme, activeThemeIsDark]
+      )}
     >
       <TamaguiProvider
         {...tamaguiProps}
@@ -50,22 +58,52 @@ export const useActiveTheme = () => {
   return activeTheme;
 };
 
+export const useActiveThemeIsDark = () => {
+  const { activeThemeIsDark } = React.useContext(ThemeContext);
+  return activeThemeIsDark;
+};
+
 function useSyncedAppTheme() {
   const isDarkMode = useIsDarkMode();
   const [activeTheme, setActiveTheme] = useState<AppTheme>(
     isDarkMode ? 'dark' : 'light'
   );
+  const [activeThemeIsDark, setActiveThemeIsDark] = useState(isDarkMode);
 
   // Query database for which theme the user has previously set
   const { data: storedThemeRaw, isLoading } = store.useThemeSettings();
+  const {
+    value: localThemePreference,
+    isLoading: isLoadingLocalThemePreference,
+  } = store.useLocalThemePreference();
+  const { value: customThemes, isLoading: isLoadingCustomThemes } =
+    store.useCustomThemes();
+
+  const customThemeNames = useMemo(
+    () => customThemes.map(getCustomThemeRuntimeName),
+    [customThemes]
+  );
+
+  useEffect(() => {
+    customThemes.forEach((customTheme) => {
+      registerCustomTheme(
+        getCustomThemeRuntimeName(customTheme),
+        customTheme.theme
+      );
+    });
+  }, [customThemes]);
 
   const storedTheme = useMemo(() => {
-    if (isLoading) {
+    if (isLoading || isLoadingLocalThemePreference || isLoadingCustomThemes) {
       return { loaded: false } as const;
     }
+    const themePreference = localThemePreference ?? storedThemeRaw;
     const appTheme =
-      storedThemeRaw == null ? 'auto' : normalizeTheme(storedThemeRaw);
+      themePreference == null
+        ? 'auto'
+        : normalizeTheme(themePreference, customThemeNames);
     const tamaguiTheme = getDisplayTheme(appTheme, isDarkMode);
+    const mode = getThemePreferenceMode(appTheme, isDarkMode, customThemes);
     return {
       loaded: true,
 
@@ -76,8 +114,20 @@ function useSyncedAppTheme() {
       /** Resolved Tamagui `ThemeName` derived from `appTheme` - maps
        * one-to-one with color set */
       tamaguiTheme,
+
+      /** Active visual mode, including custom themes and dark built-ins. */
+      mode,
     } as const;
-  }, [isLoading, storedThemeRaw, isDarkMode]);
+  }, [
+    isLoading,
+    isLoadingLocalThemePreference,
+    isLoadingCustomThemes,
+    localThemePreference,
+    storedThemeRaw,
+    customThemeNames,
+    customThemes,
+    isDarkMode,
+  ]);
 
   // Apply stored theme
   useEffect(() => {
@@ -86,8 +136,9 @@ function useSyncedAppTheme() {
     }
 
     setActiveTheme(storedTheme.tamaguiTheme);
+    setActiveThemeIsDark(storedTheme.mode === 'dark');
     splashScreenProgress.complete(SplashScreenTask.loadTheme);
   }, [storedTheme]);
 
-  return [activeTheme, setActiveTheme] as const;
+  return [activeTheme, activeThemeIsDark] as const;
 }
diff --git a/packages/app/types/theme.ts b/packages/app/types/theme.ts
index 8d744f8cbd..da50c0ab6c 100644
--- a/packages/app/types/theme.ts
+++ b/packages/app/types/theme.ts
@@ -1 +1,7 @@
-export type { AppTheme, AppThemeName } from '@tloncorp/api';
+import type { AppThemeName } from '@tloncorp/api';
+import type { CustomThemeName } from '@tloncorp/shared/utils';
+
+export type { AppThemeName };
+
+export type { CustomThemeName };
+export type AppTheme = AppThemeName | 'auto' | CustomThemeName;
diff --git a/packages/app/ui/components/Wayfinding/SplashSequence.tsx b/packages/app/ui/components/Wayfinding/SplashSequence.tsx
index e9761cb9ed..096b2919ee 100644
--- a/packages/app/ui/components/Wayfinding/SplashSequence.tsx
+++ b/packages/app/ui/components/Wayfinding/SplashSequence.tsx
@@ -29,22 +29,14 @@ import React, {
 } from 'react';
 import { FlatList, Image, Keyboard, ScrollView, Share } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import {
-  View,
-  YStack,
-  ZStack,
-  getTokenValue,
-  isWeb,
-  styled,
-  useThemeName,
-} from 'tamagui';
+import { View, YStack, ZStack, getTokenValue, isWeb, styled } from 'tamagui';
 
 import { useContactPermissions } from '../../../hooks/useContactPermissions';
 import {
   InviteSystemContactsFn,
   useInviteSystemContactHandler,
 } from '../../../hooks/useInviteSystemContactHandler';
-import { useActiveTheme } from '../../../provider';
+import { useActiveThemeIsDark } from '../../../provider';
 import {
   AttachmentProvider,
   useAttachmentContext,
@@ -751,9 +743,8 @@ export function WelcomePane(props: {
   onActionPress: () => void;
   hostingBotEnabled?: boolean;
 }) {
-  const activeTheme = useActiveTheme();
+  const isDark = useActiveThemeIsDark();
   const insets = useSafeAreaInsets();
-  const isDark = useMemo(() => activeTheme === 'dark', [activeTheme]);
 
   return (
     <View flex={1} paddingTop={insets.top} paddingBottom={insets.bottom}>
@@ -808,9 +799,8 @@ export function WelcomePane(props: {
 }
 
 export function TlonBotPane(props: { onActionPress: () => void }) {
-  const activeTheme = useActiveTheme();
+  const isDark = useActiveThemeIsDark();
   const insets = useSafeAreaInsets();
-  const isDark = useMemo(() => activeTheme === 'dark', [activeTheme]);
   return (
     <View flex={1} paddingTop={insets.top} paddingBottom={insets.bottom}>
       <Image
@@ -1428,8 +1418,7 @@ export function GroupsPane(props: {
   botShipId?: string | null;
 }) {
   const insets = useSafeAreaInsets();
-  const activeTheme = useActiveTheme();
-  const isDark = useMemo(() => activeTheme === 'dark', [activeTheme]);
+  const isDark = useActiveThemeIsDark();
   const { inviteUrl: homeGroupInviteUrl, state: homeGroupInviteState } =
     useHomeGroupInviteLink({
       enabled: !!props.hostingBotEnabled,
@@ -1742,8 +1731,7 @@ function LoadingState() {
 
 function ShareInviteLinkEmptyState() {
   const insets = useSafeAreaInsets();
-  const themeName = useThemeName();
-  const isDark = themeName === 'dark';
+  const isDark = useActiveThemeIsDark();
 
   const facesImage = isDark
     ? isWeb
@@ -2048,8 +2036,7 @@ function PrivacyLevelsDisplay() {
 }
 
 const InviteFriendsDisplay = () => {
-  const activeTheme = useActiveTheme();
-  const isDark = useMemo(() => activeTheme === 'dark', [activeTheme]);
+  const isDark = useActiveThemeIsDark();
 
   return (
     <View marginBottom="$2xl" height={410}>
diff --git a/packages/app/ui/tamagui.config.ts b/packages/app/ui/tamagui.config.ts
index 84fb35a594..e4bc495302 100644
--- a/packages/app/ui/tamagui.config.ts
+++ b/packages/app/ui/tamagui.config.ts
@@ -1 +1 @@
-export { config } from '@tloncorp/ui/config';
+export { config, registerCustomTheme } from '@tloncorp/ui/config';
diff --git a/packages/app/ui/utils/colorUtils.tsx b/packages/app/ui/utils/colorUtils.tsx
index aa04830cb9..7f2509f225 100644
--- a/packages/app/ui/utils/colorUtils.tsx
+++ b/packages/app/ui/utils/colorUtils.tsx
@@ -1,13 +1,13 @@
 import { darken, hsla, lighten, parseToHsla, parseToRgba } from 'color2k';
 import { useMemo } from 'react';
 import { useTheme } from 'tamagui';
-import { ThemeName, useThemeName } from 'tamagui';
 
 export const useSigilColors = (accentColor: string | null = '#000000') => {
-  const theme = useThemeName();
+  const isDarkTheme = useIsDarkTheme();
+  const themeMode = isDarkTheme ? 'dark' : 'light';
   const backgroundColor = useMemo(
-    () => adjustColorContrastForTheme(accentColor || '#000000', theme),
-    [accentColor, theme]
+    () => adjustColorContrastForTheme(accentColor || '#000000', themeMode),
+    [accentColor, themeMode]
   );
   const foregroundColor = useMemo(
     () => getContrastingColor(backgroundColor),
@@ -28,7 +28,7 @@ export const getContrastingColor = (background: string): 'black' | 'white' => {
 
 export function adjustColorContrastForTheme(
   color: string,
-  theme: ThemeName
+  theme: 'dark' | 'light'
 ): string {
   const hslaColor = parseInputAsHsla(color);
   const lightness = hslaColor[2];
diff --git a/packages/app/ui/utils/themeUtils.tsx b/packages/app/ui/utils/themeUtils.tsx
index b9ffd7e3fe..ce8706e592 100644
--- a/packages/app/ui/utils/themeUtils.tsx
+++ b/packages/app/ui/utils/themeUtils.tsx
@@ -1,27 +1,23 @@
+import {
+  getCustomThemeName,
+  isCustomThemeName,
+  normalizeThemePreference,
+} from '@tloncorp/shared/utils';
 import { ThemeName } from 'tamagui';
 
 import { AppTheme } from '../../types/theme';
 
+export { getCustomThemeName, isCustomThemeName };
+
 /**
  * Normalizes a theme string to a valid AppTheme..
  * Returns 'auto' if input is null or not a valid theme.
  */
-export function normalizeTheme(theme: string | null): AppTheme {
-  if (!theme) return 'auto';
-  const t = String(theme).toLowerCase();
-  const validThemes: Record<string, ThemeName> = {
-    light: 'light',
-    dark: 'dark',
-    dracula: 'dracula',
-    greenscreen: 'greenscreen',
-    gruvbox: 'gruvbox',
-    monokai: 'monokai',
-    nord: 'nord',
-    peony: 'peony',
-    solarized: 'solarized',
-  };
-
-  return validThemes[t] || 'auto';
+export function normalizeTheme(
+  theme: string | null,
+  customThemeNames: string[] = []
+): AppTheme {
+  return normalizeThemePreference(theme, customThemeNames) as AppTheme;
 }
 
 /**
@@ -32,5 +28,7 @@ export function getDisplayTheme(
   theme: AppTheme,
   isDarkMode: boolean
 ): ThemeName {
-  return theme === 'auto' ? (isDarkMode ? 'dark' : 'light') : theme;
+  return (
+    theme === 'auto' ? (isDarkMode ? 'dark' : 'light') : theme
+  ) as ThemeName;
 }
diff --git a/packages/shared/src/db/keyValue.ts b/packages/shared/src/db/keyValue.ts
index ad83f0cb01..4605959a52 100644
--- a/packages/shared/src/db/keyValue.ts
+++ b/packages/shared/src/db/keyValue.ts
@@ -4,6 +4,7 @@ import * as ub from '@tloncorp/api/urbit';
 
 import { NodeBootPhase, SignupParams, WayfindingProgress } from '../domain';
 import { Lure } from '../logic';
+import type { CustomThemeDefinition } from '../utils';
 import { createStorageItem } from './storageItem';
 
 export const pushNotificationSettings =
@@ -190,6 +191,16 @@ export const themeSettings = createStorageItem<AppThemeName | null>({
   defaultValue: null,
 });
 
+export const localThemePreference = createStorageItem<string | null>({
+  key: 'settings:localThemePreference',
+  defaultValue: null,
+});
+
+export const customThemes = createStorageItem<CustomThemeDefinition[]>({
+  key: 'settings:customThemes',
+  defaultValue: [],
+});
+
 export type ChannelSortPreference = 'recency' | 'arranged';
 
 export const channelSortPreference = createStorageItem<ChannelSortPreference>({
diff --git a/packages/shared/src/store/dbHooks.ts b/packages/shared/src/store/dbHooks.ts
index dd3c0b57f3..2fed304fb2 100644
--- a/packages/shared/src/store/dbHooks.ts
+++ b/packages/shared/src/store/dbHooks.ts
@@ -719,6 +719,14 @@ export const useThemeSettings = () => {
   });
 };
 
+export const useLocalThemePreference = () => {
+  return db.localThemePreference.useStorageItem();
+};
+
+export const useCustomThemes = () => {
+  return db.customThemes.useStorageItem();
+};
+
 export const useTelemetryEnabled = () => {
   const deps = useKeyFromQueryDeps(db.getSettings);
   return useQuery({
diff --git a/packages/shared/src/store/settingsActions.ts b/packages/shared/src/store/settingsActions.ts
index 0861e7f524..57a6f975da 100644
--- a/packages/shared/src/store/settingsActions.ts
+++ b/packages/shared/src/store/settingsActions.ts
@@ -7,6 +7,7 @@ import { createDevLogger } from '../debug';
 import { AnalyticsEvent, AnalyticsSeverity } from '../domain';
 import * as logic from '../logic';
 import { withRetry } from '../logic';
+import { isRemoteThemePreference } from '../utils';
 
 const logger = createDevLogger('SettingsActions', false);
 
@@ -154,6 +155,23 @@ export async function updateTheme(theme: AppTheme) {
   }
 }
 
+export async function updateThemePreference(theme: string) {
+  const previousLocalPreference = await db.localThemePreference.getValue(true);
+
+  try {
+    await db.localThemePreference.setValue(theme);
+
+    if (isRemoteThemePreference(theme)) {
+      await updateTheme(theme);
+    } else {
+      logger.trackEvent(AnalyticsEvent.ActionThemeUpdate, { theme });
+    }
+  } catch (error) {
+    await db.localThemePreference.setValue(previousLocalPreference);
+    throw error;
+  }
+}
+
 export async function updateDisableTlonInfraEnhancement(disabled: boolean) {
   const existing = await db.getSettings();
   const oldValue = existing?.disableTlonInfraEnhancement;
diff --git a/packages/shared/src/utils/appTheme.ts b/packages/shared/src/utils/appTheme.ts
new file mode 100644
index 0000000000..422883527e
--- /dev/null
+++ b/packages/shared/src/utils/appTheme.ts
@@ -0,0 +1,490 @@
+import type { AppThemeName } from '@tloncorp/api';
+
+export const builtInThemeNames = [
+  'light',
+  'dark',
+  'dracula',
+  'greenscreen',
+  'gruvbox',
+  'monokai',
+  'nord',
+  'peony',
+  'solarized',
+] as const satisfies AppThemeName[];
+
+export const themePreferenceNames = ['auto', ...builtInThemeNames] as const;
+
+export const darkThemeNames = [
+  'dark',
+  'dracula',
+  'greenscreen',
+  'gruvbox',
+  'monokai',
+  'nord',
+  'solarized',
+] as const satisfies AppThemeName[];
+
+export type CustomThemeName = `custom_${string}`;
+export type ThemePreference =
+  | (typeof themePreferenceNames)[number]
+  | CustomThemeName;
+
+export type BuiltInThemeOption = {
+  title: string;
+  value: AppThemeName;
+};
+
+export const builtInThemeOptions = [
+  { title: 'Tlon Light', value: 'light' },
+  { title: 'Tlon Dark', value: 'dark' },
+  { title: 'Dracula', value: 'dracula' },
+  { title: 'Greenscreen', value: 'greenscreen' },
+  { title: 'Gruvbox', value: 'gruvbox' },
+  { title: 'Monokai', value: 'monokai' },
+  { title: 'Nord', value: 'nord' },
+  { title: 'Peony', value: 'peony' },
+  { title: 'Solarized', value: 'solarized' },
+] as const satisfies BuiltInThemeOption[];
+
+const remoteThemeNameSet = new Set<string>(themePreferenceNames);
+const darkThemeNameSet = new Set<string>(darkThemeNames);
+
+export function isRemoteThemePreference(
+  theme: string
+): theme is (typeof themePreferenceNames)[number] {
+  return remoteThemeNameSet.has(theme);
+}
+
+export function getCustomThemeName(id: string): CustomThemeName {
+  return `custom_${id.replace(/[^a-zA-Z0-9_-]/g, '_').toLowerCase()}`;
+}
+
+export function isCustomThemeName(theme: string): theme is CustomThemeName {
+  return theme.startsWith('custom_');
+}
+
+export function normalizeThemePreference(
+  theme: string | null,
+  customThemeNames: string[] = []
+): ThemePreference {
+  if (!theme) {
+    return 'auto';
+  }
+
+  const normalizedTheme = theme.toLowerCase();
+  if (
+    customThemeNames.includes(normalizedTheme) &&
+    isCustomThemeName(normalizedTheme)
+  ) {
+    return normalizedTheme;
+  }
+
+  if (isCustomThemeName(normalizedTheme) && customThemeNames.length === 1) {
+    return customThemeNames[0] as CustomThemeName;
+  }
+
+  return isRemoteThemePreference(normalizedTheme) ? normalizedTheme : 'auto';
+}
+
+export function getThemePreferenceMode(
+  theme: ThemePreference,
+  isSystemDark: boolean,
+  customThemes: CustomThemeDefinition[] = []
+): ThemeMode {
+  if (theme === 'auto') {
+    return isSystemDark ? 'dark' : 'light';
+  }
+
+  if (isCustomThemeName(theme)) {
+    const customTheme =
+      customThemes.find(
+        (customTheme) => getCustomThemeRuntimeName(customTheme) === theme
+      ) ?? customThemes[0];
+    return customTheme?.mode ?? (isSystemDark ? 'dark' : 'light');
+  }
+
+  return darkThemeNameSet.has(theme) ? 'dark' : 'light';
+}
+
+export type TlonThemeTokens = {
+  primaryText: string;
+  color: string;
+  secondaryText: string;
+  background: string;
+  transparentBackground: string;
+  secondaryBackground: string;
+  shadow: string;
+  tertiaryText: string;
+  border: string;
+  secondaryBorder: string;
+  activeBorder: string;
+  positiveActionText: string;
+  positiveBackground: string;
+  positiveBorder: string;
+  negativeActionText: string;
+  negativeBackground: string;
+  negativeBorder: string;
+  darkBackground: string;
+  overlayBackground: string;
+  overlayBlurTint: 'light' | 'dark';
+  neutralUnreadDot: string;
+  systemNoticeBackground: string;
+  systemNoticeBorder: string;
+  systemNoticeText: string;
+  mediaScrim: string;
+};
+
+export type CustomThemeDefinition = {
+  id: string;
+  name: string;
+  mode: 'light' | 'dark';
+  params: {
+    hue: number;
+    width: number;
+    saturation: number;
+    brightness: number;
+    harmony: ThemeHarmony;
+  };
+  theme: TlonThemeTokens;
+  createdAt: number;
+  updatedAt: number;
+};
+
+export type ThemeMode = 'light' | 'dark';
+export type ThemeHarmony =
+  | 'monochromatic'
+  | 'analogous'
+  | 'complementary'
+  | 'split-complementary'
+  | 'triadic';
+
+export type CustomThemeParams = {
+  name: string;
+  hue: number;
+  mode: ThemeMode;
+  id?: string;
+  createdAt?: number;
+  width?: number;
+  saturation?: number;
+  brightness?: number;
+  harmony?: ThemeHarmony;
+};
+
+export const customThemeSlotId = 'custom';
+
+const accentOffsets = {
+  base08: 0,
+  base09: 32,
+  base0A: 58,
+  base0B: 126,
+  base0C: 178,
+  base0D: 214,
+  base0E: 274,
+  base0F: 316,
+} as const;
+
+const harmonies: Record<ThemeHarmony, number[]> = {
+  monochromatic: [0, 0, 0, 0, 0, 0, 0, 0],
+  analogous: [-42, -28, -14, 0, 14, 28, 42, 56],
+  complementary: [0, 18, -18, 180, 156, 204, 36, -36],
+  'split-complementary': [0, 24, -24, 150, 210, 168, 192, -42],
+  triadic: [0, 24, -24, 120, 240, 144, 216, -48],
+};
+
+const accentKeys = [
+  'base08',
+  'base09',
+  'base0A',
+  'base0B',
+  'base0C',
+  'base0D',
+  'base0E',
+  'base0F',
+] as const;
+
+type Base16Key =
+  | `base0${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7}`
+  | (typeof accentKeys)[number];
+
+type Base16Palette = Record<Base16Key, string>;
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
+
+function wrapHue(value: number) {
+  return ((value % 360) + 360) % 360;
+}
+
+function hsvToRgb(h: number, s: number, v: number) {
+  const c = v * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = v - c;
+  let rgb = [0, 0, 0];
+
+  if (h < 60) rgb = [c, x, 0];
+  else if (h < 120) rgb = [x, c, 0];
+  else if (h < 180) rgb = [0, c, x];
+  else if (h < 240) rgb = [0, x, c];
+  else if (h < 300) rgb = [x, 0, c];
+  else rgb = [c, 0, x];
+
+  return rgb.map((channel) => Math.round((channel + m) * 255));
+}
+
+function rgbToHex(rgb: number[]) {
+  return `#${rgb
+    .map((channel) => channel.toString(16).padStart(2, '0'))
+    .join('')}`;
+}
+
+function linearToSrgb(channel: number) {
+  const value =
+    channel <= 0.0031308
+      ? 12.92 * channel
+      : 1.055 * Math.pow(channel, 1 / 2.4) - 0.055;
+  return Math.round(clamp(value, 0, 1) * 255);
+}
+
+function oklchToHex(lightness: number, chroma: number, hue: number) {
+  const radians = (wrapHue(hue) * Math.PI) / 180;
+  const a = chroma * Math.cos(radians);
+  const b = chroma * Math.sin(radians);
+  const lPrime = lightness + 0.3963377774 * a + 0.2158037573 * b;
+  const mPrime = lightness - 0.1055613458 * a - 0.0638541728 * b;
+  const sPrime = lightness - 0.0894841775 * a - 1.291485548 * b;
+  const l = lPrime ** 3;
+  const m = mPrime ** 3;
+  const s = sPrime ** 3;
+  const r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  const blue = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+
+  return rgbToHex([linearToSrgb(r), linearToSrgb(g), linearToSrgb(blue)]);
+}
+
+function hexToRgb(hex: string) {
+  const value = hex.replace('#', '');
+  return [
+    Number.parseInt(value.slice(0, 2), 16),
+    Number.parseInt(value.slice(2, 4), 16),
+    Number.parseInt(value.slice(4, 6), 16),
+  ];
+}
+
+function relativeLuminance(hex: string) {
+  return hexToRgb(hex)
+    .map((channel) => {
+      const value = channel / 255;
+      return value <= 0.03928
+        ? value / 12.92
+        : Math.pow((value + 0.055) / 1.055, 2.4);
+    })
+    .reduce(
+      (sum, channel, index) => sum + channel * [0.2126, 0.7152, 0.0722][index],
+      0
+    );
+}
+
+function contrastRatio(a: string, b: string) {
+  const lighter = Math.max(relativeLuminance(a), relativeLuminance(b));
+  const darker = Math.min(relativeLuminance(a), relativeLuminance(b));
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+function ensureContrast(hex: string, background: string, minimum: number) {
+  let [r, g, b] = hexToRgb(hex);
+  const bgIsDark = relativeLuminance(background) < 0.5;
+
+  for (
+    let i = 0;
+    i < 48 && contrastRatio(rgbToHex([r, g, b]), background) < minimum;
+    i += 1
+  ) {
+    const direction = bgIsDark ? 1 : -1;
+    r = clamp(Math.round(r + direction * 5), 0, 255);
+    g = clamp(Math.round(g + direction * 5), 0, 255);
+    b = clamp(Math.round(b + direction * 5), 0, 255);
+  }
+
+  return rgbToHex([r, g, b]);
+}
+
+function rgbaFromHex(hex: string, alpha: number) {
+  const [r, g, b] = hexToRgb(hex);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+function mixHex(a: string, b: string, amount: number) {
+  const ar = hexToRgb(a);
+  const br = hexToRgb(b);
+  return rgbToHex(
+    ar.map((channel, index) =>
+      Math.round(channel * amount + br[index] * (1 - amount))
+    )
+  );
+}
+
+function readableTextOn(background: string) {
+  return contrastRatio('#000000', background) >
+    contrastRatio('#ffffff', background)
+    ? '#000000'
+    : '#FFFFFF';
+}
+
+function colorFromHsv(h: number, s: number, v: number) {
+  return rgbToHex(hsvToRgb(wrapHue(h), clamp(s, 0, 1), clamp(v, 0, 1)));
+}
+
+function generatePalette({
+  hue,
+  width,
+  saturation,
+  brightness,
+  mode,
+  harmony,
+}: Required<Omit<CustomThemeParams, 'name'>>): Base16Palette {
+  const isDark = mode === 'dark';
+  const sat = saturation / 100;
+  const val = brightness / 100;
+  const neutralHue = wrapHue(hue + (isDark ? -8 : 8));
+  const neutralChroma = clamp(sat * 0.045, 0.012, 0.052);
+  const darkRamp = [0.14, 0.19, 0.27, 0.43, 0.62, 0.79, 0.88, 0.96];
+  const lightRamp = [0.97, 0.92, 0.84, 0.62, 0.45, 0.27, 0.18, 0.11];
+  const palette = {} as Base16Palette;
+
+  (isDark ? darkRamp : lightRamp).forEach((rampValue, index) => {
+    const key = `base0${index}` as Base16Key;
+    const distance = Math.abs(index - 3.5) / 3.5;
+    const adjustedChroma = neutralChroma * (1 + distance * 0.28);
+    palette[key] = oklchToHex(rampValue, adjustedChroma, neutralHue);
+  });
+
+  const harmonyAngles = harmonies[harmony] ?? harmonies.analogous;
+  accentKeys.forEach((key, index) => {
+    const fallbackOffset = accentOffsets[key] - 180;
+    const harmonyOffset = harmonyAngles[index] ?? fallbackOffset;
+    const accentHue = wrapHue(hue + harmonyOffset * (width / 100));
+    const accentSat = clamp(sat + 0.12, 0.42, 0.94);
+    const accentValue = isDark
+      ? clamp(val + 0.08, 0.58, 0.96)
+      : clamp(val - 0.08, 0.38, 0.78);
+
+    palette[key] = colorFromHsv(accentHue, accentSat, accentValue);
+  });
+
+  palette.base05 = ensureContrast(
+    palette.base05,
+    palette.base00,
+    isDark ? 7 : 9
+  );
+  palette.base03 = ensureContrast(palette.base03, palette.base00, 2.25);
+
+  return palette;
+}
+
+function generateTlonTheme(
+  palette: Base16Palette,
+  opts: { hue: number; mode: ThemeMode }
+): TlonThemeTokens {
+  const isDark = opts.mode === 'dark';
+  const background = palette.base00;
+  const primaryText = palette.base05;
+  const secondaryText = ensureContrast(palette.base04, background, 4.5);
+  const tertiaryText = ensureContrast(palette.base03, background, 3);
+  const positiveActionText = ensureContrast(palette.base0D, background, 4.5);
+  const negativeActionText = ensureContrast(palette.base08, background, 4.5);
+  const noticeAccent = palette.base0C;
+  const systemNoticeBackground = ensureContrast(
+    mixHex(noticeAccent, background, isDark ? 0.55 : 0.72),
+    background,
+    1.45
+  );
+
+  return {
+    primaryText,
+    color: primaryText,
+    secondaryText,
+    background,
+    transparentBackground: rgbaFromHex(background, 0),
+    secondaryBackground: palette.base01,
+    shadow: rgbaFromHex(isDark ? '#ffffff' : '#181818', 0.08),
+    tertiaryText,
+    border: palette.base02,
+    secondaryBorder: palette.base03,
+    activeBorder: palette.base04,
+    positiveActionText,
+    positiveBackground: mixHex(
+      positiveActionText,
+      background,
+      isDark ? 0.24 : 0.1
+    ),
+    positiveBorder: mixHex(
+      positiveActionText,
+      background,
+      isDark ? 0.48 : 0.28
+    ),
+    negativeActionText,
+    negativeBackground: mixHex(
+      negativeActionText,
+      background,
+      isDark ? 0.22 : 0.09
+    ),
+    negativeBorder: mixHex(
+      negativeActionText,
+      background,
+      isDark ? 0.46 : 0.26
+    ),
+    darkBackground: isDark ? oklchToHex(0.09, 0.02, opts.hue) : palette.base06,
+    overlayBackground: isDark ? '#FFFFFF' : '#000000',
+    overlayBlurTint: isDark ? 'light' : 'dark',
+    neutralUnreadDot: palette.base04,
+    systemNoticeBackground,
+    systemNoticeBorder: mixHex(noticeAccent, background, isDark ? 0.78 : 0.36),
+    systemNoticeText: ensureContrast(
+      readableTextOn(systemNoticeBackground),
+      systemNoticeBackground,
+      4.5
+    ),
+    mediaScrim: 'rgba(0, 0, 0, 0.5)',
+  };
+}
+
+export function createCustomThemeDefinition(
+  params: CustomThemeParams
+): CustomThemeDefinition {
+  const now = Date.now();
+  const id = params.id ?? customThemeSlotId;
+  const normalized = {
+    name: params.name.trim() || 'Custom Theme',
+    hue: clamp(Math.round(params.hue), 0, 359),
+    mode: params.mode,
+    id,
+    createdAt: params.createdAt ?? now,
+    width: params.width ?? 72,
+    saturation: params.saturation ?? 66,
+    brightness: params.brightness ?? 82,
+    harmony: params.harmony ?? 'analogous',
+  } satisfies Required<CustomThemeParams>;
+  const palette = generatePalette(normalized);
+
+  return {
+    id,
+    name: normalized.name,
+    mode: normalized.mode,
+    params: {
+      hue: normalized.hue,
+      width: normalized.width,
+      saturation: normalized.saturation,
+      brightness: normalized.brightness,
+      harmony: normalized.harmony,
+    },
+    theme: generateTlonTheme(palette, normalized),
+    createdAt: normalized.createdAt,
+    updatedAt: now,
+  };
+}
+
+export function getCustomThemeRuntimeName(theme: CustomThemeDefinition) {
+  return getCustomThemeName(`${theme.id}_${theme.updatedAt}`);
+}
diff --git a/packages/shared/src/utils/index.ts b/packages/shared/src/utils/index.ts
index 80f53c46b9..4fdc4a48a1 100644
--- a/packages/shared/src/utils/index.ts
+++ b/packages/shared/src/utils/index.ts
@@ -13,6 +13,7 @@ export * from './files';
 export * from './omit';
 export * from './useEventEmitter';
 export * from './useMockedQuery';
+export * from './appTheme';
 export * from '@tloncorp/api/lib/ProgressManager';
 export * from '@tloncorp/api/lib/telemetryFormatters';
 export * from '@tloncorp/api/lib/spyOn';
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 6071bb0078..72ba46f984 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -36,6 +36,7 @@
     "@tamagui/animations-moti": "~1.126.12",
     "@tamagui/get-token": "~1.126.12",
     "@tamagui/image": "~1.126.12",
+    "@tamagui/theme": "~1.126.12",
     "@tloncorp/editor": "workspace:*",
     "@tloncorp/shared": "workspace:*",
     "@uidotdev/usehooks": "^2.4.1",
diff --git a/packages/ui/tamagui.config.ts b/packages/ui/tamagui.config.ts
index de624a01e1..bc72fe61e9 100644
--- a/packages/ui/tamagui.config.ts
+++ b/packages/ui/tamagui.config.ts
@@ -1,5 +1,7 @@
 import { createAnimations } from '@tamagui/animations-moti';
 import { createMedia } from '@tamagui/react-native-media-driver';
+import { addTheme } from '@tamagui/theme';
+import type { TlonThemeTokens } from '@tloncorp/shared/utils';
 import { Platform } from 'react-native';
 import { createFont, createTamagui, createTokens } from 'tamagui';
 
@@ -573,3 +575,7 @@ export const config =
       });
 
 export type Conf = typeof config;
+
+export function registerCustomTheme(name: string, theme: TlonThemeTokens) {
+  addTheme({ name, theme });
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 52f54131ad..5f05006211 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1323,6 +1323,9 @@ importers:
       '@tamagui/image':
         specifier: ~1.126.12
         version: 1.126.12(react-dom@18.3.1(react@18.3.1))(react-native@0.76.9(patch_hash=3acb3ptzs7giygeof5rd3hwtw4)(@babel/core@7.25.2)(@babel/preset-env@7.28.3(@babel/core@7.25.2))(@react-native-community/cli@13.6.9(encoding@0.1.13))(@types/react@18.3.23)(encoding@0.1.13)(react@18.3.1))(react@18.3.1)
+      '@tamagui/theme':
+        specifier: ~1.126.12
+        version: 1.126.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tloncorp/editor':
         specifier: workspace:*
         version: link:../editor