fix success and critical color hover+active color

src/app/components/nav/styles.css.ts

@@ -49,7 +49,6 @@ const NavItemBase = style({
   display: 'flex',
   justifyContent: 'start',
   cursor: 'pointer',
-  backgroundColor: Container,
   color: OnContainer,
   outline: 'none',
   minHeight: toRem(36),

src/app/components/page/Page.tsx

@@ -14,7 +14,7 @@ export function PageRoot({ nav, children }: PageRootProps) {
   const screenSize = useScreenSizeContext();
 
   return (
-    <Box grow="Yes" className={ContainerColor({ variant: 'Background' })}>
+    <Box grow="Yes">
       {nav}
       {screenSize !== ScreenSize.Mobile && (
         <Line variant="Background" size="300" direction="Vertical" />
@@ -79,11 +79,11 @@ export function PageNavContent({
   );
 }
 
-export const Page = as<'div'>(({ className, ...props }, ref) => (
+export const Page = as<'div', css.PageVariants>(({ className, transparent, ...props }, ref) => (
   <Box
     grow="Yes"
     direction="Column"
-    className={classNames(ContainerColor({ variant: 'Surface' }), className)}
+    className={classNames(css.Page({ transparent }), className)}
     {...props}
     ref={ref}
   />

src/app/components/page/style.css.ts

@@ -1,6 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { DefaultReset, color, config, toRem } from 'folds';
+import { ContainerColor } from '../../styles/ContainerColor.css';
 
 export const PageNav = recipe({
   variants: {
@@ -59,6 +60,19 @@ export const PageNavContent = style({
   paddingBottom: config.space.S700,
 });
 
+export const Page = recipe({
+  base: [ContainerColor({ variant: 'Surface' })],
+  variants: {
+    transparent: {
+      true: {
+        background: 'transparent',
+      },
+    },
+  },
+});
+
+export type PageVariants = RecipeVariants<typeof Page>;
+
 export const PageHeader = recipe({
   base: {
     paddingLeft: config.space.S400,

src/app/components/sidebar/Sidebar.css.ts

@@ -1,13 +1,11 @@
 import { createVar, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { color, config, DefaultReset, Disabled, FocusOutline, toRem } from 'folds';
-import { ContainerColor } from '../../styles/ContainerColor.css';
 
 export const Sidebar = style([
   DefaultReset,
   {
     width: toRem(66),
-    backgroundColor: color.Background.Container,
     borderRight: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
 
     display: 'flex',
@@ -187,7 +185,6 @@ export type SidebarAvatarVariants = RecipeVariants<typeof SidebarAvatar>;
 
 export const SidebarFolder = recipe({
   base: [
-    ContainerColor({ variant: 'Background' }),
     {
       padding: config.space.S100,
       width: toRem(42),

src/app/components/splash-screen/SplashScreen.css.ts

@@ -3,7 +3,6 @@ import { color, config } from 'folds';
 
 export const SplashScreen = style({
   minHeight: '100%',
-  backgroundColor: color.Background.Container,
   color: color.Background.OnContainer,
 });
 

src/app/features/call-status/CallRoomName.tsx

@@ -36,6 +36,7 @@ export function CallRoomName({ room }: CallRoomNameProps) {
   return (
     <Chip
       variant="Background"
+      fill="None"
       radii="Pill"
       before={
         <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />

src/app/features/call-status/CallStatus.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import { Box, Spinner } from 'folds';
-import classNames from 'classnames';
 import { LiveChip } from './LiveChip';
 import * as css from './styles.css';
 import { CallRoomName } from './CallRoomName';
 import { CallControl } from './CallControl';
-import { ContainerColor } from '../../styles/ContainerColor.css';
 import { useCallMembers, useCallSession } from '../../hooks/useCall';
 import { ScreenSize, useScreenSize } from '../../hooks/useScreenSize';
 import { MemberGlance } from './MemberGlance';
@@ -33,7 +31,7 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
 
   return (
     <Box
-      className={classNames(css.CallStatus, ContainerColor({ variant: 'Background' }))}
+      className={css.CallStatus}
       shrink="No"
       gap="400"
       alignItems={compact ? undefined : 'Center'}

src/app/features/call/CallView.tsx

@@ -1,7 +1,6 @@
 import React, { RefObject, useRef } from 'react';
 import { Badge, Box, color, Header, Scroll, Text, toRem } from 'folds';
 import { useCallEmbed, useCallJoined, useCallEmbedPlacementSync } from '../../hooks/useCallEmbed';
-import { ContainerColor } from '../../styles/ContainerColor.css';
 import { PrescreenControls } from './PrescreenControls';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { useRoom } from '../../hooks/useRoom';
@@ -138,11 +137,7 @@ export function CallView() {
   const currentJoined = callEmbed?.roomId === room.roomId && callJoined;
 
   return (
-    <Box
+    <Box style={{ minWidth: toRem(280) }} grow="Yes">
-      className={ContainerColor({ variant: 'Surface' })}
-      style={{ minWidth: toRem(280) }}
-      grow="Yes"
-    >
       {!currentJoined && <CallPrescreen />}
       <CallJoined joined={currentJoined} containerRef={callContainerRef} />
     </Box>

src/app/features/create-room/CreateRoom.tsx

@@ -213,6 +213,7 @@ export function CreateRoomForm({
           <Text size="L400">Options</Text>
           <Box grow="Yes" justifyContent="End">
             <Chip
+              fill="None"
               radii="Pill"
               before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
               onClick={() => setAdvance(!advance)}

src/app/features/create-space/CreateSpace.tsx

@@ -180,6 +180,7 @@ export function CreateSpaceForm({ defaultAccess, space, onCreate }: CreateSpaceF
           <Box grow="Yes" justifyContent="End">
             <Chip
               radii="Pill"
+              fill="None"
               before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
               onClick={() => setAdvance(!advance)}
               type="button"

src/app/features/join-before-navigate/JoinBeforeNavigate.tsx

@@ -10,6 +10,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../components/BackRouteHandler';
+import { useTheme } from '../../hooks/useTheme';
 
 type JoinBeforeNavigateProps = { roomIdOrAlias: string; eventId?: string; viaServers?: string[] };
 export function JoinBeforeNavigate({
@@ -21,6 +22,7 @@ export function JoinBeforeNavigate({
   const allRooms = useAtomValue(allRoomsAtom);
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const screenSize = useScreenSizeContext();
+  const theme = useTheme();
 
   const handleView = (roomId: string) => {
     if (mx.getRoom(roomId)?.isSpaceRoom()) {
@@ -31,7 +33,7 @@ export function JoinBeforeNavigate({
   };
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <PageHeader balance>
         <Box grow="Yes" gap="200">
           <Box shrink="No">

src/app/features/lobby/Lobby.tsx

@@ -56,6 +56,7 @@ import { useGetRoom } from '../../hooks/useGetRoom';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
 import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
+import { useTheme } from '../../hooks/useTheme';
 
 const useCanDropLobbyItem = (
   space: Room,
@@ -151,6 +152,7 @@ const useCanDropLobbyItem = (
 export function Lobby() {
   const navigate = useNavigate();
   const mx = useMatrixClient();
+  const theme = useTheme();
   const mDirects = useAtomValue(mDirectAtom);
   const allRooms = useAtomValue(allRoomsAtom);
   const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
@@ -430,7 +432,7 @@ export function Lobby() {
   return (
     <PowerLevelsContextProvider value={spacePowerLevels}>
       <Box grow="Yes">
-        <Page>
+        <Page transparent={theme.flat}>
           <LobbyHeader
             showProfile={!onTop}
             powerLevels={roomsPowerLevels.get(space.roomId) ?? {}}

src/app/features/lobby/SpaceItem.tsx

@@ -64,6 +64,7 @@ function InaccessibleSpaceProfile({ roomId, suggested }: InaccessibleSpaceProfil
       as="span"
       className={css.HeaderChip}
       variant="Surface"
+      fill="None"
       size="500"
       before={
         <Avatar size="200" radii="300">
@@ -121,6 +122,7 @@ function UnjoinedSpaceProfile({
     <Chip
       className={css.HeaderChip}
       variant="Surface"
+      fill="None"
       size="500"
       onClick={join}
       disabled={!canJoin}
@@ -187,6 +189,7 @@ function SpaceProfile({
       onClick={handleClose}
       className={css.HeaderChip}
       variant="Surface"
+      fill="None"
       size="500"
       before={
         <Avatar size="200" radii="300">
@@ -230,6 +233,7 @@ function RootSpaceProfile({ closed, categoryId, handleClose }: RootSpaceProfileP
       onClick={handleClose}
       className={css.HeaderChip}
       variant="Surface"
+      fill="None"
       size="500"
       after={<Icon src={closed ? Icons.ChevronRight : Icons.ChevronBottom} size="50" />}
     >

src/app/features/room-nav/RoomNavCategoryButton.tsx

@@ -9,6 +9,7 @@ export const RoomNavCategoryButton = as<'button', { closed?: boolean }>(
       className={classNames(css.CategoryButton, className)}
       variant="Background"
       radii="Pill"
+      fill="None"
       before={
         <Icon
           className={css.CategoryButtonIcon}

src/app/features/room/CallChatView.tsx

@@ -6,9 +6,11 @@ import { Page, PageHeader } from '../../components/page';
 import { callChatAtom } from '../../state/callEmbed';
 import { RoomView } from './RoomView';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { useTheme } from '../../hooks/useTheme';
 
 export function CallChatView() {
   const { eventId } = useParams();
+  const theme = useTheme();
   const setChat = useSetAtom(callChatAtom);
   const screenSize = useScreenSizeContext();
 
@@ -16,6 +18,7 @@ export function CallChatView() {
 
   return (
     <Page
+      transparent={theme.flat}
       style={{
         width: screenSize === ScreenSize.Desktop ? toRem(456) : '100%',
         flexShrink: 0,
@@ -41,7 +44,7 @@ export function CallChatView() {
               }
             >
               {(triggerRef) => (
-                <IconButton ref={triggerRef} variant="Surface" onClick={handleClose}>
+                <IconButton ref={triggerRef} variant="Surface" fill="None" onClick={handleClose}>
                   <Icon src={Icons.Cross} />
                 </IconButton>
               )}

src/app/features/room/MembersDrawer.tsx

@@ -56,7 +56,6 @@ import { MembershipFilterMenu } from '../../components/MembershipFilterMenu';
 import { MemberSortMenu } from '../../components/MemberSortMenu';
 import { useOpenUserRoomProfile, useUserRoomProfileState } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
-import { ContainerColor } from '../../styles/ContainerColor.css';
 import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 
@@ -89,6 +88,7 @@ function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
               <IconButton
                 ref={triggerRef}
                 variant="Background"
+                fill="None"
                 onClick={() => setPeopleDrawer(false)}
               >
                 <Icon src={Icons.Cross} />
@@ -132,6 +132,7 @@ function MemberItem({
       aria-pressed={pressed}
       data-user-id={member.userId}
       variant="Background"
+      fill="None"
       radii="400"
       onClick={onClick}
       before={
@@ -245,11 +246,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
   };
 
   return (
-    <Box
+    <Box className={classNames(css.MembersDrawer)} shrink="No" direction="Column">
-      className={classNames(css.MembersDrawer, ContainerColor({ variant: 'Background' }))}
-      shrink="No"
-      direction="Column"
-    >
       <MemberDrawerHeader room={room} />
       <Box className={css.MemberDrawerContentBase} grow="Yes">
         <Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover" hideTrack>
@@ -279,6 +276,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                             )) as MouseEventHandler<HTMLButtonElement>
                         }
                         variant="Background"
+                        fill="None"
                         size="400"
                         radii="300"
                         before={<Icon src={Icons.Filter} size="50" />}
@@ -311,6 +309,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                             )) as MouseEventHandler<HTMLButtonElement>
                         }
                         variant="Background"
+                        fill="None"
                         size="400"
                         radii="300"
                         after={<Icon src={Icons.Sort} size="50" />}

src/app/features/room/Room.tsx

@@ -18,11 +18,14 @@ import { CallView } from '../call/CallView';
 import { RoomViewHeader } from './RoomViewHeader';
 import { callChatAtom } from '../../state/callEmbed';
 import { CallChatView } from './CallChatView';
+import { Page } from '../../components/page';
+import { useTheme } from '../../hooks/useTheme';
 
 export function Room() {
   const { eventId } = useParams();
   const room = useRoom();
   const mx = useMatrixClient();
+  const theme = useTheme();
 
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
@@ -49,20 +52,20 @@ export function Room() {
     <PowerLevelsContextProvider value={powerLevels}>
       <Box grow="Yes">
         {callView && (screenSize === ScreenSize.Desktop || !chat) && (
-          <Box grow="Yes" direction="Column">
+          <Page transparent={theme.flat}>
             <RoomViewHeader callView />
             <Box grow="Yes">
               <CallView />
             </Box>
-          </Box>
+          </Page>
         )}
         {!callView && (
-          <Box grow="Yes" direction="Column">
+          <Page transparent={theme.flat}>
             <RoomViewHeader />
             <Box grow="Yes">
               <RoomView eventId={eventId} />
             </Box>
-          </Box>
+          </Page>
         )}
 
         {callView && chat && (

src/app/features/room/RoomView.tsx

@@ -14,7 +14,6 @@ import { RoomViewTyping } from './RoomViewTyping';
 import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
 import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
-import { Page } from '../../components/page';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { editableActiveElement } from '../../utils/dom';
 import { settingsAtom } from '../../state/settings';
@@ -91,7 +90,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
   );
 
   return (
-    <Page ref={roomViewRef}>
+    <Box grow="Yes" direction="Column" ref={roomViewRef}>
       <Box grow="Yes" direction="Column">
         <RoomTimeline
           key={roomId}
@@ -135,6 +134,6 @@ export function RoomView({ eventId }: { eventId?: string }) {
         </div>
         {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
       </Box>
-    </Page>
+    </Box>
   );
 }

src/app/features/room/RoomViewFollowing.css.ts

@@ -16,8 +16,6 @@ export const RoomViewFollowing = recipe({
       minHeight: toRem(28),
       padding: `0 ${config.space.S400}`,
       width: '100%',
-      backgroundColor: color.Surface.Container,
-      color: color.Surface.OnContainer,
       outline: 'none',
     },
   ],

src/app/features/room/RoomViewHeader.tsx

@@ -66,7 +66,6 @@ import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
-import { ContainerColor } from '../../styles/ContainerColor.css';
 import { RoomSettingsPage } from '../../state/roomSettings';
 
 type RoomMenuProps = {
@@ -305,10 +304,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
   };
 
   return (
-    <PageHeader
+    <PageHeader balance={screenSize === ScreenSize.Mobile}>
-      className={ContainerColor({ variant: 'Surface' })}
-      balance={screenSize === ScreenSize.Mobile}
-    >
       <Box grow="Yes" gap="300">
         {screenSize === ScreenSize.Mobile && (
           <BackRouteHandler>

src/app/hooks/useTheme.ts

@@ -1,7 +1,6 @@
-import { lightTheme } from 'folds';
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
-import { butterTheme, darkTheme, silverTheme } from '../../colors.css';
+import { lightTheme, butterTheme, darkTheme, silverTheme, moonlightTheme } from '../../colors.css';
 import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';
 
@@ -14,6 +13,8 @@ export type Theme = {
   id: string;
   kind: ThemeKind;
   classNames: string[];
+  flat?: boolean;
+  gradient?: string;
 };
 
 export const LightTheme: Theme = {
@@ -25,21 +26,31 @@ export const LightTheme: Theme = {
 export const SilverTheme: Theme = {
   id: 'silver-theme',
   kind: ThemeKind.Light,
-  classNames: ['silver-theme', silverTheme, onLightFontWeight, 'prism-light'],
+  classNames: [silverTheme, onLightFontWeight, 'prism-light'],
 };
+
 export const DarkTheme: Theme = {
   id: 'dark-theme',
   kind: ThemeKind.Dark,
-  classNames: ['dark-theme', darkTheme, onDarkFontWeight, 'prism-dark'],
+  classNames: ['global-dark', darkTheme, onDarkFontWeight, 'prism-dark'],
 };
 export const ButterTheme: Theme = {
   id: 'butter-theme',
   kind: ThemeKind.Dark,
-  classNames: ['butter-theme', butterTheme, onDarkFontWeight, 'prism-dark'],
+  classNames: ['global-dark', butterTheme, onDarkFontWeight, 'prism-dark'],
+};
+export const MoonlightTheme: Theme = {
+  id: 'moonlight-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['global-dark', moonlightTheme, onDarkFontWeight, 'prism-dark'],
+  flat: true,
 };
 
 export const useThemes = (): Theme[] => {
-  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme], []);
+  const themes: Theme[] = useMemo(
+    () => [LightTheme, SilverTheme, DarkTheme, ButterTheme, MoonlightTheme],
+    []
+  );
 
   return themes;
 };
@@ -51,6 +62,7 @@ export const useThemeNames = (): Record<string, string> =>
       [SilverTheme.id]: 'Silver',
       [DarkTheme.id]: 'Dark',
       [ButterTheme.id]: 'Butter',
+      [MoonlightTheme.id]: 'Moonlight',
     }),
     []
   );

src/app/pages/ThemeManager.tsx

@@ -39,9 +39,9 @@ export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
     document.body.classList.add(...activeTheme.classNames);
 
     if (monochromeMode) {
-      document.body.style.filter = 'grayscale(1)';
+      document.body.style.setProperty('filter', 'grayscale(1)');
     } else {
-      document.body.style.filter = '';
+      document.body.style.removeProperty('filter');
     }
   }, [activeTheme, monochromeMode]);
 

src/app/pages/client/WelcomePage.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds';
 import { Page, PageHero, PageHeroSection } from '../../components/page';
 import CinnySVG from '../../../../public/res/svg/cinny.svg';
+import { useTheme } from '../../hooks/useTheme';
 
 export function WelcomePage() {
+  const theme = useTheme();
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <Box
         grow="Yes"
         style={{ padding: config.space.S400, paddingBottom: config.space.S700 }}

src/app/pages/client/create/Create.tsx

@@ -9,12 +9,14 @@ import {
 } from '../../../components/page';
 import { CreateSpaceForm } from '../../../features/create-space';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+import { useTheme } from '../../../hooks/useTheme';
 
 export function Create() {
   const { navigateSpace } = useRoomNavigate();
+  const theme = useTheme();
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <Box grow="Yes">
         <Scroll hideTrack visibility="Hover">
           <PageContent>

src/app/pages/client/direct/Direct.tsx

@@ -107,7 +107,12 @@ function DirectHeader() {
             </Text>
           </Box>
           <Box>
-            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+            <IconButton
+              aria-pressed={!!menuAnchor}
+              variant="Background"
+              fill="None"
+              onClick={handleOpenMenu}
+            >
               <Icon src={Icons.VerticalDots} size="200" />
             </IconButton>
           </Box>

src/app/pages/client/direct/DirectCreate.tsx

@@ -17,10 +17,12 @@ import {
 } from '../../../components/page';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 import { CreateChat } from '../../../features/create-chat';
+import { useTheme } from '../../../hooks/useTheme';
 
 export function DirectCreate() {
   const mx = useMatrixClient();
   const screenSize = useScreenSizeContext();
+  const theme = useTheme();
 
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
@@ -38,7 +40,7 @@ export function DirectCreate() {
   }, [mx, navigate, directs, userId]);
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       {screenSize === ScreenSize.Mobile && (
         <PageHeader balance outlined={false}>
           <Box grow="Yes" alignItems="Center" gap="200">

src/app/pages/client/explore/Featured.tsx

@@ -18,8 +18,10 @@ import * as css from './style.css';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { useTheme } from '../../../hooks/useTheme';
 
 export function FeaturedRooms() {
+  const theme = useTheme();
   const { featuredCommunities } = useClientConfig();
   const { rooms, spaces } = featuredCommunities ?? {};
   const allRooms = useAtomValue(allRoomsAtom);
@@ -27,7 +29,7 @@ export function FeaturedRooms() {
   const { navigateSpace, navigateRoom } = useRoomNavigate();
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       {screenSize === ScreenSize.Mobile && (
         <PageHeader>
           <Box shrink="No">

src/app/pages/client/explore/Server.tsx

@@ -45,6 +45,7 @@ import { getMxIdServer } from '../../../utils/matrix';
 import { stopPropagation } from '../../../utils/keyboard';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { useTheme } from '../../../hooks/useTheme';
 
 const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
   useMemo(
@@ -343,6 +344,7 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
 export function PublicRooms() {
   const { server } = useParams();
   const mx = useMatrixClient();
+  const theme = useTheme();
   const userId = mx.getUserId();
   const userServer = userId && getMxIdServer(userId);
   const allRooms = useAtomValue(allRoomsAtom);
@@ -469,7 +471,7 @@ export function PublicRooms() {
   };
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <PageHeader balance>
         {isSearch ? (
           <>

src/app/pages/client/home/CreateRoom.tsx

@@ -12,14 +12,16 @@ import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 import { CreateRoomForm } from '../../../features/create-room';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+import { useTheme } from '../../../hooks/useTheme';
 
 export function HomeCreateRoom() {
   const screenSize = useScreenSizeContext();
+  const theme = useTheme();
 
   const { navigateRoom } = useRoomNavigate();
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       {screenSize === ScreenSize.Mobile && (
         <PageHeader balance outlined={false}>
           <Box grow="Yes" alignItems="Center" gap="200">

src/app/pages/client/home/Home.tsx

@@ -121,7 +121,12 @@ function HomeHeader() {
             </Text>
           </Box>
           <Box>
-            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+            <IconButton
+              aria-pressed={!!menuAnchor}
+              variant="Background"
+              fill="None"
+              onClick={handleOpenMenu}
+            >
               <Icon src={Icons.VerticalDots} size="200" />
             </IconButton>
           </Box>

src/app/pages/client/home/Search.tsx

@@ -5,14 +5,16 @@ import { MessageSearch } from '../../../features/message-search';
 import { useHomeRooms } from './useHomeRooms';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { useTheme } from '../../../hooks/useTheme';
 
 export function HomeSearch() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const rooms = useHomeRooms();
   const screenSize = useScreenSizeContext();
+  const theme = useTheme();
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <PageHeader balance>
         <Box grow="Yes" alignItems="Center" gap="200">
           <Box grow="Yes" basis="No">

src/app/pages/client/inbox/Invites.tsx

@@ -67,6 +67,7 @@ import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
 import { useReportRoomSupported } from '../../../hooks/useReportRoomSupported';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
+import { useTheme } from '../../../hooks/useTheme';
 
 const COMPACT_CARD_WIDTH = 548;
 
@@ -693,6 +694,7 @@ function SpamInvites({
 
 export function Invites() {
   const mx = useMatrixClient();
+  const theme = useTheme();
   const useAuthentication = useMediaAuthentication();
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const allRooms = useAtomValue(allRoomsAtom);
@@ -746,7 +748,7 @@ export function Invites() {
   };
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <PageHeader balance>
         <Box grow="Yes" gap="200">
           <Box grow="Yes" basis="No">

src/app/pages/client/inbox/Notifications.tsx

@@ -563,6 +563,7 @@ const DEFAULT_REFRESH_MS = 7000;
 
 export function Notifications() {
   const mx = useMatrixClient();
+  const theme = useTheme();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
@@ -635,7 +636,7 @@ export function Notifications() {
   }, [timelineState, notificationTimeline, lastVItemIndex, loadTimeline]);
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <PageHeader balance>
         <Box grow="Yes" gap="200">
           <Box grow="Yes" basis="No">

src/app/pages/client/space/Search.tsx

@@ -11,9 +11,11 @@ import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { useTheme } from '../../../hooks/useTheme';
 
 export function SpaceSearch() {
   const mx = useMatrixClient();
+  const theme = useTheme();
   const scrollRef = useRef<HTMLDivElement>(null);
   const space = useSpace();
   const screenSize = useScreenSizeContext();
@@ -27,7 +29,7 @@ export function SpaceSearch() {
   );
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <PageHeader balance>
         <Box grow="Yes" alignItems="Center" gap="200">
           <Box grow="Yes" basis="No">

src/app/pages/client/space/Space.tsx

@@ -273,7 +273,12 @@ function SpaceHeader() {
             {joinRules?.join_rule !== JoinRule.Public && <Icon src={Icons.Lock} size="50" />}
           </Box>
           <Box shrink="No">
-            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+            <IconButton
+              aria-pressed={!!menuAnchor}
+              variant="Background"
+              fill="None"
+              onClick={handleOpenMenu}
+            >
               <Icon src={Icons.VerticalDots} size="200" />
             </IconButton>
           </Box>

src/app/styles/Patterns.css.ts

@@ -2,8 +2,8 @@ import { style } from '@vanilla-extract/css';
 import { color, toRem } from 'folds';
 
 export const BackgroundDotPattern = style({
-  backgroundImage: `radial-gradient(${color.Background.ContainerActive} ${toRem(2)}, ${
+  backgroundImage: `radial-gradient(${color.Background.ContainerActive} ${toRem(
-    color.Background.Container
+    2
-  } ${toRem(2)})`,
+  )}, transparent ${toRem(2)})`,
   backgroundSize: `${toRem(40)} ${toRem(40)}`,
 });

src/colors.css.ts

@@ -1,7 +1,115 @@
-import { createTheme } from '@vanilla-extract/css';
+import { createTheme, createThemeContract } from '@vanilla-extract/css';
 import { color } from 'folds';
 
-export const silverTheme = createTheme(color, {
+export const extendedColor = createThemeContract({
+  background: '',
+});
+
+const ThemeContract = {
+  ...extendedColor,
+  ...color,
+};
+
+export const lightTheme = createTheme(ThemeContract, {
+  background: '#F2F2F2',
+  Background: {
+    Container: '#F2F2F2',
+    ContainerHover: '#E5E5E5',
+    ContainerActive: '#D9D9D9',
+    ContainerLine: '#CCCCCC',
+    OnContainer: '#000000',
+  },
+
+  Surface: {
+    Container: '#FFFFFF',
+    ContainerHover: '#F2F2F2',
+    ContainerActive: '#E5E5E5',
+    ContainerLine: '#D9D9D9',
+    OnContainer: '#000000',
+  },
+
+  SurfaceVariant: {
+    Container: '#F2F2F2',
+    ContainerHover: '#E5E5E5',
+    ContainerActive: '#D9D9D9',
+    ContainerLine: '#CCCCCC',
+    OnContainer: '#000000',
+  },
+
+  Primary: {
+    Main: '#1858D5',
+    MainHover: '#164FC0',
+    MainActive: '#144BB5',
+    MainLine: '#1346AA',
+    OnMain: '#FFFFFF',
+    Container: '#E8EEFB',
+    ContainerHover: '#DCE6F9',
+    ContainerActive: '#D1DEF7',
+    ContainerLine: '#C5D5F5',
+    OnContainer: '#113E95',
+  },
+
+  Secondary: {
+    Main: '#000000',
+    MainHover: '#1A1A1A',
+    MainActive: '#262626',
+    MainLine: '#333333',
+    OnMain: '#FFFFFF',
+    Container: '#D9D9D9',
+    ContainerHover: '#CCCCCC',
+    ContainerActive: '#BFBFBF',
+    ContainerLine: '#B2B2B2',
+    OnContainer: '#0D0D0D',
+  },
+
+  Success: {
+    Main: '#00844C',
+    MainHover: '#007744',
+    MainActive: '#007041',
+    MainLine: '#006A3D',
+    OnMain: '#FFFFFF',
+    Container: '#E5F3ED',
+    ContainerHover: '#D9EDE4',
+    ContainerActive: '#CCE6DB',
+    ContainerLine: '#BFE0D2',
+    OnContainer: '#005C35',
+  },
+
+  Warning: {
+    Main: '#A85400',
+    MainHover: '#974C00',
+    MainActive: '#8F4700',
+    MainLine: '#864300',
+    OnMain: '#FFFFFF',
+    Container: '#F6EEE5',
+    ContainerHover: '#F2E5D9',
+    ContainerActive: '#EEDDCC',
+    ContainerLine: '#E9D4BF',
+    OnContainer: '#763B00',
+  },
+
+  Critical: {
+    Main: '#C40E0E',
+    MainHover: '#AC0909',
+    MainActive: '#A60C0C',
+    MainLine: '#9C0B0B',
+    OnMain: '#FFFFFF',
+    Container: '#F9E7E7',
+    ContainerHover: '#F6DBDB',
+    ContainerActive: '#F3CFCF',
+    ContainerLine: '#F0C3C3',
+    OnContainer: '#890A0A',
+  },
+
+  Other: {
+    FocusRing: 'rgba(0 0 0 / 50%)',
+    Shadow: 'rgba(0 0 0 / 20%)',
+    Overlay: 'rgba(0 0 0 / 50%)',
+  },
+});
+
+export const silverTheme = createTheme(ThemeContract, {
+  background: '#DEDEDE',
   Background: {
     Container: '#DEDEDE',
     ContainerHover: '#D3D3D3',
@@ -99,6 +207,7 @@ export const silverTheme = createTheme(color, {
 });
 
 const darkThemeData = {
+  background: color.Background.Container,
   Background: {
     Container: '#1A1A1A',
     ContainerHover: '#262626',
@@ -195,9 +304,9 @@ const darkThemeData = {
   },
 };
 
-export const darkTheme = createTheme(color, darkThemeData);
+export const darkTheme = createTheme(ThemeContract, darkThemeData);
 
-export const butterTheme = createTheme(color, {
+export const butterTheme = createTheme(ThemeContract, {
   ...darkThemeData,
   Background: {
     Container: '#1A1916',
@@ -236,3 +345,107 @@ export const butterTheme = createTheme(color, {
     OnContainer: '#F2EED3',
   },
 });
+
+export const moonlightTheme = createTheme(ThemeContract, {
+  background: 'linear-gradient(to top right, #000546, #000)',
+
+  Background: {
+    Container: '#000000',
+    ContainerHover: '#01032B',
+    ContainerActive: '#020546',
+    ContainerLine: '#030977',
+    OnContainer: '#EAEBFF',
+  },
+
+  Surface: {
+    Container: '#01032B',
+    ContainerHover: '#020546',
+    ContainerActive: '#03075E',
+    ContainerLine: '#030977',
+    OnContainer: '#EAEBFF',
+  },
+
+  SurfaceVariant: {
+    Container: '#020546',
+    ContainerHover: '#03075E',
+    ContainerActive: '#030977',
+    ContainerLine: '#030977',
+    OnContainer: '#EAEBFF',
+  },
+
+  Primary: {
+    Main: '#0043FF',
+    MainHover: '#1A56FF',
+    MainActive: '#3369FF',
+    MainLine: '#4D7BFF',
+    OnMain: '#FFFFFF',
+
+    Container: '#00144D',
+    ContainerHover: '#001B66',
+    ContainerActive: '#002180',
+    ContainerLine: '#002899',
+    OnContainer: '#FFFFFF',
+  },
+
+  Secondary: {
+    Main: '#E5E7FF',
+    MainHover: '#CCCFFF',
+    MainActive: '#B2B6FF',
+    MainLine: '#999EFF',
+    OnMain: '#000000',
+
+    Container: '#030763',
+    ContainerHover: '#04097C',
+    ContainerActive: '#050B94',
+    ContainerLine: '#050CAD',
+    OnContainer: '#FFFFFF',
+  },
+
+  Success: {
+    Main: '#00FF95',
+    MainHover: '#00E586',
+    MainActive: '#00CC77',
+    MainLine: '#4DFFB5',
+    OnMain: '#0B2E22',
+
+    Container: '#004D3B',
+    ContainerHover: '#00664F',
+    ContainerActive: '#008062',
+    ContainerLine: '#008062',
+    OnContainer: '#CCF2E2',
+  },
+
+  Warning: {
+    Main: '#FF9933',
+    MainHover: '#FFA64D',
+    MainActive: '#FFB266',
+    MainLine: '#FFBF80',
+    OnMain: '#000000',
+
+    Container: '#4D2600',
+    ContainerHover: '#663200',
+    ContainerActive: '#803F00',
+    ContainerLine: '#994C00',
+    OnContainer: '#F3E2D1',
+  },
+
+  Critical: {
+    Main: '#FF0000',
+    MainHover: '#E50000',
+    MainActive: '#CC0000',
+    MainLine: '#FF4D4D',
+    OnMain: '#ffffff',
+
+    Container: '#4D0000',
+    ContainerHover: '#660000',
+    ContainerActive: '#800000',
+    ContainerLine: '#990000',
+    OnContainer: '#F5D6D6',
+  },
+
+  Other: {
+    FocusRing: 'hsla(237, 100%, 70%, 0.6)',
+    Shadow: 'rgba(0, 0, 0, 0.9)',
+    Overlay: 'rgba(0, 0, 0, 0.8)',
+  },
+});

src/index.css

@@ -22,8 +22,7 @@
   --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
 }
 
-.dark-theme,
+.global-dark {
-.butter-theme {
   --tc-link: hsl(213deg 100% 80%);
 
   --mx-uc-1: hsl(208, 100%, 75%);

src/index.css.ts

@@ -0,0 +1,10 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { color } from 'folds';
+import { extendedColor } from './colors.css';
+
+globalStyle('body', {
+  background: extendedColor.background,
+  borderColor: color.Background.ContainerLine,
+  outlineColor: color.Background.ContainerLine,
+  color: color.Background.OnContainer,
+});

src/index.tsx

@@ -5,6 +5,7 @@ import { enableMapSet } from 'immer';
 import '@fontsource/inter/variable.css';
 import 'folds/dist/style.css';
 import { configClass, varsClass } from 'folds';
+import './index.css.ts';
 
 enableMapSet();