The admin panel bugged me for a while. The public site finally looked like mine, green, the mountain, the whole thing, and then I would click into the admin area to write a post and it was like walking into a different website. Generic dashboard, none of the character, a hard visual cut between my site and the tool I use to run my site. I wanted going into admin to feel like the same place, just with different things in the sidebar.
The honest reason it was two different looks is that I had built them as two different shells. The public layout drew the sidebar and the background and the reading panel, and admin threw all of that away and drew its own plain version. So step one was pulling the shell out into one component that both of them use. It takes the nav links as a prop, and that is basically the only thing that differs between them.
<!-- both public and admin render this now -->
<SiteShell {nav} {account} wide={isAdmin}>
{@render children()}
</SiteShell>Public passes its Home, Tags, Archive links, admin passes Dashboard, Posts, Comments and so on. Same background, same frosted panels, same rail. Now the only thing that changes when you cross into admin is which links are in the sidebar, which is exactly what I was after.
One thing I was careful about. I did not want to fully weld admin onto the public site, because at some point I might want to move admin somewhere more locked down for security reasons, its own subdomain or its own deployment. So the shared piece is only the appearance. Admin still has its own route group and its own auth guard, both untouched. The shared shell is a dumb visual wrapper that does not know or care whether it is showing the public site or admin. The seam is still there where it matters, it is just invisible now.
Then the editor. The markdown editor is CodeMirror, and I had never actually themed it, so it sat there in its default light look no matter what the rest of the site was doing. In dark mode it was a bright white box in the middle of a dark page. Not great. I gave it a proper theme in the site colours, but my first attempt only picked the theme once, when it loaded:
// wrong: theme is set once and never follows the light/dark toggle
new EditorView({ extensions: [markdown(), myTheme] });Flip the site to dark and the editor stayed stubbornly light. CodeMirror keeps its config inside the editor state, so you cannot just reassign a variable, you have to hand it a reconfigure. The fix is to put the theme in a Compartment and swap it whenever the site theme changes:
const themeComp = new Compartment();
// ...extensions: [markdown(), themeComp.of(lightTheme)]
view.dispatch({ effects: themeComp.reconfigure(isDark ? darkTheme : lightTheme) });Now it follows the toggle, dark editor in dark mode, and the writing surface is solid so the mountain does not show through the actual text box while I am typing in it. Which I am, right now, to write this.