diff --git a/ts/components/button/MenuButton.tsx b/ts/components/button/MenuButton.tsx index 254e0a732..2cff26532 100644 --- a/ts/components/button/MenuButton.tsx +++ b/ts/components/button/MenuButton.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import styled, { CSSProperties } from 'styled-components'; +import styled from 'styled-components'; import { resetOverlayMode, setOverlayMode } from '../../state/ducks/section'; import { getOverlayMode } from '../../state/selectors/section'; import { SessionIcon } from '../icon'; @@ -41,18 +41,7 @@ export const MenuButton = () => { dispatch(isToggled ? resetOverlayMode() : setOverlayMode('choose-action')); return ( - + { - document.documentElement.style.setProperty('--color-accent', darkColorAccent); - document.documentElement.style.setProperty('--color-accent-rgb', darkColorAccentRGB); - document.documentElement.style.setProperty('--color-accent-button', darkColorAccentButton); - document.documentElement.style.setProperty('--color-text', darkColorText); - document.documentElement.style.setProperty('--color-text-rgb', darkColorTextRGB); - document.documentElement.style.setProperty('--color-text-menu-highlighted', lightColorText); - document.documentElement.style.setProperty('--color-text-subtle', darkColorTextSubtle); - document.documentElement.style.setProperty('--color-text-accent', darkColorTextAccent); - document.documentElement.style.setProperty('--color-text-opposite', darkColorTextOpposite); - document.documentElement.style.setProperty('--color-session-shadow', darkColorSessionShadow); - document.documentElement.style.setProperty( - '--color-compose-view-button-background', - darkColorComposeViewBg - ); - document.documentElement.style.setProperty( - '--color-sent-message-background', - darkColorSentMessageBg - ); - document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack); - document.documentElement.style.setProperty( - '--color-clickable-hovered', - darkColorClickableHovered - ); - document.documentElement.style.setProperty('--color-session-border', darkColorSessionBorder); - document.documentElement.style.setProperty('--color-session-border', 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-quote-bottom-bar-background', - darkColorQuoteBottomBarBg - ); - document.documentElement.style.setProperty('--color-cell-background', darkColorCellBackground); - document.documentElement.style.setProperty( - '--color-received-message-text', - darkColorReceivedMessageText - ); - document.documentElement.style.setProperty( - '--color-received-message-background', - darkColorReceivedMessageBg - ); - document.documentElement.style.setProperty('--color-pill-divider-text', darkColorPillDividerText); - document.documentElement.style.setProperty('--color-input-background', darkInputBackground); - - document.documentElement.style.setProperty('--filter-session-text', darkFilterSessionText); - document.documentElement.style.setProperty('--border-unread', darkUnreadBorder); - - document.documentElement.style.setProperty('--color-scroll-bar-thumb', darkScrollbarThumb); - document.documentElement.style.setProperty( - '--color-fake-chat-bubble-background', - darkFakeChatBubbleBg - ); - document.documentElement.style.setProperty('--color-inbox-background', darkInboxBackground); - document.documentElement.style.setProperty( - '--color-left-pane-overlay-background', - darkLeftPaneOverlayBg - ); - document.documentElement.style.setProperty( - '--color-conversation-item-selected', - darkConversationItemSelected - ); - document.documentElement.style.setProperty( - '--color-conversation-item-has-unread', - darkConversationItemHasUnread - ); - document.documentElement.style.setProperty('--color-conversation-list', darkConversationList); - - document.documentElement.style.setProperty('--color-text-highlight', darkTextHighlight); - document.documentElement.style.setProperty('--color-foreground-primary', darkForegroundPrimary); - document.documentElement.style.setProperty('--color-background-primary', darkBackgroundPrimary); - document.documentElement.style.setProperty('--color-button-green', darkButtonGreen); - document.documentElement.style.setProperty('--color-modal-background', darkModalBackground); - document.documentElement.style.setProperty('--border-session', darkColorSessionBorder); - - document.documentElement.style.setProperty( - '--color-request-banner-background', - darkMessageRequestBannerBackground - ); - document.documentElement.style.setProperty( - '--color-request-banner-icon-background', - darkMessageRequestBannerIconBackground - ); - document.documentElement.style.setProperty( - '--color-request-banner-unread-background', - darkMessageRequestBannerUnreadBackground - ); - document.documentElement.style.setProperty( - '--color-request-banner-icon', - darkMessageRequestBannerIcon - ); -}; - -// LIGHT COLORS -const lightColorAccent = accentLightTheme; -const lightColorAccentRGB = '0, 233, 123'; -const lightColorAccentButton = blackColor; -const lightColorText = blackColor; -const lightColorTextRGB = blackColorRGB; -const lightColorTextOpposite = whiteColor; -const lightColorTextSubtle = `${blackColor}99`; -const lightColorTextAccent = accentLightTheme; -const lightColorSessionShadow = `0 0 4px 0 ${blackColor}5E`; -const lightColorComposeViewBg = '#efefef'; -export const lightColorSentMessageBg = accentLightTheme; -const lightColorClickableHovered = '#dfdfdf'; -const lightColorSessionBorderColor = borderLightThemeColor; -const lightColorSessionBorder = `1px solid ${lightColorSessionBorderColor}`; -const lightColorRecoveryPhraseBannerBg = whiteColor; -const lightColorPillDivider = `${blackColor}1A`; -const lightColorLastSeenIndicator = blackColor; -const lightColorQuoteBottomBarBg = '#f0f0f0'; -const lightColorCellBackground = '#f9f9f9'; -export const lightColorReceivedMessageBg = '#f5f5f5'; -const lightColorReceivedMessageText = blackColor; - -const lightColorPillDividerText = '#555555'; - -const lightInputBackground = '#efefef'; -const lightFilterSessionText = 'brightness(0) saturate(100%)'; -const lightUnreadBorder = `4px solid ${accentLightTheme}`; - -const lightScrollbarThumb = darkGrayColor; -const lightFakeChatBubbleBg = '#f5f5f5'; - -const lightInboxBackground = whiteColor; -const lightLeftPaneOverlayBg = lightInboxBackground; -const lightConversationItemSelected = '#f0f0f0'; -const lightConversationItemHasUnread = '#fcfcfc'; -const lightConversationList = '#f9f9f9'; - -const lightTextHighlight = `${blackColor}88`; -const lightForegroundPrimary = whiteColor; -const lightBackgroundPrimary = '#272726'; -const lightButtonGreen = '#272726'; -const lightModalBackground = '#fcfcfc'; - -const lightMessageRequestBannerBackground = lightColorQuoteBottomBarBg; -const lightMessageRequestBannerIconBackground = '#585858'; -const lightMessageRequestBannerUnreadBackground = lightColorClickableHovered; -const lightMessageRequestBannerIcon = whiteColor; - -export const switchHtmlToLightTheme = () => { - document.documentElement.style.setProperty('--color-accent', lightColorAccent); - document.documentElement.style.setProperty('--color-accent-rgb', lightColorAccentRGB); - document.documentElement.style.setProperty('--color-accent-button', lightColorAccentButton); - document.documentElement.style.setProperty('--color-text', lightColorText); - document.documentElement.style.setProperty('--color-text-rgb', lightColorTextRGB); - document.documentElement.style.setProperty('--color-text-menu-highlighted', lightColorText); - document.documentElement.style.setProperty('--color-text-subtle', lightColorTextSubtle); - document.documentElement.style.setProperty('--color-text-accent', lightColorTextAccent); - document.documentElement.style.setProperty('--color-text-opposite', lightColorTextOpposite); - - document.documentElement.style.setProperty('--color-session-shadow', lightColorSessionShadow); - document.documentElement.style.setProperty( - '--color-compose-view-button-background', - lightColorComposeViewBg - ); - document.documentElement.style.setProperty( - '--color-sent-message-background', - lightColorSentMessageBg - ); - // TODO: This might be wrong. Didn't merge correctly. - document.documentElement.style.setProperty('--color-sent-message-text', blackColor); - document.documentElement.style.setProperty( - '--color-clickable-hovered', - lightColorClickableHovered - ); - document.documentElement.style.setProperty('--color-session-border', lightColorSessionBorder); - document.documentElement.style.setProperty( - '--color-session-border', - 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-quote-bottom-bar-background', - lightColorQuoteBottomBarBg - ); - document.documentElement.style.setProperty('--color-cell-background', lightColorCellBackground); - document.documentElement.style.setProperty( - '--color-received-message-text', - lightColorReceivedMessageText - ); - document.documentElement.style.setProperty( - '--color-received-message-background', - lightColorReceivedMessageBg - ); - document.documentElement.style.setProperty( - '--color-pill-divider-text', - lightColorPillDividerText - ); - document.documentElement.style.setProperty('--color-input-background', lightInputBackground); - document.documentElement.style.setProperty('--filter-session-text', lightFilterSessionText); - document.documentElement.style.setProperty('--border-unread', lightUnreadBorder); - - document.documentElement.style.setProperty('--color-scroll-bar-thumb', lightScrollbarThumb); - document.documentElement.style.setProperty( - '--color-fake-chat-bubble-background', - lightFakeChatBubbleBg - ); - document.documentElement.style.setProperty('--color-inbox-background', lightInboxBackground); - document.documentElement.style.setProperty( - '--color-left-pane-overlay-background', - lightLeftPaneOverlayBg - ); - document.documentElement.style.setProperty( - '--color-conversation-item-selected', - lightConversationItemSelected - ); - document.documentElement.style.setProperty( - '--color-conversation-item-has-unread', - lightConversationItemHasUnread - ); - document.documentElement.style.setProperty('--color-conversation-list', lightConversationList); - - document.documentElement.style.setProperty('--color-text-highlight', lightTextHighlight); - document.documentElement.style.setProperty('--color-foreground-primary', lightForegroundPrimary); - document.documentElement.style.setProperty('--color-background-primary', lightBackgroundPrimary); - document.documentElement.style.setProperty('--color-button-green', lightButtonGreen); - document.documentElement.style.setProperty('--color-modal-background', lightModalBackground); - document.documentElement.style.setProperty('--border-session', lightColorSessionBorder); - document.documentElement.style.setProperty( - '--color-request-banner-background', - lightMessageRequestBannerBackground - ); - document.documentElement.style.setProperty( - '--color-request-banner-icon-background', - lightMessageRequestBannerIconBackground - ); - document.documentElement.style.setProperty( - '--color-request-banner-unread-background', - lightMessageRequestBannerUnreadBackground - ); - document.documentElement.style.setProperty( - '--color-request-banner-icon', - lightMessageRequestBannerIcon - ); -}; - // default to classic light theme export const SessionGlobalStyles = createGlobalStyle` html { @@ -381,13 +77,6 @@ export const SessionGlobalStyles = createGlobalStyle` /* ANIMATIONS */ --default-duration: 0.25s; - /* FILTERS */ - --filter-session-text: ${lightFilterSessionText}; - - /* BORDERS */ - --border-unread: ${lightUnreadBorder}; - --border-session: ${lightColorSessionBorder}; - /* CONSTANTS */ --composition-container-height: 60px; --search-input-height: 34px; @@ -423,41 +112,7 @@ export const SessionGlobalStyles = createGlobalStyle` --color-destructive-alt: ${destructiveAltColor}; --color-destructive-alt-rgb: ${destructiveAltColorRGB}; /* COLORS */ - --color-accent: ${lightColorAccent}; - --color-accent-rgb: ${lightColorAccentRGB}; - --color-accent-button: ${lightColorAccentButton}; - - --color-text: ${lightColorText}; - --color-text-rgb: ${lightColorTextRGB}; - --color-text-subtle: ${lightColorTextSubtle}; - --color-text-accent: ${lightColorTextAccent}; - --color-text-opposite: ${lightColorTextOpposite}; - --color-session-shadow: ${lightColorSessionShadow}; - --color-compose-view-button-background: ${lightColorComposeViewBg}; - --color-sent-message-background: ${lightColorSentMessageBg}; - --color-sent-message-text: ${blackColor}; - --color-clickable-hovered: ${lightColorClickableHovered}; - --color-session-border: ${lightColorSessionBorderColor}; - --color-recovery-phrase-banner-background: ${lightColorRecoveryPhraseBannerBg}; - --color-pill-divider: ${lightColorPillDivider}; - --color-last-seen-indicator: ${lightColorLastSeenIndicator}; - --color-quote-bottom-bar-background: ${lightColorQuoteBottomBarBg}; - --color-cell-background: ${lightColorCellBackground}; - --color-pill-divider-text: ${lightColorPillDividerText}; - --color-input-background: ${lightInputBackground}; - --color-scroll-bar-thumb: ${lightScrollbarThumb}; - --color-fake-chat-bubble-background: ${lightFakeChatBubbleBg}; - --color-inbox-background: ${lightInboxBackground}; - --color-left-pane-overlay-background: ${lightLeftPaneOverlayBg}; - --color-conversation-item-selected: ${lightConversationItemSelected}; - --color-conversation-item-has-unread: ${lightConversationItemHasUnread}; - --color-conversation-list: ${lightConversationList}; - --color-text-highlight: ${lightTextHighlight}; - --color-foreground-primary: ${lightForegroundPrimary}; - --color-background-primary: ${lightBackgroundPrimary}; - --color-button-green: ${lightButtonGreen}; - --color-modal-background: ${lightModalBackground}; --color-avatar-border-color: ${avatarBorderColor}; /* New Theme */ diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx index 8ffa29e80..ad29e6d26 100644 --- a/ts/themes/switchTheme.tsx +++ b/ts/themes/switchTheme.tsx @@ -2,7 +2,6 @@ import { Dispatch } from 'redux'; import { applyTheme } from '../state/ducks/theme'; import { classicDark, classicLight, oceanDark, oceanLight } from '.'; import { convertThemeStateToName, THEMES, ThemeStateType } from './constants/colors'; -import { switchHtmlToDarkTheme, switchHtmlToLightTheme } from './SessionTheme'; import { loadThemeColors } from './variableColors'; import { findPrimaryColorId, switchPrimaryColorTo } from './switchPrimaryColor'; @@ -19,22 +18,18 @@ export async function switchThemeTo(props: SwitchThemeProps) { switch (theme) { case 'classic-dark': - switchHtmlToDarkTheme(); loadThemeColors(classicDark); newTheme = 'classic-dark'; break; case 'classic-light': - switchHtmlToLightTheme(); loadThemeColors(classicLight); newTheme = 'classic-light'; break; case 'ocean-dark': - switchHtmlToDarkTheme(); loadThemeColors(oceanDark); newTheme = 'ocean-dark'; break; case 'ocean-light': - switchHtmlToLightTheme(); loadThemeColors(oceanLight); newTheme = 'ocean-light'; break;