Skip to content

feat(desktop): remove theme selection from onboarding, default to Buzz + System #1947

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wesbillman merged 2 commits into from
Jul 16, 2026
Merged

feat(desktop): remove theme selection from onboarding, default to Buzz + System #1947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a95cae3
feat(desktop): remove theme selection from onboarding, default to Buz…
matt2e Jul 16, 2026
42d34c5
test(desktop): fix e2e specs broken by the Buzz + System default theme
matt2e Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 14 additions & 8 deletions desktop/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@
The inline script below reads the cached theme background (same
`buzz-theme-cache` entry ThemeProvider writes) and applies it synchronously
so the boot color matches the themed loading gate — no black flash on light
themes. On the first-ever launch (no cache yet) it seeds the `dark` class
synchronously so the setup gate reads the dark `:root` vars instead of the
light Catppuccin-Latte default, matching the dark `houston` theme
ThemeProvider applies moments later — no light flash before it loads.
themes. On the first-ever launch (no cache yet) it seeds the light/dark
class from the OS color scheme, matching the Buzz theme in System mode
that ThemeProvider applies moments later — no wrong-scheme flash before
it loads.
-->
<style>
html {
Expand All @@ -31,10 +31,16 @@
try {
cached = window.localStorage.getItem("buzz-theme-cache");
if (!cached) {
// No stored theme: the default theme (`houston`) is dark, so seed
// the `dark` class now. Otherwise the setup gate would paint from
// the light `:root` vars until ThemeProvider loads asynchronously.
document.documentElement.classList.add("dark");
// No stored theme: the default is Buzz following the OS scheme,
// so seed the matching class (and backdrop) now. Otherwise the
// setup gate would paint the wrong scheme until ThemeProvider
// loads asynchronously.
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.add("light");
document.documentElement.style.backgroundColor = "#fff";
}
return;
}
parsed = JSON.parse(cached);
Expand Down
100 changes: 4 additions & 96 deletions desktop/src/features/onboarding/ui/OnboardingFlow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,11 @@ import {
importIdentity,
persistCurrentIdentity,
} from "@/shared/api/tauriIdentity";
import {
ACCENT_STORAGE_KEY,
NEUTRAL_ACCENT,
THEME_STORAGE_KEY,
useTheme,
} from "@/shared/theme/ThemeProvider";
import { useSystemColorScheme } from "@/shared/theme/useSystemColorScheme";
import { ONBOARDING_DEFAULT_THEME_NAME } from "@/shared/theme/theme-loader";
import { Button } from "@/shared/ui/button";
import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion";
import { StepProgress } from "@/shared/ui/step-progress";
import { AvatarStep } from "./AvatarStep";
import { BackupStep } from "./BackupStep";
import { MembershipDenied } from "./MembershipDenied";
import { NostrKeyImportForm } from "./NostrKeyImportForm";
import { useCommunities } from "@/features/communities/useCommunities";
Expand All @@ -34,8 +26,6 @@ import {
OnboardingSlideTransition,
} from "./OnboardingSlideTransition";
import { ProfileStep } from "./ProfileStep";
import { SetupStep } from "./SetupStep";
import { ThemeStep, preloadThemePreviewVars } from "./ThemeStep";
import type {
OnboardingActions,
OnboardingPage,
Expand Down Expand Up @@ -190,36 +180,6 @@ export function OnboardingFlow({
const [transitionDirection, setTransitionDirection] =
React.useState<OnboardingTransitionDirection>("forward");
const systemColorScheme = useSystemColorScheme();
const { accentColor, setAccentColor, setTheme, themeName } = useTheme();

const ensureThemeStepDefaults = React.useCallback(() => {
const hasStoredTheme =
window.localStorage.getItem(THEME_STORAGE_KEY) !== null;
const hasStoredAccent =
window.localStorage.getItem(ACCENT_STORAGE_KEY) !== null;

if (!hasStoredTheme && themeName !== ONBOARDING_DEFAULT_THEME_NAME) {
setTheme(ONBOARDING_DEFAULT_THEME_NAME);
}

if (!hasStoredAccent && accentColor !== NEUTRAL_ACCENT) {
setAccentColor(NEUTRAL_ACCENT);
}
}, [accentColor, setAccentColor, setTheme, themeName]);

React.useEffect(() => {
if (
currentPage === "profile" ||
currentPage === "backup" ||
currentPage === "avatar"
) {
void preloadThemePreviewVars().catch(() => undefined);
}

if (currentPage === "avatar") {
ensureThemeStepDefaults();
}
}, [currentPage, ensureThemeStepDefaults]);

const resetProfileSaveError = React.useCallback(() => {
profileUpdateMutation.reset();
Expand All @@ -236,20 +196,6 @@ export function OnboardingFlow({
[resetProfileSaveError],
);

const showSetupPage = React.useCallback(() => {
setTransitionDirection("forward");
setCurrentPage("setup");
}, []);

const showThemePage = React.useCallback(
(direction: OnboardingTransitionDirection = "forward") => {
ensureThemeStepDefaults();
setTransitionDirection(direction);
setCurrentPage("theme");
},
[ensureThemeStepDefaults],
);

const showAvatarPage = React.useCallback(
(direction: OnboardingTransitionDirection = "forward") => {
setTransitionDirection(direction);
Expand Down Expand Up @@ -430,8 +376,7 @@ export function OnboardingFlow({
const pageIndex = activeSteps.indexOf(normalizedPage);
const currentStep = pageIndex >= 0 ? pageIndex + STEP_OFFSET : STEP_OFFSET;
const totalOnboardingSteps = activeSteps.length;
const hideFixedProgressOnCompact =
currentPage === "avatar" || currentPage === "theme";
const hideFixedProgressOnCompact = currentPage === "avatar";

// Swapping the identity changes the pubkey, which remounts this flow
// (keyed on pubkey in App.tsx) and re-runs the onboarding gate: the new
Expand Down Expand Up @@ -502,27 +447,14 @@ export function OnboardingFlow({
return (
<>
<div
className={`buzz-startup-shell flex items-start justify-center overflow-y-auto bg-background px-4 py-8 text-foreground ${
currentPage === "profile" ||
currentPage === "backup" ||
currentPage === "avatar" ||
currentPage === "key-import"
? "buzz-onboarding-neutral-theme"
: ""
}`}
className="buzz-onboarding-neutral-theme buzz-startup-shell flex items-start justify-center overflow-y-auto bg-background px-4 py-8 text-foreground"
data-testid="onboarding-gate"
data-system-color-scheme={systemColorScheme}
>
<StartupWindowDragRegion />
<div
className={`relative my-auto flex w-full flex-col items-center text-center ${
currentPage === "theme"
? "max-w-[1180px]"
: currentPage === "avatar"
? "max-w-[1080px]"
: currentPage === "setup"
? "max-w-[920px]"
: "max-w-[500px]"
currentPage === "avatar" ? "max-w-[1080px]" : "max-w-[500px]"
}`}
>
<OnboardingSlideTransition
Expand Down Expand Up @@ -643,15 +575,7 @@ export function OnboardingFlow({
onImport={importExistingKey}
/>
</OnboardingSlideTransition>
) : currentPage === "backup" ? (
<BackupStep
currentStep={currentStep}
direction={transitionDirection}
onBack={showProfilePage}
onNext={() => showAvatarPage()}
totalSteps={totalOnboardingSteps}
/>
) : currentPage === "avatar" ? (
) : (
<AvatarStep
actions={{
advanceWithoutSaving: complete,
Expand All @@ -669,22 +593,6 @@ export function OnboardingFlow({
state={avatarStepState}
totalSteps={totalOnboardingSteps}
/>
) : currentPage === "theme" ? (
<ThemeStep
actions={{
skip: showSetupPage,
submit: showSetupPage,
}}
direction={transitionDirection}
/>
) : (
<SetupStep
actions={{
back: () => showThemePage("backward"),
complete,
}}
direction={transitionDirection}
/>
)}
</div>
</div>
Expand Down
Loading