\n {/* Header */}\n

App Settings

\n \n \n \n

\n\n {/* Content */}\n

\n {/* Theme Selection */}\n

\n Choose Your Theme\n

\n Select a color theme that matches your style and preference.\n

\n \n

\n {themes.map((theme) => (\n handleThemeChange(theme)}\n style={{\n borderColor: selectedTheme.id === theme.id ? 'var(--color-primary)' : 'var(--color-border)'\n }}\n >\n {/* Theme Preview */}\n

\n\n {/* Theme Info */}\n

\n {theme.name}\n

\n {theme.description}\n

\n \n {theme.isDark ? '🌙 Dark' : '☀️ Light'}\n \n

\n\n {/* Selected Indicator */}\n {selectedTheme.id === theme.id && (\n

\n \n

\n )}\n

\n ))}\n

\n\n {/* Current Theme Preview */}\n

\n Current Theme Preview\n

\n Sample Chat Interface\n

\n Online\n

\n \n

\n \n You\n \n

\n This is how your messages will look with the selected theme.\n

\n\n

\n \n Friend\n \n

\n And this is how other people's messages will appear.\n

\n\n {/* Footer */}\n

\n \n Close\n \n

\n );\n}","deleted","label",[172,173,154],"frontend","components","permalink","https://www.val.town/x/loading/matrix/code/frontend/components/Settings.tsx","extension","actionData","errors"]