move tsx and theme to css variables part1

2021-08-31 13:58:34 +10:00 · 2021-08-31 13:58:34 +10:00 · 350f00283b
parent 62764d25f6
commit 350f00283b
46 changed files with 304 additions and 438 deletions
--- a/ts/components/CaptionEditor.tsx
+++ b/ts/components/CaptionEditor.tsx
@ -7,7 +7,6 @@ import { AttachmentType } from '../types/Attachment';

 import { SessionInput } from './session/SessionInput';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './session/SessionButton';
-import { darkTheme } from '../state/ducks/SessionTheme';
 import autoBind from 'auto-bind';

 interface Props {
@ -97,7 +96,6 @@ export class CaptionEditor extends React.Component<Props, State> {
              onValueChanged={this.onChange}
              onEnterPressed={this.onSave}
              value={caption}
-              theme={darkTheme}
            />
            <SessionButton
              text={window.i18n('save')}
--- a/ts/components/ConversationListItem.tsx
+++ b/ts/components/ConversationListItem.tsx
@ -13,7 +13,7 @@ import { ConversationAvatar } from './session/usingClosedConversationDetails';
 import { MemoConversationListItemContextMenu } from './session/menu/ConversationListItemContextMenu';
 import { createPortal } from 'react-dom';
 import { OutgoingMessageStatus } from './conversation/message/OutgoingMessageStatus';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 import { PubKey } from '../session/types';
 import {
  LastMessageType,
@ -72,7 +72,6 @@ const HeaderItem = (props: {
    name,
    currentNotificationSetting,
  } = props;
-  const theme = useTheme();

  let atSymbol = null;
  let unreadCountDiv = null;
@ -85,7 +84,7 @@ const HeaderItem = (props: {

  const pinIcon =
    isMessagesSection && isPinned ? (
-      <SessionIcon iconType="pin" iconColor={theme.colors.textColorSubtle} iconSize={'tiny'} />
+      <SessionIcon iconType="pin" iconColor={'var(--text-color-subtle)'} iconSize={'tiny'} />
    ) : null;

  const NotificationSettingIcon = () => {
@ -98,11 +97,11 @@ const HeaderItem = (props: {
        return null;
      case 'disabled':
        return (
-          <SessionIcon iconType="mute" iconColor={theme.colors.textColorSubtle} iconSize={'tiny'} />
+          <SessionIcon iconType="mute" iconColor={'var(--text-color-subtle)'} iconSize={'tiny'} />
        );
      case 'mentions_only':
        return (
-          <SessionIcon iconType="bell" iconColor={theme.colors.textColorSubtle} iconSize={'tiny'} />
+          <SessionIcon iconType="bell" iconColor={'var(--text-color-subtle)'} iconSize={'tiny'} />
        );
      default:
        return null;
--- a/ts/components/LeftPane.tsx
+++ b/ts/components/LeftPane.tsx
@ -11,7 +11,6 @@ import { useSelector } from 'react-redux';
 import { getLeftPaneLists } from '../state/selectors/conversations';
 import { getQuery, getSearchResults, isSearching } from '../state/selectors/search';
 import { SectionType } from '../state/ducks/section';
-import { getTheme } from '../state/selectors/theme';

 // from https://github.com/bvaughn/react-virtualized/blob/fb3484ed5dcc41bffae8eab029126c0fb8f7abc0/source/List/types.js#L5
 export type RowRendererParamsType = {
@ -63,10 +62,8 @@ const LeftPaneSection = () => {
 };

 export const LeftPane = () => {
-  const theme = useSelector(getTheme);
-
  return (
-    <SessionTheme theme={theme}>
+    <SessionTheme>
      <div className="module-left-pane-session">
        <ActionsPanel />

--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@ -8,12 +8,10 @@ import * as GoogleChrome from '../util/GoogleChrome';
 import * as MIME from '../types/MIME';
 import { SessionIconButton, SessionIconType } from './session/icon';
 import { Flex } from './basic/Flex';
-import { DefaultTheme } from 'styled-components';
 // useCss has some issues on our setup. so import it directly
 // tslint:disable-next-line: no-submodule-imports
 import useUnmount from 'react-use/lib/useUnmount';
 import { useEncryptedFileFetch } from '../hooks/useEncryptedFileFetch';
-import { darkTheme } from '../state/ducks/SessionTheme';
 import { useDispatch } from 'react-redux';
 import { showLightBox } from '../state/ducks/conversations';

@ -132,10 +130,9 @@ interface IconButtonProps {
  onClick?: () => void;
  style?: React.CSSProperties;
  type: 'save' | 'close' | 'previous' | 'next';
-  theme: DefaultTheme;
 }

-const IconButton = ({ onClick, type, theme }: IconButtonProps) => {
+const IconButton = ({ onClick, type }: IconButtonProps) => {
  const clickHandler = (_event: React.MouseEvent<HTMLAnchorElement>): void => {
    if (!onClick) {
      return;
@ -171,7 +168,6 @@ const IconButton = ({ onClick, type, theme }: IconButtonProps) => {
      // the lightbox has a dark background
      iconColor="white"
      onClick={clickHandler}
-      theme={theme}
    />
  );
 };
@ -275,7 +271,7 @@ export const Lightbox = (props: Props) => {
  const videoRef = useRef<any>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  // there is no theme in use on the lightbox
-  const theme = darkTheme;
+  // const theme = darkTheme;
  const dispatch = useDispatch();
  const { caption, contentType, objectURL, onNext, onPrevious, onSave } = props;

@ -320,26 +316,19 @@ export const Lightbox = (props: Props) => {
              onClick={() => {
                dispatch(showLightBox(undefined));
              }}
-              theme={theme}
            />
          </Flex>

-          {onSave ? (
-            <IconButton type="save" onClick={onSave} style={styles.saveButton} theme={theme} />
-          ) : null}
+          {onSave ? <IconButton type="save" onClick={onSave} style={styles.saveButton} /> : null}
        </div>
      </div>
      <div style={styles.navigationContainer as any}>
        {onPrevious ? (
-          <IconButton type="previous" onClick={onPrevious} theme={theme} />
-        ) : (
-          <IconButtonPlaceholder />
-        )}
-        {onNext ? (
-          <IconButton type="next" onClick={onNext} theme={theme} />
+          <IconButton type="previous" onClick={onPrevious} />
        ) : (
          <IconButtonPlaceholder />
        )}
+        {onNext ? <IconButton type="next" onClick={onNext} /> : <IconButtonPlaceholder />}
      </div>
    </div>
  );
--- a/ts/components/basic/PillContainer.tsx
+++ b/ts/components/basic/PillContainer.tsx
@ -42,10 +42,10 @@ const StyledPillInner = styled.div<PillContainerProps>`
  margin: ${props => props.margin || ''};
  border-radius: 300px;
  cursor: pointer;
-  border: 1px solid ${props => props.theme.colors.pillDividerColor};
-  transition: ${props => props.theme.common.animations.defaultDuration};
+  border: 1px solid var(--color-pill-divider);
+  transition: var(--default-duration);
  &:hover {
-    background: ${props => props.theme.colors.clickableHovered};
+    background: var(--color-clickable-hovered);
  }
 `;

--- a/ts/components/basic/Text.tsx
+++ b/ts/components/basic/Text.tsx
@ -1,28 +1,21 @@
 import React from 'react';
-import styled, { DefaultTheme } from 'styled-components';
+import styled from 'styled-components';

 type TextProps = {
  text: string;
  subtle?: boolean;
-  opposite?: boolean;
  maxWidth?: string;
  padding?: string;
  textAlign?: 'center';
-  theme?: DefaultTheme;
 };

 const StyledDefaultText = styled.div<TextProps>`
-  transition: ${props => props.theme.common.animations.defaultDuration};
+  transition: var(--default-duration);
  max-width: ${props => (props.maxWidth ? props.maxWidth : '')};
  padding: ${props => (props.padding ? props.padding : '')};
  text-align: ${props => (props.textAlign ? props.textAlign : '')};
-  font-family: ${props => props.theme.common.fonts.sessionFontDefault};
-  color: ${props =>
-    props.opposite
-      ? props.theme.colors.textColorOpposite
-      : props.subtle
-      ? props.theme.colors.textColorSubtle
-      : props.theme.colors.textColor};
+  font-family: var(--font-default);
+  color: ${props => (props.subtle ? 'var(--color-text-color-subtle)' : 'var(--color-text-color)')};
 `;

 export const Text = (props: TextProps) => {
@ -31,18 +24,17 @@ export const Text = (props: TextProps) => {

 type SpacerProps = {
  size: 'lg' | 'md' | 'sm' | 'xs';
-  theme?: DefaultTheme;
 };

 const SpacerStyled = styled.div<SpacerProps>`
  height: ${props =>
    props.size === 'lg'
-      ? props.theme.common.margins.lg
+      ? 'var(--margins-lg)'
      : props.size === 'md'
-      ? props.theme.common.margins.md
+      ? 'var(--margins-nd)'
      : props.size === 'sm'
-      ? props.theme.common.margins.sm
-      : props.theme.common.margins.xs};
+      ? 'var(--margins-sm)'
+      : 'var(--margins-xs)'};
 `;

 const Spacer = (props: SpacerProps) => {
@ -66,15 +58,12 @@ export const SpacerXS = () => {

 type H3Props = {
  text: string;
-  opposite?: boolean;
 };

 const StyledH3 = styled.div<H3Props>`
-  transition: ${props => props.theme.common.animations.defaultDuration};
-  font-family: ${props => props.theme.common.fonts.sessionFontDefault};
-  color: ${props =>
-    props.opposite ? props.theme.colors.textColorOpposite : props.theme.colors.textColor};
-  font-size: ${props => props.theme.common.fonts.md};
+  transition: var(--default-duration);
+  font-family: var(--font-default);
+  font-size: var(--font-size-md);
  font-weight: 700;
 `;

--- a/ts/components/conversation/DataExtractionNotification.tsx
+++ b/ts/components/conversation/DataExtractionNotification.tsx
@ -1,5 +1,4 @@
 import React from 'react';
-import { useTheme } from 'styled-components';
 import { PropsForDataExtractionNotification } from '../../models/messageType';
 import { SignalService } from '../../protobuf';
 import { Flex } from '../basic/Flex';
@ -8,7 +7,6 @@ import { SpacerXS, Text } from '../basic/Text';
 import { ReadableMessage } from './ReadableMessage';

 export const DataExtractionNotification = (props: PropsForDataExtractionNotification) => {
-  const theme = useTheme();
  const { name, type, source, messageId, isUnread, receivedAt } = props;

  let contentText: string;
@ -29,10 +27,10 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
        container={true}
        flexDirection="column"
        alignItems="center"
-        margin={theme.common.margins.sm}
+        margin={'var(--margins-sm)'}
        id={`msg-${messageId}`}
      >
-        <SessionIcon iconType="upload" theme={theme} iconSize={'small'} iconRotation={180} />
+        <SessionIcon iconType="upload" iconSize={'small'} iconRotation={180} />
        <SpacerXS />
        <Text text={contentText} subtle={true} />
      </Flex>
--- a/ts/components/conversation/ExpireTimer.tsx
+++ b/ts/components/conversation/ExpireTimer.tsx
@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';

 import { getTimerBucketIcon } from '../../util/timer';
 import { useInterval } from '../../hooks/useInterval';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 import { SessionIcon } from '../session/icon';

 type Props = {
@ -30,7 +30,7 @@ const ExpireTimerBucket = styled.div`
  letter-spacing: 0.3px;
  text-transform: uppercase;
  user-select: none;
-  color: ${props => props.theme.colors.textColor};
+  color: var(--color-text);
 `;

 export const ExpireTimer = (props: Props) => {
@ -38,7 +38,6 @@ export const ExpireTimer = (props: Props) => {

  const initialTimeLeft = Math.max(Math.round(((expirationTimestamp || 0) - Date.now()) / 1000), 0);
  const [timeLeft, setTimeLeft] = useState(initialTimeLeft);
-  const theme = useTheme();

  const update = useCallback(() => {
    if (expirationTimestamp) {
@ -56,7 +55,7 @@ export const ExpireTimer = (props: Props) => {
    return null;
  }

-  const expireTimerColor = theme.colors.textColor;
+  const expireTimerColor = 'var(--color-text-color)';

  if (timeLeft <= 60) {
    return <ExpireTimerCount color={expireTimerColor}>{timeLeft}</ExpireTimerCount>;
@ -65,7 +64,7 @@ export const ExpireTimer = (props: Props) => {

  return (
    <ExpireTimerBucket>
-      <SessionIcon iconType={bucket} iconSize={'tiny'} iconColor={expireTimerColor} theme={theme} />
+      <SessionIcon iconType={bucket} iconSize={'tiny'} iconColor={expireTimerColor} />
    </ExpireTimerBucket>
  );
 };
--- a/ts/components/conversation/GroupInvitation.tsx
+++ b/ts/components/conversation/GroupInvitation.tsx
@ -1,14 +1,12 @@
 import React from 'react';
 import classNames from 'classnames';
 import { SessionIconButton } from '../session/icon';
-import { useTheme } from 'styled-components';
 import { PropsForGroupInvitation } from '../../state/ducks/conversations';
 import { acceptOpenGroupInvitation } from '../../interactions/messageInteractions';
 import { ReadableMessage } from './ReadableMessage';

 export const GroupInvitation = (props: PropsForGroupInvitation) => {
  const { messageId, receivedAt, isUnread } = props;
-  const theme = useTheme();
  const classes = ['group-invitation'];

  if (props.direction === 'outgoing') {
@ -28,8 +26,7 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
          <div className="contents">
            <SessionIconButton
              iconType="plus"
-              iconColor={theme.colors.accent}
-              theme={theme}
+              iconColor={'var(--color-accent)'}
              iconSize={'large'}
              onClick={() => {
                acceptOpenGroupInvitation(props.acceptUrl, props.serverName);
--- a/ts/components/conversation/H5AudioPlayer.tsx
+++ b/ts/components/conversation/H5AudioPlayer.tsx
@ -2,7 +2,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import H5AudioPlayer, { RHAP_UI } from 'react-h5-audio-player';
 import { useDispatch, useSelector } from 'react-redux';
-import { useTheme } from 'styled-components';
 import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
 import { setNextMessageToPlayId } from '../../state/ducks/conversations';
 import {
@ -18,8 +17,6 @@ export const AudioPlayerWithEncryptedFile = (props: {
  contentType: string;
  messageId: string;
 }) => {
-  const theme = useTheme();
-
  const dispatch = useDispatch();
  const [playbackSpeed, setPlaybackSpeed] = useState(1.0);
  const { urlToLoad } = useEncryptedFileFetch(props.src, props.contentType);
@ -97,7 +94,6 @@ export const AudioPlayerWithEncryptedFile = (props: {
        <div className="speedButton" key="togglePlaybackSpeed">
          <SessionButton
            text={`${playbackSpeed}x`}
-            theme={theme}
            onClick={() => {
              setPlaybackSpeed(playbackSpeed === 1 ? 1.5 : 1);
            }}
@ -111,16 +107,14 @@ export const AudioPlayerWithEncryptedFile = (props: {
          <SessionIcon
            iconType="play"
            iconSize={'small'}
-            iconColor={theme.colors.textColorSubtle}
-            theme={theme}
+            iconColor={'var(--color-text-color-subtle)'}
          />
        ),
        pause: (
          <SessionIcon
            iconType="pause"
            iconSize={'small'}
-            iconColor={theme.colors.textColorSubtle}
-            theme={theme}
+            iconColor={'var(--color-text-color-subtle)'}
          />
        ),
      }}
--- a/ts/components/conversation/Timestamp.tsx
+++ b/ts/components/conversation/Timestamp.tsx
@ -25,7 +25,7 @@ const TimestampContainerListItem = styled.div`
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
-  color: ${props => props.theme.colors.textColor};
+  color: var(--color-text);
 `;

 const TimestampContainerNotListItem = styled.div`
@ -34,7 +34,7 @@ const TimestampContainerNotListItem = styled.div`
  letter-spacing: 0.3px;
  text-transform: uppercase;
  user-select: none;
-  color: ${props => props.theme.colors.textColor};
+  color: var(--color-text);
 `;

 export const Timestamp = (props: Props) => {
--- a/ts/components/conversation/TypingBubble.tsx
+++ b/ts/components/conversation/TypingBubble.tsx
@ -17,7 +17,7 @@ const TypingBubbleContainer = styled.div<TypingBubbleProps>`
  display: flow-root;
  padding-bottom: ${props => (props.isTyping ? '4px' : '0px')};
  padding-top: ${props => (props.isTyping ? '4px' : '0px')};
-  transition: ${props => props.theme.common.animations.defaultDuration};
+  transition: var(--default-duration);
  padding-inline-end: 16px;
  padding-inline-start: 4px;
  overflow: hidden;
--- a/ts/components/conversation/message/ClickToTrustSender.tsx
+++ b/ts/components/conversation/message/ClickToTrustSender.tsx
@ -8,14 +8,14 @@ import { SessionIcon } from '../../session/icon';
 import { SessionButtonColor } from '../../session/SessionButton';

 const StyledTrustSenderUI = styled.div`
-  padding: '${props => props.theme.common.margins.md}px';
+  padding: 'var(--margins-md)';
  display: flex;
  align-items: center;
 `;

 const ClickToDownload = styled.div`
  cursor: pointer;
-  padding: ${props => props.theme.common.margins.xs} ${props => props.theme.common.margins.md};
+  padding: var(--margins-xs) var(--margins-md);
 `;

 export const ClickToTrustSender = (props: { messageId: string }) => {
--- a/ts/components/conversation/message/DateBreak.tsx
+++ b/ts/components/conversation/message/DateBreak.tsx
@ -12,7 +12,7 @@ const DateBreakText = styled.div`
  font-weight: bold;
  text-align: center;

-  color: ${props => props.theme.colors.lastSeenIndicatorTextColor};
+  color: var(--color-last-seen-indicator-text);
 `;

 export const MessageDateBreak = (props: { timestamp: number; messageId: string }) => {
--- a/ts/components/conversation/message/OutgoingMessageStatus.tsx
+++ b/ts/components/conversation/message/OutgoingMessageStatus.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 import { MessageDeliveryStatus } from '../../../models/messageType';
 import { SessionIcon } from '../../session/icon';

@ -10,7 +10,7 @@ const MessageStatusSendingContainer = styled.div`
 `;

 const MessageStatusSending = () => {
-  const iconColor = useTheme().colors.textColor;
+  const iconColor = 'var(--color-text)';
  return (
    <MessageStatusSendingContainer>
      <SessionIcon rotateDuration={2} iconColor={iconColor} iconType="sending" iconSize={'tiny'} />
@ -19,7 +19,7 @@ const MessageStatusSending = () => {
 };

 const MessageStatusSent = () => {
-  const iconColor = useTheme().colors.textColor;
+  const iconColor = 'var(--color-text)';

  return (
    <MessageStatusSendingContainer>
@ -29,7 +29,7 @@ const MessageStatusSent = () => {
 };

 const MessageStatusRead = () => {
-  const iconColor = useTheme().colors.textColor;
+  const iconColor = 'var(--color-text)';

  return (
    <MessageStatusSendingContainer>
@ -39,10 +39,9 @@ const MessageStatusRead = () => {
 };

 const MessageStatusError = () => {
-  const theme = useTheme();
  return (
    <MessageStatusSendingContainer title={window.i18n('sendFailed')}>
-      <SessionIcon iconColor={theme.colors.destructive} iconType="error" iconSize={'tiny'} />
+      <SessionIcon iconColor={'var(--color-destructibe'} iconType="error" iconSize={'tiny'} />
    </MessageStatusSendingContainer>
  );
 };
--- a/ts/components/dialog/OnionStatusPathDialog.tsx
+++ b/ts/components/dialog/OnionStatusPathDialog.tsx
@ -7,7 +7,6 @@ import { useDispatch, useSelector } from 'react-redux';

 import ip2country from 'ip2country';
 import countryLookup from 'country-code-lookup';
-import { useTheme } from 'styled-components';
 import { Snode } from '../../data/data';
 import { onionPathModal } from '../../state/ducks/modalDialog';
 import {
@ -16,7 +15,6 @@ import {
  getIsOnline,
  getOnionPathsCount,
 } from '../../state/selectors/onions';
-import { getTheme } from '../../state/selectors/theme';
 import { Flex } from '../basic/Flex';
 import { SessionIcon, SessionIconButton } from '../session/icon';
 import { SessionSpinner } from '../session/SessionSpinner';
@ -98,13 +96,12 @@ export type OnionNodeStatusLightType = {
 */
 export const OnionNodeStatusLight = (props: OnionNodeStatusLightType): JSX.Element => {
  const { glowStartDelay, glowDuration } = props;
-  const theme = useTheme();

  return (
    <ModalStatusLight
      glowDuration={glowDuration}
      glowStartDelay={glowStartDelay}
-      color={theme.colors.accent}
+      color={'var(--color-accent)'}
    />
  );
 };
@ -114,7 +111,6 @@ export const OnionNodeStatusLight = (props: OnionNodeStatusLightType): JSX.Eleme
 */
 export const ModalStatusLight = (props: StatusLightType) => {
  const { glowStartDelay, glowDuration, color } = props;
-  const theme = useSelector(getTheme);

  return (
    <div className="onion__growing-icon">
@ -125,7 +121,6 @@ export const ModalStatusLight = (props: StatusLightType) => {
        glowStartDelay={glowStartDelay}
        iconType="circle"
        iconSize={'tiny'}
-        theme={theme}
      />
    </div>
  );
@ -140,15 +135,14 @@ export const ActionPanelOnionStatusLight = (props: {
 }) => {
  const { isSelected, handleClick } = props;

-  const theme = useTheme();
  const onionPathsCount = useSelector(getOnionPathsCount);
  const firstPathLength = useSelector(getFirstOnionPathLength);
  const isOnline = useSelector(getIsOnline);

  // Set icon color based on result
-  const red = theme.colors.destructive;
-  const green = theme.colors.accent;
-  const orange = theme.colors.warning;
+  const red = 'var(--color-destructive)';
+  const green = 'var(--color-accent)';
+  const orange = 'var(--color-warning)';

  // start with red
  let iconColor = red;
@ -167,7 +161,6 @@ export const ActionPanelOnionStatusLight = (props: {
      glowStartDelay={0}
      noScale={true}
      isSelected={isSelected}
-      theme={theme}
    />
  );
 };
--- a/ts/components/dialog/SessionConfirm.tsx
+++ b/ts/components/dialog/SessionConfirm.tsx
@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { SessionButton, SessionButtonColor } from '../session/SessionButton';
 import { SessionHtmlRenderer } from '../session/SessionHTMLRenderer';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';
-import { DefaultTheme, useTheme, withTheme } from 'styled-components';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { SpacerLG } from '../basic/Text';
@ -24,12 +23,11 @@ export interface SessionConfirmDialogProps {
  closeTheme?: SessionButtonColor;
  sessionIcon?: SessionIconType;
  iconSize?: SessionIconSize;
-  theme?: DefaultTheme;
  shouldShowConfirm?: boolean | undefined;
  showExitIcon?: boolean | undefined;
 }

-const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
+export const SessionConfirm = (props: SessionConfirmDialogProps) => {
  const {
    title = '',
    message = '',
@ -52,8 +50,6 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
  const cancelText = props.cancelText || window.i18n('cancel');
  const showHeader = !!props.title;

-  const theme = useTheme();
-
  const messageSubText = messageSub ? 'session-confirm-main-message' : 'subtle';

  const onClickOkHandler = async () => {
@ -102,7 +98,7 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
      <div className="session-modal__centered">
        {sessionIcon && iconSize && (
          <>
-            <SessionIcon iconType={sessionIcon} iconSize={iconSize} theme={theme} />
+            <SessionIcon iconType={sessionIcon} iconSize={iconSize} />
            <SpacerLG />
          </>
        )}
@ -130,5 +126,3 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
    </SessionWrapperModal>
  );
 };
-
-export const SessionConfirm = withTheme(SessionConfirmInner);
--- a/ts/components/dialog/SessionModal.tsx
+++ b/ts/components/dialog/SessionModal.tsx
@ -1,7 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';

-import { DefaultTheme } from 'styled-components';
 import { SessionIconButton, SessionIconType } from '../session/icon';
 import { SessionButtonColor, SessionButtonType } from '../session/SessionButton';

@ -23,7 +22,6 @@ interface Props {
    text: string;
    onClick?: any;
  }>;
-  theme: DefaultTheme;
 }

 interface State {
@ -81,12 +79,7 @@ export class SessionModal extends React.PureComponent<Props, State> {
            <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
              <div className="session-modal__header__close">
                {showExitIcon ? (
-                  <SessionIconButton
-                    iconType="exit"
-                    iconSize={'small'}
-                    onClick={this.close}
-                    theme={this.props.theme}
-                  />
+                  <SessionIconButton iconType="exit" iconSize={'small'} onClick={this.close} />
                ) : null}
              </div>
              <div className="session-modal__header__title">{title}</div>
@ -100,7 +93,6 @@ export class SessionModal extends React.PureComponent<Props, State> {
                          iconSize={'large'}
                          iconRotation={iconItem.iconRotation}
                          onClick={iconItem.onClick}
-                          theme={this.props.theme}
                        />
                      );
                    })
--- a/ts/components/session/ActionsPanel.tsx
+++ b/ts/components/session/ActionsPanel.tsx
@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { SessionIconButton, SessionIconType } from './icon';
 import { Avatar, AvatarSize } from '../Avatar';
-import { darkTheme, lightTheme } from '../../state/ducks/SessionTheme';
 import { SessionToastContainer } from './SessionToastContainer';
 import { getConversationController } from '../../session/conversations';
 import { syncConfigurationIfNeeded } from '../../session/utils/syncUtils';
@ -23,7 +22,6 @@ import {
  getOurPrimaryConversation,
  getUnreadMessageCount,
 } from '../../state/selectors/conversations';
-import { getTheme } from '../../state/selectors/theme';
 import { applyTheme } from '../../state/ducks/theme';
 import { getFocusedSection } from '../../state/selectors/section';
 import { useInterval } from '../../hooks/useInterval';
@ -48,7 +46,6 @@ import { ActionPanelOnionStatusLight } from '../dialog/OnionStatusPathDialog';
 const Section = (props: { type: SectionType; avatarPath?: string | null }) => {
  const ourNumber = useSelector(getOurNumber);
  const unreadMessageCount = useSelector(getUnreadMessageCount);
-  const theme = useSelector(getTheme);
  const dispatch = useDispatch();
  const { type, avatarPath } = props;

@ -64,7 +61,7 @@ const Section = (props: { type: SectionType; avatarPath?: string | null }) => {
      const updatedTheme = themeFromSettings === 'dark' ? 'light' : 'dark';
      window.setTheme(updatedTheme);

-      const newThemeObject = updatedTheme === 'dark' ? darkTheme : lightTheme;
+      const newThemeObject = updatedTheme === 'dark' ? 'dark' : 'light';
      dispatch(applyTheme(newThemeObject));
    } else if (type === SectionType.PathIndicator) {
      // Show Path Indicator Modal
@ -124,7 +121,6 @@ const Section = (props: { type: SectionType; avatarPath?: string | null }) => {
          notificationCount={unreadToShow}
          onClick={handleClick}
          isSelected={isSelected}
-          theme={theme}
        />
      )}
    </>
@ -137,7 +133,7 @@ const setupTheme = () => {
  const theme = window.Events.getThemeSetting();
  window.setTheme(theme);

-  const newThemeObject = theme === 'dark' ? darkTheme : lightTheme;
+  const newThemeObject = theme === 'dark' ? 'dark' : 'light';
  window?.inboxStore?.dispatch(applyTheme(newThemeObject));
 };

--- a/ts/components/session/LeftPaneSectionHeader.tsx
+++ b/ts/components/session/LeftPaneSectionHeader.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { SessionIcon, SessionIconType } from './icon';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 import { SessionButton, SessionButtonType } from './SessionButton';
 import { useDispatch, useSelector } from 'react-redux';
 import { disableRecoveryPhrasePrompt } from '../../state/ducks/userConfig';
@ -47,7 +47,6 @@ type Props = {

 export const LeftPaneSectionHeader = (props: Props) => {
  const { label, buttonIcon, buttonClicked } = props;
-  const theme = useTheme();
  const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt);

  return (
@ -56,7 +55,7 @@ export const LeftPaneSectionHeader = (props: Props) => {
        {label && <Tab label={label} type={0} isSelected={true} key={label} />}
        {buttonIcon && (
          <SessionButton onClick={buttonClicked} key="compose">
-            <SessionIcon iconType={buttonIcon} iconSize={'small'} iconColor="white" theme={theme} />
+            <SessionIcon iconType={buttonIcon} iconSize={'small'} iconColor="white" />
          </SessionButton>
        )}
      </div>
@ -97,8 +96,6 @@ export const LeftPaneBanner = () => {
    );
  };

-  const theme = useTheme();
-
  return (
    <StyledLeftPaneBanner>
      <StyledProgressBarContainer>
@ -107,11 +104,7 @@ export const LeftPaneBanner = () => {
      <StyledBannerTitle>
        {window.i18n('recoveryPhraseSecureTitle')} <span>90%</span>
      </StyledBannerTitle>
-      <Flex
-        flexDirection="column"
-        justifyContent="space-between"
-        padding={`${theme.common.margins.sm}`}
-      >
+      <Flex flexDirection="column" justifyContent="space-between" padding={'var(--margins-sm)'}>
        <BannerInner />
      </Flex>
    </StyledLeftPaneBanner>
@ -157,10 +150,10 @@ const StyledBannerInner = styled.div`
  }

  .left-pane-banner___phrase {
-    margin-top: ${props => props.theme.common.margins.md};
+    margin-top: var(--margins-md);
  }

  .session-button {
-    margin-top: ${props => props.theme.common.margins.sm};
+    margin-top: var(--margins-sm);
  }
 `;
--- a/ts/components/session/LeftPaneSettingSection.tsx
+++ b/ts/components/session/LeftPaneSettingSection.tsx
@ -7,7 +7,6 @@ import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
 import { useDispatch, useSelector } from 'react-redux';
 import { showSettingsSection } from '../../state/ducks/section';
 import { getFocusedSettingsSection } from '../../state/selectors/section';
-import { getTheme } from '../../state/selectors/theme';
 import { recoveryPhraseModal, updateDeleteAccountModal } from '../../state/ducks/modalDialog';

 const getCategories = () => {
@ -39,7 +38,6 @@ const LeftPaneSettingsCategoryRow = (props: { item: any }) => {
  const { item } = props;

  const dispatch = useDispatch();
-  const theme = useSelector(getTheme);
  const focusedSettingsSection = useSelector(getFocusedSettingsSection);

  return (
@ -60,7 +58,7 @@ const LeftPaneSettingsCategoryRow = (props: { item: any }) => {

      <div>
        {item.id === focusedSettingsSection && (
-          <SessionIcon iconSize={'medium'} iconType="chevron" iconRotation={270} theme={theme} />
+          <SessionIcon iconSize={'medium'} iconType="chevron" iconRotation={270} />
        )}
      </div>
    </div>
--- a/ts/components/session/SessionButton.tsx
+++ b/ts/components/session/SessionButton.tsx
@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react';
 import classNames from 'classnames';
-import { DefaultTheme } from 'styled-components';

 export enum SessionButtonType {
  Brand = 'brand',
@ -31,7 +30,6 @@ type Props = {
  buttonColor: SessionButtonColor;
  onClick: any;
  children?: ReactNode;
-  theme: DefaultTheme;
 };

 export const SessionButton = (props: Props) => {
--- a/ts/components/session/SessionDropdown.tsx
+++ b/ts/components/session/SessionDropdown.tsx
@ -1,5 +1,4 @@
-import React, { useContext, useState } from 'react';
-import { ThemeContext } from 'styled-components';
+import React, { useState } from 'react';

 import { SessionIcon, SessionIconType } from './icon/';
 import { SessionDropdownItem, SessionDropDownItemType } from './SessionDropdownItem';
@ -23,7 +22,6 @@ type Props = {
 export const SessionDropdown = (props: Props) => {
  const { label, options } = props;
  const [expanded, setExpanded] = useState(!!props.expanded);
-  const theme = useContext(ThemeContext);
  const chevronOrientation = expanded ? 180 : 0;

  return (
@ -36,12 +34,7 @@ export const SessionDropdown = (props: Props) => {
        role="button"
      >
        {label}
-        <SessionIcon
-          iconType="chevron"
-          iconSize={'small'}
-          iconRotation={chevronOrientation}
-          theme={theme}
-        />
+        <SessionIcon iconType="chevron" iconSize={'small'} iconRotation={chevronOrientation} />
      </div>

      {expanded && (
--- a/ts/components/session/SessionDropdownItem.tsx
+++ b/ts/components/session/SessionDropdownItem.tsx
@ -1,8 +1,7 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import classNames from 'classnames';

 import { SessionIcon, SessionIconType } from './icon/';
-import { ThemeContext } from 'styled-components';

 export enum SessionDropDownItemType {
  Default = 'default',
@ -26,7 +25,6 @@ export const SessionDropdownItem = (props: Props) => {
  };

  const { content, type, icon, active } = props;
-  const theme = useContext(ThemeContext);

  return (
    <div
@ -38,7 +36,7 @@ export const SessionDropdownItem = (props: Props) => {
      role="button"
      onClick={clickHandler}
    >
-      {icon ? <SessionIcon iconType={icon} iconSize={'small'} theme={theme} /> : ''}
+      {icon ? <SessionIcon iconType={icon} iconSize={'small'} /> : ''}
      <div className="item-content">{content}</div>
    </div>
  );
--- a/ts/components/session/SessionInput.tsx
+++ b/ts/components/session/SessionInput.tsx
@ -2,7 +2,6 @@ import React from 'react';

 import classNames from 'classnames';
 import { SessionIconButton } from './icon';
-import { DefaultTheme } from 'styled-components';

 interface Props {
  label?: string;
@ -16,7 +15,6 @@ interface Props {
  onEnterPressed?: any;
  autoFocus?: boolean;
  ref?: any;
-  theme: DefaultTheme;
 }

 interface State {
@ -116,7 +114,6 @@ export class SessionInput extends React.PureComponent<Props, State> {
            forceShow: !this.state.forceShow,
          });
        }}
-        theme={this.props.theme}
      />
    );
  }
--- a/ts/components/session/SessionJoinableDefaultRooms.tsx
+++ b/ts/components/session/SessionJoinableDefaultRooms.tsx
@ -87,10 +87,10 @@ const StyledRoomName = styled(Flex)`
 `;

 const StyledToolTip = styled.div`
-  padding: ${props => props.theme.common.margins.sm};
-  background: ${props => props.theme.colors.clickableHovered};
-  font-size: ${props => props.theme.common.fonts.xs};
-  border: 1px solid ${props => props.theme.colors.pillDividerColor};
+  padding: var(--margins-sm);
+  background: var(--color-clickable-hovered);
+  font-size: var(--font-size-xs);
+  border: 1px solid var(--color-pill-divider);
  display: inline-block;
  position: absolute;
  white-space: normal;
--- a/ts/components/session/SessionMemberListItem.tsx
+++ b/ts/components/session/SessionMemberListItem.tsx
@ -4,7 +4,6 @@ import classNames from 'classnames';
 import { Avatar, AvatarSize } from '../Avatar';
 import { SessionIcon } from './icon';
 import { Constants } from '../../session';
-import { useTheme } from 'styled-components';
 import { PubKey } from '../../session/types';

 export interface ContactType {
@ -55,7 +54,6 @@ export const SessionMemberListItem = (props: Props) => {
    isSelected ? unselectMember() : selectMember();
  };

-  const theme = useTheme();
  const name = member.authorProfileName || PubKey.shorten(member.authorPhoneNumber);

  return (
@ -74,12 +72,7 @@ export const SessionMemberListItem = (props: Props) => {
        <span className="session-member-item__name">{name}</span>
      </div>
      <span className={classNames('session-member-item__checkmark', isSelected && 'selected')}>
-        <SessionIcon
-          iconType="check"
-          iconSize={'medium'}
-          iconColor={Constants.UI.COLORS.GREEN}
-          theme={theme}
-        />
+        <SessionIcon iconType="check" iconSize={'medium'} iconColor={Constants.UI.COLORS.GREEN} />
      </span>
    </div>
  );
--- a/ts/components/session/SessionNotificationCount.tsx
+++ b/ts/components/session/SessionNotificationCount.tsx
@ -10,18 +10,18 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
  width: 20px;
  height: 20px;
  font-size: 20px;
-  top: ${props => props.theme.common.margins.lg};
-  right: ${props => props.theme.common.margins.lg};
+  top: var(--margins-lg);
+  right: var(--margins-lg);
  padding: 3px;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
-  font-family: ${props => props.theme.common.fonts.sessionFontDefault};
+  font-family: var(--font-default);
  border-radius: 50%;
  font-weight: 700;
-  background: ${props => props.theme.colors.destructive};
-  transition: ${props => props.theme.common.animations.defaultDuration};
+  background: var(--color-destructive);
+  transition: var(--default-duration);
  opacity: ${props => (props.shouldRender ? 1 : 0)};
  text-align: center;
  color: white;
--- a/ts/components/session/SessionPasswordPrompt.tsx
+++ b/ts/components/session/SessionPasswordPrompt.tsx
@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { SessionIcon } from './icon';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
 import { Constants } from '../../session';
-import { DefaultTheme, withTheme } from 'styled-components';
+import { withTheme } from 'styled-components';
 import autoBind from 'auto-bind';

 interface State {
@ -15,7 +15,7 @@ interface State {

 export const MAX_LOGIN_TRIES = 3;

-class SessionPasswordPromptInner extends React.PureComponent<{ theme: DefaultTheme }, State> {
+class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
  private inputRef?: any;

  constructor(props: any) {
@ -67,14 +67,9 @@ class SessionPasswordPromptInner extends React.PureComponent<{ theme: DefaultThe
      />
    );
    const infoIcon = this.state.clearDataView ? (
-      <SessionIcon iconType="warning" iconSize={35} iconColor="#ce0000" theme={this.props.theme} />
+      <SessionIcon iconType="warning" iconSize={35} iconColor="#ce0000" />
    ) : (
-      <SessionIcon
-        iconType="lock"
-        iconSize={35}
-        iconColor={Constants.UI.COLORS.GREEN}
-        theme={this.props.theme}
-      />
+      <SessionIcon iconType="lock" iconSize={35} iconColor={Constants.UI.COLORS.GREEN} />
    );
    const errorSection = !this.state.clearDataView && (
      <div className="password-prompt-error-section">
--- a/ts/components/session/SessionRegistrationView.tsx
+++ b/ts/components/session/SessionRegistrationView.tsx
@ -4,7 +4,7 @@ import { AccentText } from './AccentText';
 import { RegistrationStages } from './registration/RegistrationStages';
 import { SessionIconButton } from './icon';
 import { SessionToastContainer } from './SessionToastContainer';
-import { lightTheme, SessionTheme } from '../../state/ducks/SessionTheme';
+import { SessionTheme } from '../../state/ducks/SessionTheme';
 import { setSignInByLinking } from '../../session/utils/User';

 export const SessionRegistrationView = () => {
@ -12,9 +12,9 @@ export const SessionRegistrationView = () => {
    setSignInByLinking(false);
  }, []);
  return (
-    <SessionTheme theme={lightTheme}>
+    <SessionTheme>
      <div className="session-content">
-        <SessionToastContainer theme={lightTheme} />
+        <SessionToastContainer />
        <div id="error" className="collapse" />
        <div className="session-content-header">
          <div className="session-content-close-button">
@ -24,7 +24,6 @@ export const SessionRegistrationView = () => {
              onClick={() => {
                window.close();
              }}
-              theme={lightTheme}
            />
          </div>
          <div className="session-content-session-button">
--- a/ts/components/session/SessionScrollButton.tsx
+++ b/ts/components/session/SessionScrollButton.tsx
@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
-import styled, { ThemeContext } from 'styled-components';
+import styled from 'styled-components';
 import { getShowScrollButton } from '../../state/selectors/conversations';

 import { SessionIconButton } from './icon';
@ -13,22 +13,19 @@ const SessionScrollButtonDiv = styled.div`
  position: fixed;
  z-index: 2;
  right: 60px;
-  animation: fadein ${props => props.theme.common.animations.defaultDuration};
+  animation: fadein var(--default-duration);
 `;

 export const SessionScrollButton = (props: Props) => {
-  const themeContext = useContext(ThemeContext);
-
  const show = useSelector(getShowScrollButton);

  return (
-    <SessionScrollButtonDiv theme={themeContext}>
+    <SessionScrollButtonDiv>
      <SessionIconButton
        iconType="chevron"
        iconSize={'huge'}
        isHidden={!show}
        onClick={props.onClick}
-        theme={themeContext}
      />
    </SessionScrollButtonDiv>
  );
--- a/ts/components/session/SessionToast.tsx
+++ b/ts/components/session/SessionToast.tsx
@ -1,8 +1,8 @@
-import React, { useContext } from 'react';
+import React from 'react';

 import { SessionIcon, SessionIconType } from './icon/';
 import { Flex } from '../basic/Flex';
-import styled, { ThemeContext } from 'styled-components';
+import styled from 'styled-components';
 import { noop } from 'lodash';

 export enum SessionToastType {
@ -23,32 +23,30 @@ type Props = {
 };

 const TitleDiv = styled.div`
-  font-size: ${props => props.theme.common.fonts.md};
-  line-height: ${props => props.theme.common.fonts.md};
-  font-family: ${props => props.theme.common.fonts.sessionFontDefault};
-  color: ${props => props.theme.colors.textColor};
+  font-size: var(--font-size-md);
+  line-height: var(--font-size-md);
+  font-family: var(--font-default);
+  color: var(--color-text);
  text-overflow: ellipsis;
 `;

 const DescriptionDiv = styled.div`
-  font-size: ${props => props.theme.common.fonts.sm};
-  color: ${props => props.theme.colors.textColorSubtle};
+  font-size: var(--font-size-sm);
+  color: var(--color-text-subtle);
  text-overflow: ellipsis;
-  font-family: ${props => props.theme.common.fonts.sessionFontDefault};
-  padding-bottom: ${props => props.theme.common.fonts.xs};
-  padding-top: ${props => props.theme.common.fonts.xs};
+  font-family: var(--font-default);
+  padding-bottom: var(--font-size-xs);
+  padding-top: var(--font-size-xs);
 `;

 const IconDiv = styled.div`
  flex-shrink: 0;
-  padding-inline-end: ${props => props.theme.common.margins.xs};
+  padding-inline-end: var(--margins-xs);
 `;

 export const SessionToast = (props: Props) => {
  const { title, description, type, icon } = props;

-  const theme = useContext(ThemeContext);
-
  const toastDesc = description ? description : '';
  const toastIconSize = toastDesc ? 'huge' : 'medium';

@ -77,7 +75,7 @@ export const SessionToast = (props: Props) => {
    // tslint:disable-next-line: use-simple-attributes
    <Flex container={true} alignItems="center" onClick={props?.onToastClick || noop}>
      <IconDiv>
-        <SessionIcon iconType={toastIcon} iconSize={toastIconSize} theme={theme} />
+        <SessionIcon iconType={toastIcon} iconSize={toastIconSize} />
      </IconDiv>
      <Flex
        container={true}
--- a/ts/components/session/SessionWrapperModal.tsx
+++ b/ts/components/session/SessionWrapperModal.tsx
@ -3,7 +3,6 @@ import classNames from 'classnames';

 import { SessionIconButton } from './icon/';
 import { SessionButton } from './SessionButton';
-import { useTheme } from 'styled-components';

 // tslint:disable-next-line: no-submodule-imports
 import useKey from 'react-use/lib/useKey';
@ -38,8 +37,6 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
    additionalClassName,
  } = props;

-  const theme = useTheme();
-
  useKey(
    'Esc',
    () => {
@ -84,12 +81,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
            <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
              <div className="session-modal__header__close">
                {showExitIcon ? (
-                  <SessionIconButton
-                    iconType="exit"
-                    iconSize={'small'}
-                    onClick={props.onClose}
-                    theme={theme}
-                  />
+                  <SessionIconButton iconType="exit" iconSize={'small'} onClick={props.onClose} />
                ) : null}
              </div>
              <div className="session-modal__header__title">{title}</div>
@ -103,7 +95,6 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
                          iconSize={'large'}
                          iconRotation={iconItem.iconRotation}
                          onClick={iconItem.onClick}
-                          theme={theme}
                        />
                      );
                    })
--- a/ts/components/session/conversation/SessionCompositionBox.tsx
+++ b/ts/components/session/conversation/SessionCompositionBox.tsx
@ -55,7 +55,6 @@ import { connect } from 'react-redux';
 import { StateType } from '../../../state/reducer';
 import { getTheme } from '../../../state/selectors/theme';
 import { removeAllStagedAttachmentsInConversation } from '../../../state/ducks/stagedAttachments';
-import { useTheme } from 'styled-components';

 export interface ReplyingToMessageProps {
  convoId: string;
@ -89,11 +88,10 @@ export type SendMessageType = {
 };

 const AddStagedAttachmentButton = (props: { onClick: () => void }) => {
-  const theme = useTheme();
  return (
    <SessionIconButton
      iconType="plusThin"
-      backgroundColor={theme.colors.composeViewButtonBackground}
+      backgroundColor={'var(--color-compose-view-background)'}
      iconSize={'huge2'}
      borderRadius="300px"
      iconPadding="8px"
@ -103,13 +101,11 @@ const AddStagedAttachmentButton = (props: { onClick: () => void }) => {
 };

 const StartRecordingButton = (props: { onClick: () => void }) => {
-  const theme = useTheme();
-
  return (
    <SessionIconButton
      iconType="microphone"
      iconSize={'huge2'}
-      backgroundColor={theme.colors.composeViewButtonBackground}
+      backgroundColor={'var(--color-compose-view-background)'}
      borderRadius="300px"
      iconPadding="6px"
      onClick={props.onClick}
@ -118,11 +114,10 @@ const StartRecordingButton = (props: { onClick: () => void }) => {
 };

 const ToggleEmojiButton = (props: { onClick: () => void }) => {
-  const theme = useTheme();
  return (
    <SessionIconButton
      iconType="emoji"
-      backgroundColor={theme.colors.composeViewButtonBackground}
+      backgroundColor="var(--color-quote-bottom-bar-background)"
      iconSize={'huge2'}
      borderRadius="300px"
      iconPadding="6px"
@ -132,12 +127,11 @@ const ToggleEmojiButton = (props: { onClick: () => void }) => {
 };

 const SendMessageButton = (props: { onClick: () => void }) => {
-  const theme = useTheme();
  return (
    <div className="send-message-button">
      <SessionIconButton
        iconType="send"
-        backgroundColor={theme.colors.composeViewButtonBackground}
+        backgroundColor={'var(--color-compose-view-background)'}
        iconSize={'huge2'}
        iconRotation={90}
        borderRadius="300px"
--- a/ts/components/session/conversation/SessionConversation.tsx
+++ b/ts/components/session/conversation/SessionConversation.tsx
@ -14,7 +14,7 @@ import { AttachmentUtil, GoogleChrome } from '../../../util';
 import { ConversationHeaderWithDetails } from '../../conversation/ConversationHeader';
 import { SessionRightPanelWithDetails } from './SessionRightPanel';
 import { SessionTheme } from '../../../state/ducks/SessionTheme';
-import styled, { DefaultTheme } from 'styled-components';
+import styled from 'styled-components';
 import { SessionMessagesListContainer } from './SessionMessagesListContainer';
 import { LightboxGallery, MediaItemType } from '../../LightboxGallery';

@ -57,7 +57,6 @@ interface Props {
  ourNumber: string;
  selectedConversationKey: string;
  selectedConversation?: ReduxConversationType;
-  theme: DefaultTheme;
  messagesProps: Array<SortedMessageModelProps>;
  selectedMessages: Array<string>;
  showMessageDetails: boolean;
@ -75,8 +74,8 @@ const SessionUnreadAboveIndicator = styled.div`
  margin: 1em;
  display: flex;
  justify-content: center;
-  background: ${props => props.theme.colors.sentMessageBackground};
-  color: ${props => props.theme.colors.sentMessageText};
+  background: var(--color-sent-message-background);
+  color: var(--color-sent-message-text);
 `;

 const UnreadAboveIndicator = () => {
@ -246,7 +245,7 @@ export class SessionConversation extends React.Component<Props, State> {
    const selectionMode = selectedMessages.length > 0;

    return (
-      <SessionTheme theme={this.props.theme}>
+      <SessionTheme>
        <div className="conversation-header">
          <ConversationHeaderWithDetails />
        </div>
--- a/ts/components/session/conversation/SessionFileDropzone.tsx
+++ b/ts/components/session/conversation/SessionFileDropzone.tsx
@ -1,5 +1,5 @@
-import React, { useContext } from 'react';
-import styled, { ThemeContext } from 'styled-components';
+import React from 'react';
+import styled from 'styled-components';
 import { Flex } from '../../basic/Flex';
 import { SessionIcon } from '../icon';

@ -12,8 +12,8 @@ const DropZoneContainer = styled.div`
 `;

 const DropZoneWithBorder = styled.div`
-  border: dashed 4px ${props => props.theme.colors.accent};
-  background-color: ${props => props.theme.colors.clickableHovered};
+  border: dashed 4px var(--color-accent);
+  background-color: var(--color-clickable-hovered);
  position: absolute;
  top: 0;
  bottom: 0;
@ -25,13 +25,11 @@ const DropZoneWithBorder = styled.div`
 `;

 export const SessionFileDropzone = () => {
-  const themeContext = useContext(ThemeContext);
-
  return (
    <DropZoneContainer>
      <DropZoneWithBorder>
        <Flex container={true} justifyContent="space-around" height="100%" alignItems="center">
-          <SessionIcon iconSize={'max'} iconType="circlePlus" theme={themeContext} />
+          <SessionIcon iconSize={'max'} iconType="circlePlus" />
        </Flex>
      </DropZoneWithBorder>
    </DropZoneContainer>
--- a/ts/components/session/conversation/SessionLastSeenIndicator.tsx
+++ b/ts/components/session/conversation/SessionLastSeenIndicator.tsx
@ -12,7 +12,7 @@ const LastSeenBarContainer = styled.div`
 const LastSeenBar = styled.div`
  width: 100%;
  height: 2px;
-  background-color: ${props => props.theme.colors.lastSeenIndicatorColor};
+  background-color: var(--color-last-seen-indicator);
 `;

 const LastSeenText = styled.div`
@ -23,7 +23,7 @@ const LastSeenText = styled.div`
  text-transform: uppercase;
  text-align: center;

-  color: ${props => props.theme.colors.lastSeenIndicatorTextColor};
+  color: var(--color-last-seen-indicator-text);
 `;

 export const SessionLastSeenIndicator = () => {
--- a/ts/components/session/conversation/SessionQuotedMessageComposition.tsx
+++ b/ts/components/session/conversation/SessionQuotedMessageComposition.tsx
@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { Flex } from '../../basic/Flex';
 import { SessionIcon, SessionIconButton } from '../icon';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 import { getAlt, isAudio } from '../../../types/Attachment';
 import { Image } from '../../conversation/Image';
 import { AUDIO_MP3 } from '../../../types/MIME';
@ -11,16 +11,16 @@ import { quoteMessage } from '../../../state/ducks/conversations';

 const QuotedMessageComposition = styled.div`
  width: 100%;
-  padding-inline-end: ${props => props.theme.common.margins.md};
-  padding-inline-start: ${props => props.theme.common.margins.md};
+  padding-inline-end: var(--margins-md);
+  padding-inline-start: var(--margins-md);
 `;

 const QuotedMessageCompositionReply = styled.div`
-  background: ${props => props.theme.colors.quoteBottomBarBackground};
-  border-radius: ${props => props.theme.common.margins.sm};
-  padding: ${props => props.theme.common.margins.xs};
-  box-shadow: ${props => props.theme.colors.sessionShadow};
-  margin: ${props => props.theme.common.margins.xs};
+  background: var(--color-quote-bottom-bar-background);
+  border-radius: var(--margins-sm);
+  padding: var(--margins-xs);
+  box-shadow: --color-session-shadow;
+  margin: var(--margins-xs);
 `;

 const Subtle = styled.div`
@ -30,15 +30,14 @@ const Subtle = styled.div`
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
-  color: ${props => props.theme.colors.textColor};
+  color: var(--color-text);
 `;

 const ReplyingTo = styled.div`
-  color: ${props => props.theme.colors.textColor};
+  color: var(--color-text);
 `;

 export const SessionQuotedMessageComposition = () => {
-  const theme = useTheme();
  const quotedMessageProps = useSelector(getQuotedMessage);

  const dispatch = useDispatch();
@ -68,23 +67,18 @@ export const SessionQuotedMessageComposition = () => {
  }

  return (
-    <QuotedMessageComposition theme={theme}>
+    <QuotedMessageComposition>
      <Flex
        container={true}
        justifyContent="space-between"
        flexGrow={1}
-        margin={theme.common.margins.xs}
+        margin={'var(--margins-xs)'}
      >
        <ReplyingTo>{window.i18n('replyingToMessage')}</ReplyingTo>
-        <SessionIconButton
-          iconType="exit"
-          iconSize={'small'}
-          onClick={removeQuotedMessage}
-          theme={theme}
-        />
+        <SessionIconButton iconType="exit" iconSize={'small'} onClick={removeQuotedMessage} />
      </Flex>
      <QuotedMessageCompositionReply>
-        <Flex container={true} justifyContent="space-between" margin={theme.common.margins.xs}>
+        <Flex container={true} justifyContent="space-between" margin={'var(--margins-xs)'}>
          <Subtle>{(hasAttachments && window.i18n('mediaMessage')) || body}</Subtle>

          {hasImageAttachment && (
@ -97,9 +91,7 @@ export const SessionQuotedMessageComposition = () => {
            />
          )}

-          {hasAudioAttachment && (
-            <SessionIcon iconType="microphone" iconSize="huge" theme={theme} />
-          )}
+          {hasAudioAttachment && <SessionIcon iconType="microphone" iconSize="huge" />}
        </Flex>
      </QuotedMessageCompositionReply>
    </QuotedMessageComposition>
--- a/ts/components/session/conversation/SessionRightPanel.tsx
+++ b/ts/components/session/conversation/SessionRightPanel.tsx
@ -7,7 +7,6 @@ import { MediaGallery } from '../../conversation/media-gallery/MediaGallery';
 import _ from 'lodash';
 import { Constants } from '../../../session';
 import { AttachmentTypeWithPath } from '../../../types/Attachment';
-import { useTheme } from 'styled-components';
 import {
  getMessagesWithFileAttachments,
  getMessagesWithVisualMediaAttachments,
@ -110,7 +109,6 @@ async function getMediaGalleryProps(

 const HeaderItem = () => {
  const selectedConversation = useSelector(getSelectedConversation);
-  const theme = useTheme();
  const dispatch = useDispatch();
  const memberDetails = useMembersAvatars(selectedConversation);

@ -141,7 +139,6 @@ const HeaderItem = () => {
        onClick={() => {
          dispatch(closeRightPanel());
        }}
-        theme={theme}
      />
      <Avatar
        avatarPath={avatarPath || ''}
@ -160,7 +157,6 @@ const HeaderItem = () => {
                showInviteContactByConvoId(selectedConversation.id);
              }
            }}
-            theme={theme}
          />
        )}
      </div>
--- a/ts/components/session/icon/SessionIcon.tsx
+++ b/ts/components/session/icon/SessionIcon.tsx
@ -1,7 +1,6 @@
 import React from 'react';
 import { icons, SessionIconSize, SessionIconType } from '../icon';
-import styled, { css, DefaultTheme, keyframes, useTheme } from 'styled-components';
-import { lightTheme } from '../../../state/ducks/SessionTheme';
+import styled, { css, keyframes } from 'styled-components';

 export type SessionIconProps = {
  iconType: SessionIconType;
@ -14,7 +13,6 @@ export type SessionIconProps = {
  borderRadius?: string;
  glowStartDelay?: number;
  noScale?: boolean;
-  theme?: DefaultTheme;
  backgroundColor?: string;
 };

@ -150,9 +148,8 @@ const SessionSvg = (props: {
  borderRadius?: string;
  backgroundColor?: string;
  iconPadding?: string;
-  theme: DefaultTheme;
 }) => {
-  const colorSvg = props.iconColor || props?.theme?.colors.textColor;
+  const colorSvg = props.iconColor || 'var(--colors-text)';
  const pathArray = props.path instanceof Array ? props.path : [props.path];
  const propsToPick = {
    width: props.width,
@ -182,7 +179,6 @@ export const SessionIcon = (props: SessionIconProps) => {
  const {
    iconType,
    iconColor,
-    theme,
    rotateDuration,
    glowDuration,
    borderRadius,
@ -195,14 +191,9 @@ export const SessionIcon = (props: SessionIconProps) => {
  iconSize = iconSize || 'medium';
  iconRotation = iconRotation || 0;

-  const themeToUse = theme || useTheme() || lightTheme;
-
  const iconDimensions = getIconDimensionFromIconSize(iconSize);
  const iconDef = icons[iconType];
  const ratio = iconDef?.ratio || 1;
-  if (!themeToUse) {
-    window?.log?.error('Missing theme props in SessionIcon');
-  }

  return (
    <SessionSvg
@ -219,7 +210,6 @@ export const SessionIcon = (props: SessionIconProps) => {
      iconColor={iconColor}
      backgroundColor={backgroundColor}
      iconPadding={iconPadding}
-      theme={themeToUse}
    />
  );
 };
--- a/ts/components/session/icon/SessionIconButton.tsx
+++ b/ts/components/session/icon/SessionIconButton.tsx
@ -2,14 +2,12 @@ import React from 'react';
 import classNames from 'classnames';
 import { SessionIcon, SessionIconProps } from '../icon';
 import { SessionNotificationCount } from '../SessionNotificationCount';
-import { DefaultTheme, useTheme } from 'styled-components';
 import _ from 'lodash';

 interface SProps extends SessionIconProps {
  onClick?: any;
  notificationCount?: number;
  isSelected?: boolean;
-  theme?: DefaultTheme;
  isHidden?: boolean;
 }

@ -21,7 +19,6 @@ const SessionIconButtonInner = (props: SProps) => {
    iconRotation,
    isSelected,
    notificationCount,
-    theme,
    glowDuration,
    glowStartDelay,
    noScale,
@ -37,8 +34,6 @@ const SessionIconButtonInner = (props: SProps) => {
    }
  };

-  const themeToUSe = theme || useTheme();
-
  return (
    <div
      className={classNames('session-icon-button', iconSize, isSelected ? 'no-opacity' : '')}
@ -51,7 +46,6 @@ const SessionIconButtonInner = (props: SProps) => {
        iconSize={iconSize}
        iconColor={iconColor}
        iconRotation={iconRotation}
-        theme={themeToUSe}
        glowDuration={glowDuration}
        glowStartDelay={glowStartDelay}
        noScale={noScale}
--- a/ts/components/session/registration/RegistrationUserDetails.tsx
+++ b/ts/components/session/registration/RegistrationUserDetails.tsx
@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import React from 'react';
-import { lightTheme } from '../../../state/ducks/SessionTheme';
 import { SessionInput } from '../SessionInput';
 import { MAX_USERNAME_LENGTH } from './RegistrationStages';

@ -21,7 +20,6 @@ const DisplayNameInput = (props: {
      maxLength={MAX_USERNAME_LENGTH}
      onValueChanged={props.onDisplayNameChanged}
      onEnterPressed={props.handlePressEnter}
-      theme={lightTheme}
    />
  );
 };
@ -43,7 +41,6 @@ const RecoveryPhraseInput = (props: {
      enableShowHide={true}
      onValueChanged={props.onSeedChanged}
      onEnterPressed={props.handlePressEnter}
-      theme={lightTheme}
    />
  );
 };
--- a/ts/state/ducks/SessionTheme.tsx
+++ b/ts/state/ducks/SessionTheme.tsx
@ -1,8 +1,6 @@
 import React from 'react';
-// tslint:disable-next-line: no-import-side-effect no-submodule-imports
-// import 'reset-css/reset.css';

-import { DefaultTheme, ThemeProvider } from 'styled-components';
+import { createGlobalStyle } from 'styled-components';

 const white = '#ffffff';
 const black = '#000000';
@ -13,103 +11,183 @@ const accentDarkTheme = '#00f782';
 const borderLightThemeColor = '#f1f1f1';
 const borderDarkThemeColor = '#ffffff0F';

-// const borderAvatarColor = '#00000059';
-// const borderLightTheme = '#f1f1f1';
-// const borderDarkTheme = '#ffffff0F';
+// DARK COLORS
+const darkColorAccent = accentDarkTheme;
+const darkColorAccentButton = accentDarkTheme;
+const darkColorText = white;
+const darkColorTextSubtle = `${white}99`;
+const darkColorTextAccent = accentDarkTheme;
+const darkColorSessionShadow = `0 0 4px 0 ${white}33`;
+const darkColorComposeViewBg = '#232323';
+const darkColorSentMessageBg = accentDarkTheme;
+const darkColorSentMessageText = black;
+const darkColorClickableHovered = '#414347';
+const darkColorSessionBorder = `1px solid ${borderDarkThemeColor}`;
+const darkColorSessionBorderColor = borderDarkThemeColor;
+const darkColorRecoveryPhraseBannerBg = '#1f1f1f';
+const darkColorPillDivider = '#353535';
+const darkColorLastSeenIndicator = '#353535';
+const darkColorLastSeenIndicatorText = '#a8a9aa';
+const darkColorQuoteBottomBarBg = '#404040';

-const common = {
-  fonts: {
-    sessionFontDefault: 'Roboto',
-    sessionFontAccent: 'Loor',
-    sessionFontMono: 'SpaceMono',
-    xs: '11px',
-    sm: '13px',
-    md: '15px',
-    lg: '18px',
-    xl: '24px',
-  },
-  margins: {
-    xs: '5px',
-    sm: '10px',
-    md: '15px',
-    lg: '20px',
-  },
-  animations: {
-    defaultDuration: '0.25s',
-  },
+export const switchHtmlToDarkTheme = () => {
+  document.documentElement.style.setProperty('--color-accent', darkColorAccent);
+  document.documentElement.style.setProperty('--color-accent-button', darkColorAccentButton);
+  document.documentElement.style.setProperty('--color-text', darkColorText);
+  document.documentElement.style.setProperty('--color-text-subtle', darkColorTextSubtle);
+  document.documentElement.style.setProperty('--color-text-accent', darkColorTextAccent);
+  document.documentElement.style.setProperty('--color-session-shadow', darkColorSessionShadow);
+  document.documentElement.style.setProperty(
+    '--color-compose-view-background',
+    darkColorComposeViewBg
+  );
+  document.documentElement.style.setProperty(
+    '--color-sent-message-background',
+    darkColorSentMessageBg
+  );
+  document.documentElement.style.setProperty('--color-sent-message-text', darkColorSentMessageText);
+  document.documentElement.style.setProperty(
+    '--color-clickable-hovered',
+    darkColorClickableHovered
+  );
+  document.documentElement.style.setProperty('--color-session-border', darkColorSessionBorder);
+  document.documentElement.style.setProperty(
+    '--color-session-border-color',
+    darkColorSessionBorderColor
+  );
+  document.documentElement.style.setProperty(
+    '--color-recovery-phrase-banner-background',
+    darkColorRecoveryPhraseBannerBg
+  );
+  document.documentElement.style.setProperty('--color-pill-divider', darkColorPillDivider);
+  document.documentElement.style.setProperty(
+    '--color-last-seen-indicator',
+    darkColorLastSeenIndicator
+  );
+  document.documentElement.style.setProperty(
+    '--color-last-seen-indicator-text',
+    darkColorLastSeenIndicatorText
+  );
+  document.documentElement.style.setProperty(
+    '--color-quote-bottom-bar-background',
+    darkColorQuoteBottomBarBg
+  );
 };

-export const lightTheme: DefaultTheme = {
-  common,
-  colors: {
-    accent: accentLightTheme,
-    accentButton: black,
-    warning: warning,
-    destructive: destructive,
-    // text
-    textColor: black,
-    textColorSubtle: `${black}99`,
-    textColorOpposite: white,
-    textAccent: '#00c769',
-    // conversation view
-    composeViewButtonBackground: '#efefef',
-    sentMessageBackground: accentLightTheme,
-    sentMessageText: white,
-    sessionShadow: `0 0 4px 0 ${black}5E`,
-    // left pane
-    clickableHovered: '#dfdfdf',
-    sessionBorder: `1px solid ${borderLightThemeColor}`,
-    sessionBorderColor: borderLightThemeColor,
-    recoveryPhraseBannerBackground: white,
-    // pill divider:
-    pillDividerColor: `${black}1A`,
-    lastSeenIndicatorColor: '#62656a',
-    lastSeenIndicatorTextColor: '#070c14',
-    quoteBottomBarBackground: '#f0f0f0',
-  },
+// LIGHT COLORS
+const lightColorAccent = accentLightTheme;
+const lightColorAccentButton = black;
+const lightColorText = black;
+const lightColorTextSubtle = `${black}99`;
+const lightColorTextAccent = '#00c769';
+const lightColorSessionShadow = `0 0 4px 0 ${black}5E`;
+const lightColorComposeViewBg = '#efefef';
+const lightColorSentMessageBg = accentLightTheme;
+const lightColorSentMessageText = white;
+const lightColorClickableHovered = '#dfdfdf';
+const lightColorSessionBorder = `1px solid ${borderLightThemeColor}`;
+const lightColorSessionBorderColor = borderLightThemeColor;
+const lightColorRecoveryPhraseBannerBg = white;
+const lightColorPillDivider = `${black}1A`;
+const lightColorLastSeenIndicator = '#62656a';
+const lightColorLastSeenIndicatorText = '#070c14';
+const lightColorQuoteBottomBarBg = '#f0f0f0';
+
+export const switchHtmlToLightTheme = () => {
+  document.documentElement.style.setProperty('--color-accent', lightColorAccent);
+  document.documentElement.style.setProperty('--color-accent-button', lightColorAccentButton);
+  document.documentElement.style.setProperty('--color-text', lightColorText);
+  document.documentElement.style.setProperty('--color-text-subtle', lightColorTextSubtle);
+  document.documentElement.style.setProperty('--color-text-accent', lightColorTextAccent);
+  document.documentElement.style.setProperty('--color-session-shadow', lightColorSessionShadow);
+  document.documentElement.style.setProperty(
+    '--color-compose-view-background',
+    lightColorComposeViewBg
+  );
+  document.documentElement.style.setProperty(
+    '--color-sent-message-background',
+    lightColorSentMessageBg
+  );
+  document.documentElement.style.setProperty(
+    '--color-sent-message-text',
+    lightColorSentMessageText
+  );
+  document.documentElement.style.setProperty(
+    '--color-clickable-hovered',
+    lightColorClickableHovered
+  );
+  document.documentElement.style.setProperty('--color-session-border', lightColorSessionBorder);
+  document.documentElement.style.setProperty(
+    '--color-session-border-color',
+    lightColorSessionBorderColor
+  );
+  document.documentElement.style.setProperty(
+    '--color-recovery-phrase-banner-background',
+    lightColorRecoveryPhraseBannerBg
+  );
+  document.documentElement.style.setProperty('--color-pill-divider', lightColorPillDivider);
+  document.documentElement.style.setProperty(
+    '--color-last-seen-indicator',
+    lightColorLastSeenIndicator
+  );
+  document.documentElement.style.setProperty(
+    '--color-last-seen-indicator-text',
+    lightColorLastSeenIndicatorText
+  );
+  document.documentElement.style.setProperty(
+    '--color-quote-bottom-bar-background',
+    lightColorQuoteBottomBarBg
+  );
 };

-export const darkTheme: DefaultTheme = {
-  common,
-  colors: {
-    accent: accentDarkTheme,
-    accentButton: accentDarkTheme,
-    warning: warning,
-    destructive: destructive,
-    // text
-    textColor: white,
-    textColorSubtle: `${white}99`,
-    textColorOpposite: black,
-    textAccent: accentDarkTheme,
-    // conversation view
-    composeViewButtonBackground: '#232323',
-    sentMessageBackground: accentDarkTheme,
-    sentMessageText: black,
-    sessionShadow: `0 0 4px 0 ${white}33`,
-    // left pane
-    clickableHovered: '#414347',
-    sessionBorder: `1px solid ${borderDarkThemeColor}`,
-    sessionBorderColor: borderDarkThemeColor,
-    recoveryPhraseBannerBackground: '#1f1f1f',
-    // pill divider:
-    pillDividerColor: '#353535',
-    lastSeenIndicatorColor: '#353535',
-    lastSeenIndicatorTextColor: '#a8a9aa',
-    quoteBottomBarBackground: '#404040',
-  },
-};
+// default to dark theme
+export const SessionGlobalStyles = createGlobalStyle`
+  html {
+    /* FONTS */
+    --font-default:  'Roboto';
+    --font-font-accent:  'Loor';
+    --font-font-mono:  'SpaceMono';
+    --font-size-xs:  '11px';
+    --font-size-sm:  '13px';
+    --font-size-md:  '15px';

-export const inversedTheme = (theme: DefaultTheme): DefaultTheme => {
-  return {
-    colors: {
-      ...theme.colors,
-      textColor: theme.colors.textColorOpposite,
-      textColorOpposite: theme.colors.textColor,
-    },
-    common: theme.common,
+    /* MARGINS */
+    --margins-xs:  '5px';
+    --margins-sm:  '10px';
+    --margins-md:  '15px';
+    --margins-lg:  '20px';
+
+    /* ANIMATIONS */
+    --default-duration: '0.25s';
+    /* COLORS NOT CHANGING BETWEEN THEMES */
+    --color-warning:  ${warning};
+    --color-destructive:  ${destructive};
+    /* COLORS */
+    --color-accent: ${darkColorAccent};
+    --color-accent-button:  ${darkColorAccentButton};
+
+    --color-text:  ${darkColorText};
+    --color-text-subtle:  ${darkColorTextSubtle};
+    --color-text-accent:  ${darkColorTextAccent};
+
+    --color-session-shadow: ${darkColorSessionShadow};
+    --color-compose-view-background: ${darkColorComposeViewBg};
+    --color-sent-message-background:  ${darkColorSentMessageBg};
+    --color-sent-message-text:  ${darkColorSentMessageText};
+    --color-clickable-hovered: ${darkColorClickableHovered};
+    --color-session-border:  ${darkColorSessionBorder};
+    --color-session-border-color:  ${darkColorSessionBorderColor};
+    --color-recovery-phrase-banner-background: ${darkColorRecoveryPhraseBannerBg};
+    --color-pill-divider:  ${darkColorPillDivider};
+    --color-last-seen-indicator: ${darkColorLastSeenIndicator};
+    --color-last-seen-indicator-text:  ${darkColorLastSeenIndicatorText};
+    --color-quote-bottom-bar-background:  ${darkColorQuoteBottomBarBg};
  };
-};
+`;

-export const SessionTheme = ({ children, theme }: { children: any; theme: DefaultTheme }) => (
-  <ThemeProvider theme={theme}>{children}</ThemeProvider>
+export const SessionTheme = ({ children }: { children: any }) => (
+  <>
+    <SessionGlobalStyles />
+    {children}
+  </>
 );
--- a/ts/state/ducks/theme.tsx
+++ b/ts/state/ducks/theme.tsx
@ -1,15 +1,14 @@
 export const APPLY_THEME = 'APPLY_THEME';
-export type ThemeStateType = typeof lightTheme;

+export type ThemeStateType = 'light' | 'dark';
 export const applyTheme = (theme: ThemeStateType) => {
  return {
    type: APPLY_THEME,
    payload: theme,
  };
 };
-import { lightTheme } from './SessionTheme';

-export const initialThemeState = lightTheme;
+export const initialThemeState: ThemeStateType = 'light';

 export const reducer = (
  state: any = initialThemeState,
--- a/ts/styled.d.ts
+++ b/ts/styled.d.ts
@ -1,54 +0,0 @@
-import 'styled-components';
-
-declare module 'styled-components' {
-  export interface DefaultTheme {
-    common: {
-      fonts: {
-        sessionFontDefault: string;
-        sessionFontAccent: string;
-        sessionFontMono: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-      };
-      margins: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-      };
-      animations: {
-        defaultDuration: string;
-      };
-    };
-    colors: {
-      accent: string;
-      accentButton: string;
-      warning: string;
-      destructive: string;
-      // text
-      textColor: string;
-      textColorSubtle: string;
-      textColorOpposite: string;
-      textAccent: string;
-      // conversation view
-      composeViewButtonBackground: string;
-      sentMessageBackground: string;
-      sentMessageText: string;
-      sessionShadow: string;
-      // left pane
-      clickableHovered: string;
-      sessionBorder: string;
-      sessionBorderColor: string;
-      recoveryPhraseBannerBackground: string;
-      // pill divider:
-      pillDividerColor: string;
-      // context menu
-      lastSeenIndicatorColor: string;
-      lastSeenIndicatorTextColor: string;
-      quoteBottomBarBackground: string;
-    };
-  }
-}
--- a/ts/window.d.ts
+++ b/ts/window.d.ts
@ -7,7 +7,6 @@ import { SignalInterface } from '../../js/modules/signal';
 import { LibTextsecure } from '../libtextsecure';

 import { Store } from 'redux';
-import { DefaultTheme } from 'styled-components';

 import { ConversationCollection, ConversationModel } from './models/conversation';
 import { ConversationType } from './state/ducks/conversations';