diff --git a/stylesheets/_avatar.scss b/stylesheets/_avatar.scss index 8ca4873f8..743cb203e 100644 --- a/stylesheets/_avatar.scss +++ b/stylesheets/_avatar.scss @@ -9,8 +9,7 @@ img { object-fit: cover; border-radius: 50%; - // TODO Theming update - border: 1px solid var(--color-avatar-border-color); + border: 1px solid var(--avatar-border-color); } } diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index fcc3e6be2..3dc56d7df 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -4,7 +4,8 @@ html { height: 100%; - background-color: white; + // Default theme is Classic Dark + background-color: black; } body { @@ -40,15 +41,6 @@ audio { max-width: 100%; } -.clearfix:before, -.clearfix:after { - display: table; - content: ' '; -} -.clearfix:after { - clear: both; -} - .hide { display: none; } @@ -67,118 +59,12 @@ button { } } } -button.grey { - border-radius: $border-radius; - border: solid 1px var(--color-light-gray-color); - cursor: pointer; - margin: 1em auto; - padding: 1em; - font-family: inherit; - color: var(--color-gray-color); - background: var(--color-lightest-gray-color); - box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5); - - &:hover { - box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7); - } - - &[disabled='disabled'] { - &, - &:hover { - opacity: 0.5; - box-shadow: none; - cursor: default; - } - } -} a { cursor: pointer; user-select: text; } -.file-input { - position: relative; - .choose-file { - cursor: pointer; - } - - input[type='file'] { - // Must be displayed in order to programmatically - // insert file paths) - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - cursor: pointer; - z-index: -100; - } -} - -.banner { - z-index: 100; - - // what's the right color? - background-color: var(--color-light-blue-color); - color: black; - box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); - - position: absolute; - top: 25px; - right: 30px; - left: 30px; - - padding: 5px 25px 5px 10px; - - text-align: center; - border-radius: 10px; - - cursor: pointer; - - .warning { - width: 18px; - height: 18px; - display: inline-block; - vertical-align: text-bottom; - @include color-svg('../images/warning.svg', black); - } - - .dismiss { - position: absolute; - right: 3px; - top: 3px; - - height: 23px; - width: 23px; - @include color-svg('../images/x.svg', black); - } -} - -$loading-height: 16px; - -.loading { - position: relative; - &::before { - display: block; - margin: 0px auto; - content: ' '; - height: $loading-height; - width: $loading-height; - border-radius: 2 * $loading-height; - border: solid 3px; - border-color: var(--color-light-blue-color) var(--color-light-blue-color) - var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important; - animation: rotate 1s linear infinite; - } - - @keyframes rotate { - to { - transform: rotate(360deg); - } - } -} - @keyframes loading { 50% { transform: scale(1); @@ -199,7 +85,7 @@ $loading-height: 16px; display: flex; align-items: center; user-select: none; - // force this to black, to stay consistent with the password prompt being in dark mode too. + // Default theme is Classic Dark so we force this for the password prompt background-color: black; .content { diff --git a/stylesheets/_lightbox.scss b/stylesheets/_lightbox.scss index 0e454af01..22a1af32c 100644 --- a/stylesheets/_lightbox.scss +++ b/stylesheets/_lightbox.scss @@ -33,18 +33,18 @@ } &:hover { - background: var(--color-gray-color); + background: var(--gray-color); } &.save { &:before { - @include color-svg('../images/save.svg', white); + @include color-svg('../images/save.svg', var(--white-color)); } } &.close { &:before { - @include color-svg('../images/x.svg', white); + @include color-svg('../images/x.svg', var(--white-color)); } } } diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss index f47a758e0..e58cdb70a 100644 --- a/stylesheets/_mixins.scss +++ b/stylesheets/_mixins.scss @@ -1,30 +1,5 @@ -@mixin button-reset { - background: none; - color: inherit; - border: none; - padding: 0; - font: inherit; - cursor: pointer; - outline: inherit; -} - @mixin color-svg($svg, $color) { -webkit-mask: url($svg) no-repeat center; -webkit-mask-size: 100%; background-color: $color; } - -@mixin header-icon-white($svg) { - @include color-svg($svg, rgba(255, 255, 255, 0.8)); - &:focus, - &:hover { - @include color-svg($svg, white); - } -} -@mixin header-icon-black($svg) { - @include color-svg($svg, rgba(0, 0, 0, 0.5)); - &:focus, - &:hover { - @include color-svg($svg, black); - } -} diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index 9e3df3e82..1fcc0ef5e 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -15,7 +15,7 @@ margin: 100px auto; padding: 1em; background-color: var(--modal-background-content-color); - border-radius: $border-radius; + border-radius: var(--border-radius); overflow: auto; box-shadow: var(--modal-drop-shadow); } @@ -101,7 +101,7 @@ min-width: 60%; padding: 1em; background: var(--modal-background-content-color); - border-radius: $border-radius; + border-radius: var(--border-radius); overflow: auto; box-shadow: 0px 0px 15px 0px var(--modal-background-color); } diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 579d17c3a..fd52ce5b8 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -968,8 +968,7 @@ } // Module: Caption Editor -// TODO Theming We don't seem to use this can we delete?' -// TODO we will probably remove this and the related component. +// NOTE This is currently not in use .module-caption-editor { background-color: rgba(0, 0, 0, 0.8); z-index: 20; @@ -1139,7 +1138,6 @@ outline: none; } -// TODO Theming - Needs Improvement // Module H5AudioPlayer .module-message__container--outgoing { .rhap_container { diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 4ef3669c4..370129e7a 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -40,7 +40,7 @@ textarea { } ::selection { - background: var(--color-text-highlight); + background: var(--text-selection-color); } .shadowed { @@ -160,8 +160,7 @@ label { .conversation-header { .module-avatar img { - // TODO Theming Update - box-shadow: 0px 0px 5px 0px rgba(var(--color-white-color-rgb), 0.2); + box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.2); } .search-icon { diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index b74995e93..12539b210 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -18,21 +18,6 @@ } } -@keyframes pulseLight { - 0% { - box-shadow: 0px 0px 0px 0px var(--danger-color); - } - - // TODO Theming - Needs fixing - 50% { - box-shadow: 0px 0px 12px 0px rgba(var(--color-destructive-alt-rgb), 1); - } - - 100% { - box-shadow: 0px 0px 0px 0px rgba(var(--color-destructive-alt-rgb), 1); - } -} - .conversation-item__options-pane { position: absolute; height: 100%; diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 6a42b5d9d..7559e64ae 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -12,8 +12,6 @@ $session-compose-margin: 20px; &-list-item { background: var(--conversation-tab-background-color); - // TODO Theming, make everything have the default duration for transitioning colors - // transition: var(--default-duration); &:hover { background: var(--conversation-tab-background-hover-color); diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index d1da8a5f1..f173a0805 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -179,8 +179,7 @@ &-description-long { padding-top: 0; padding-bottom: 20px; - // TODO Theming needs to be updated - color: rgba(var(--black-color), 0.6); + color: var(--text-secondary-color); text-align: center; font-size: 12px; line-height: 20px; diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index 1bc8d3aaf..15c5c65a7 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -87,7 +87,6 @@ @include fontAccentBold(); } -// TODO Theming - Confirm this works h1 { @include session-h-title; color: var(--text-secondary-color); diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss deleted file mode 100644 index 0f75af332..000000000 --- a/stylesheets/_variables.scss +++ /dev/null @@ -1,9 +0,0 @@ -// A few layout variables used cross-file - -$header-height: 55px; -$button-height: 24px; - -$border-radius: 5px; - -$font-size: 14px; -$font-size-small: calc(13 / 14) + em; diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index e660524f3..14fcfa59a 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -7,9 +7,8 @@ @import '../node_modules/sanitize.css/forms.css'; @import '../node_modules/sanitize.css/typography.css'; -// Global Settings, Variables, and Mixins +// Global Settings and Mixins @import 'session_constants'; -@import 'variables'; @import 'mixins'; @import 'global'; diff --git a/ts/components/avatar/Avatar.tsx b/ts/components/avatar/Avatar.tsx index c088a53ab..e073ce270 100644 --- a/ts/components/avatar/Avatar.tsx +++ b/ts/components/avatar/Avatar.tsx @@ -55,8 +55,7 @@ const CrownWrapper = styled.div` color: #f7c347; background: var(--background-primary-color); border-radius: 50%; - /* TODO Theming update? */ - filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3)); + box-shadow: var(--drop-shadow); `; export const CrownIcon = () => { diff --git a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx index c51fe3412..dee98804c 100644 --- a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx +++ b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx @@ -21,7 +21,7 @@ const sha512FromPubkey = async (pubkey: string): Promise => { // key is the pubkey, value is the hash const cachedHashes = new Map(); -const avatarPlaceholderColors = Object.values(COLORS.PRIMARY); +const avatarPlaceholderColors: Array = Object.values(COLORS.PRIMARY); function useHashBasedOnPubkey(pubkey: string) { const [hash, setHash] = useState(undefined); @@ -80,7 +80,6 @@ export const AvatarPlaceHolder = (props: Props) => { if (loading || !hash) { // return grey circle - // TODO Theming update return ( @@ -90,7 +89,7 @@ export const AvatarPlaceHolder = (props: Props) => { r={rWithoutBorder} fill="#d2d2d3" shapeRendering="geometricPrecision" - stroke={'var(--color-avatar-border-color)'} + stroke={'var(--avatar-border-color)'} strokeWidth="1" /> @@ -106,7 +105,6 @@ export const AvatarPlaceHolder = (props: Props) => { const bgColor = avatarPlaceholderColors[bgColorIndex]; - // TODO Theming Update return ( @@ -116,7 +114,7 @@ export const AvatarPlaceHolder = (props: Props) => { r={rWithoutBorder} fill={bgColor} shapeRendering="geometricPrecision" - stroke={'var(--color-avatar-border-color)'} + stroke={'var(--avatar-border-color)'} strokeWidth="1" /> { dispatch(isToggled ? resetOverlayMode() : setOverlayMode('choose-action')); return ( - + { public static defaultProps = { showExitIcon: true, diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx index 8084164e5..d0ec15217 100644 --- a/ts/components/icon/SessionNotificationCount.tsx +++ b/ts/components/icon/SessionNotificationCount.tsx @@ -20,7 +20,6 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean }>` font-family: var(--font-default); border-radius: 50%; font-weight: 700; - /* TODO Theming Update */ background: var(--unread-messages-alert-background-color); transition: var(--default-duration); opacity: ${props => (props.shouldRender ? 1 : 0)}; diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx index c17088ca1..67f842633 100644 --- a/ts/components/leftpane/ActionsPanel.tsx +++ b/ts/components/leftpane/ActionsPanel.tsx @@ -73,9 +73,11 @@ const Section = (props: { type: SectionType }) => { ? currentTheme.replace('light', 'dark') : currentTheme.replace('dark', 'light')) as ThemeStateType; + // We want to persist the primary color when using the color mode button await switchThemeTo({ theme: newTheme, mainWindow: true, + usePrimaryColor: true, dispatch, }); } else if (type === SectionType.PathIndicator) { diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/ts/components/leftpane/MessageRequestsBanner.tsx index 5f721d799..7c4a71587 100644 --- a/ts/components/leftpane/MessageRequestsBanner.tsx +++ b/ts/components/leftpane/MessageRequestsBanner.tsx @@ -17,11 +17,8 @@ const StyledMessageRequestBanner = styled.div` padding: 8px 12px; // adjusting for unread border always being active align-items: center; cursor: pointer; - /* TODO Theming - Discuss with Connnor */ background: var(--conversation-tab-background-color); - transition: var(--default-duration); - &:hover { background: var(--conversation-tab-background-hover-color); } @@ -30,7 +27,7 @@ const StyledMessageRequestBanner = styled.div` const StyledMessageRequestBannerHeader = styled.span` font-weight: bold; font-size: var(--font-size-md); - color: var(--conversation-tab-text-color); + color: var(--text-primary-color); padding-left: var(--margins-xs); margin-inline-start: 12px; line-height: 18px; @@ -66,7 +63,6 @@ const StyledGridContainer = styled.div` align-items: center; border-radius: 50%; justify-content: center; - /* TODO Theming - Is this right? */ background-color: var(--text-secondary-color); `; @@ -79,7 +75,6 @@ export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: Sess diff --git a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx index 4badf4950..1a45cf2c9 100644 --- a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx +++ b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx @@ -116,7 +116,6 @@ const MentionAtSymbol = styled.span` cursor: pointer; :hover { - /* TODO Theming, should this be changed? */ filter: grayscale(0.7); } `; diff --git a/ts/components/menu/MessageRequestBannerContextMenu.tsx b/ts/components/menu/MessageRequestBannerContextMenu.tsx index 948e24e76..d7c3de2de 100644 --- a/ts/components/menu/MessageRequestBannerContextMenu.tsx +++ b/ts/components/menu/MessageRequestBannerContextMenu.tsx @@ -13,7 +13,6 @@ const MessageRequestBannerContextMenu = (props: PropsContextConversationItem) => const { triggerId } = props; return ( - // TODO Theming - Waiting on Session Components for correct colors diff --git a/ts/interactions/conversationInteractions.ts b/ts/interactions/conversationInteractions.ts index 1455c01bb..bb7059e56 100644 --- a/ts/interactions/conversationInteractions.ts +++ b/ts/interactions/conversationInteractions.ts @@ -491,7 +491,6 @@ export async function showLinkSharingConfirmationModalDialog(e: any) { const alreadyDisplayedPopup = (await Data.getItemById(hasLinkPreviewPopupBeenDisplayed))?.value || false; if (!alreadyDisplayedPopup) { - // TODO Theming possibly update window.inboxStore?.dispatch( updateConfirmModal({ shouldShowConfirm: diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 892c0e605..9806360cc 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -4,463 +4,9 @@ import { createGlobalStyle } from 'styled-components'; import { classicLight } from './'; import { declareCSSVariables, THEME_GLOBALS } from './globals'; -export const whiteColor = '#ffffff'; -const whiteColorRGB = '255, 255, 255'; // we need rgb values if we want css variables within rgba -const blackColor = '#000000'; -const blackColorRGB = '0, 0, 0'; // we need rgb values if we want css variables within rgba -const warning = '#e7b100'; -const destructive = '#ff453a'; -const destructiveAltColor = '#ff4538'; -const destructiveAltColorRGB = '255, 69, 56'; -const accentLightTheme = '#00e97b'; -const accentDarkTheme = '#00f782'; -const borderLightThemeColor = '#f1f1f1'; -const borderDarkThemeColor = '#ffffff0F'; - -// THEME INDEPEDENT COLORS -const sessionBlack = '#282829'; -const avatarBorderColor = '#00000059'; - -// Blacks - -// Blues -const lightBlueColor = '#a2d2f4'; -const darkBlueColor = '#2090ea'; - -// Greens -const sessionGreenColor = accentDarkTheme; - -// Grays -const grayColor = '#616161'; -const grayColorRBG = '97, 97, 97'; -const lightGrayColor = '#8b8e91'; -const lighterGrayColor = '#e9e9e9'; -const lightestGrayColor = '#f3f3f3'; -const darkGrayColor = '#414347'; -const darkGrayColorRGB = '65, 67, 71'; -const darkerGrayColor = '#2f2f2f'; -const darkestGrayColor = '#17191d'; - -// Transparent -const transparentColor = 'transparent'; - -// DARK COLORS -const darkColorAccent = accentDarkTheme; -const darkColorAccentRGB = '0, 247, 130'; -const darkColorAccentButton = accentDarkTheme; -const darkColorText = whiteColor; -const darkColorTextRGB = whiteColorRGB; -const darkColorTextOpposite = blackColor; - -const darkColorTextSubtle = `${whiteColor}99`; -const darkColorTextAccent = accentDarkTheme; -const darkColorSessionShadow = `0 0 4px 0 ${whiteColor}33`; -const darkColorComposeViewBg = '#232323'; -export const darkColorSentMessageBg = accentDarkTheme; -const darkColorClickableHovered = '#414347'; -const darkColorSessionBorder = `1px solid ${borderDarkThemeColor}`; -const darkColorSessionBorderColor = borderDarkThemeColor; -const darkColorRecoveryPhraseBannerBg = '#1f1f1f'; -const darkColorPillDivider = 'var(--color-darker-gray-color)'; -const darkColorLastSeenIndicator = accentDarkTheme; -const darkColorQuoteBottomBarBg = '#404040'; -const darkColorCellBackground = '#1b1b1b'; -export const darkColorReceivedMessageBg = '#2d2d2d'; -const darkColorReceivedMessageText = whiteColor; - -const darkColorPillDividerText = '#a0a0a0'; -const darkInputBackground = darkColorCellBackground; -const darkFilterSessionText = 'none'; -const darkUnreadBorder = `4px solid ${accentDarkTheme}`; - -const darkScrollbarThumb = darkGrayColor; -const darkFakeChatBubbleBg = '#212121'; - -const darkInboxBackground = '#171717'; -const darkLeftPaneOverlayBg = darkInboxBackground; -const darkConversationItemSelected = '#404040'; -const darkConversationItemHasUnread = '#2c2c2c'; -const darkConversationList = '#1b1b1b'; - -const darkTextHighlight = `${whiteColor}88`; -const darkForegroundPrimary = whiteColor; -const darkBackgroundPrimary = darkGrayColor; -const darkButtonGreen = accentDarkTheme; -const darkModalBackground = '#101011'; - -const grey67 = '#434343'; -const darkMessageRequestBannerBackground = darkConversationItemHasUnread; -const darkMessageRequestBannerIconBackground = grey67; -const darkMessageRequestBannerUnreadBackground = grey67; -const darkMessageRequestBannerIcon = '#adadad'; - -export const switchHtmlToDarkTheme = () => { - 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 +// Defaults to Classic 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; - --font-size-lg: 17px; - --font-size-h1: 30px; - --font-size-h2: 24px; - --font-size-h3: 20px; - --font-size-h4: 16px; - - /* MARGINS */ - --margins-xs: 5px; - --margins-sm: 10px; - --margins-md: 15px; - --margins-lg: 20px; - - /* PADDING */ - // TODO Theming - review and update after Audric has done link preview fix - --padding-message-content: 7px 13px; - --padding-link-preview: -7px -13px 7px -13px; // bottom has positive value because a link preview has always a body below - --border-radius-message-box: 16px; - - /* SIZES */ - --main-view-header-height: 63px; - - /* 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; - - /* COLORS NOT CHANGING BETWEEN THEMES */ - --color-black-color: ${blackColor}; - --color-black-color-rgb: ${blackColorRGB}; - --color-light-black-color: ${`rgba(${blackColorRGB}, 0.2)`}; - --color-lighter-black-color: ${`rgba(${blackColorRGB}, 0.15)`}; - --color-darkest-black-color: ${`rgba(${blackColorRGB}, 0.6)`}; - --color-session-green-color: ${sessionGreenColor}; - - --color-white-color: ${whiteColor}; - --color-white-color-rgb: ${whiteColorRGB}; - --color-lighter-white-color: ${`rgba(${whiteColorRGB}, 0.15)`}; - --color-darkest-white-color: ${`rgba(${whiteColorRGB}, 0.85)`}; - - --color-gray-color: ${grayColor}; - --color-gray-color-rgb: ${grayColorRBG}; - --color-light-gray-color: ${lightGrayColor}; - --color-lighter-gray-color: ${lighterGrayColor}; - --color-lightest-gray-color: ${lightestGrayColor}; - --color-dark-gray-color: ${darkGrayColor}; - --color-dark-gray-color-rgb: ${darkGrayColorRGB}; - --color-darker-gray-color: ${darkerGrayColor}; - --color-darkest-gray-color: ${darkestGrayColor}; - --color-light-blue-color: ${lightBlueColor}; - --color-dark-blue-color: ${darkBlueColor}; - --color-transparent-color: ${transparentColor}; - - --color-warning: ${warning}; - --color-destructive: ${destructive}; - --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 */ ${declareCSSVariables(THEME_GLOBALS)} ${declareCSSVariables(classicLight)} }; diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts index a2b27ee19..c3d8825a9 100644 --- a/ts/themes/classicDark.ts +++ b/ts/themes/classicDark.ts @@ -3,7 +3,6 @@ import { COLORS, THEMES } from './constants/colors'; import { ThemeColorVariables } from './variableColors'; const classicDark: ThemeColorVariables = { - '--primary-color': THEMES.CLASSIC_DARK.PRIMARY, '--danger-color': THEMES.CLASSIC_DARK.DANGER, '--disabled-color': THEMES.CLASSIC_DARK.DISABLED, @@ -12,6 +11,7 @@ const classicDark: ThemeColorVariables = { '--text-primary-color': THEMES.CLASSIC_DARK.COLOR6, '--text-secondary-color': THEMES.CLASSIC_DARK.COLOR5, + '--text-selection-color': `rgba(${hexColorToRGB(THEMES.CLASSIC_DARK.COLOR6)}, 0.5)`, '--border-color': THEMES.CLASSIC_DARK.COLOR3, @@ -42,9 +42,9 @@ const classicDark: ThemeColorVariables = { '--button-outline-background-hover-color': `rgba(${hexColorToRGB( THEMES.CLASSIC_DARK.COLOR6 )}, 0.3)`, - '--button-outline-text-color': 'var(--text-primary-color)', + '--button-outline-text-color': 'var(--primary-color)', '--button-outline-text-hover-color': 'var(--text-primary-color)', - '--button-outline-border-color': 'var(--text-primary-color)', + '--button-outline-border-color': 'var(--primary-color)', '--button-outline-border-hover-color': 'var(--text-primary-color)', '--button-outline-disabled-color': 'var(--disabled-color)', @@ -129,8 +129,6 @@ const classicDark: ThemeColorVariables = { '--context-menu-text-color': 'var(--text-primary-color)', '--context-menu-text-hover-color': 'var(--black-color)', - '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`, - '--suggestions-background-color': THEMES.CLASSIC_DARK.COLOR2, '--suggestions-background-hover-color': THEMES.CLASSIC_DARK.COLOR3, '--suggestions-text-color': 'var(--text-primary-color)', diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts index 361314059..29ec09d96 100644 --- a/ts/themes/classicLight.ts +++ b/ts/themes/classicLight.ts @@ -3,7 +3,6 @@ import { COLORS, THEMES } from './constants/colors'; import { ThemeColorVariables } from './variableColors'; const classicLight: ThemeColorVariables = { - '--primary-color': THEMES.CLASSIC_LIGHT.PRIMARY, '--danger-color': THEMES.CLASSIC_LIGHT.DANGER, '--disabled-color': THEMES.CLASSIC_LIGHT.DISABLED, @@ -12,6 +11,7 @@ const classicLight: ThemeColorVariables = { '--text-primary-color': THEMES.CLASSIC_LIGHT.COLOR0, '--text-secondary-color': THEMES.CLASSIC_LIGHT.COLOR1, + '--text-selection-color': `rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.5)`, '--border-color': THEMES.CLASSIC_LIGHT.COLOR3, @@ -129,8 +129,6 @@ const classicLight: ThemeColorVariables = { '--context-menu-text-color': 'var(--text-primary-color)', '--context-menu-text-hover-color': 'var(--black-color)', - '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`, - '--suggestions-background-color': 'var(--background-secondary-color)', '--suggestions-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4, '--suggestions-text-color': 'var(--text-primary-color)', diff --git a/ts/themes/constants/colors.tsx b/ts/themes/constants/colors.tsx index fbafa6ebd..996637788 100644 --- a/ts/themes/constants/colors.tsx +++ b/ts/themes/constants/colors.tsx @@ -23,6 +23,7 @@ type Colors = { TRANSPARENT: string; WHITE: string; BLACK: string; + GREY: string; }; // Session Brand Color @@ -59,6 +60,9 @@ const white = '#FFFFFF'; // Black const black = '#000000'; +// Grey +const grey = '#616161'; + const COLORS: Colors = { PRIMARY: { GREEN: primaryGreen, @@ -78,6 +82,7 @@ const COLORS: Colors = { TRANSPARENT: transparent, WHITE: white, BLACK: black, + GREY: grey, }; export type PrimaryColorStateType = diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx index 001cc22c9..623e5930e 100644 --- a/ts/themes/globals.tsx +++ b/ts/themes/globals.tsx @@ -1,9 +1,44 @@ import { hexColorToRGB } from '../util/hexColorToRGB'; import { COLORS } from './constants/colors'; -// For now this only keeps the colors -// TODO Theming add margin, padding, font, variables here. +// These variables are independant of the current theme export type ThemeGlobals = { + /* Fonts */ + '--font-default': string; + '--font-font-accent': string; + '--font-font-mono': string; + '--font-size-xs': string; + '--font-size-sm': string; + '--font-size-md': string; + '--font-size-lg': string; + '--font-size-h1': string; + '--font-size-h2': string; + '--font-size-h3': string; + '--font-size-h4': string; + + /* Margins */ + '--margins-xs': string; + '--margins-sm': string; + '--margins-md': string; + '--margins-lg': string; + + /* Padding */ + '--padding-message-content': string; + '--padding-link-preview': string; + + /* Border Radius */ + '--border-radius': string; + '--border-radius-message-box': string; + + /* Sizes */ + '--main-view-header-height': string; + '--composition-container-height': string; + '--search-input-height': string; + + /* Animations */ + '--default-duration': string; + + /* Colors */ '--green-color': string; '--blue-color': string; '--yellow-color': string; @@ -14,6 +49,7 @@ export type ThemeGlobals = { '--transparent-color': string; '--white-color': string; '--black-color': string; + '--grey-color': string; /* Shadows */ '--shadow-color': string; @@ -33,10 +69,50 @@ export type ThemeGlobals = { '--lightbox-background-color': string; '--lightbox-caption-background-color': string; '--lightbox-icon-stroke-color': string; + + /* Avatar Border */ + '--avatar-border-color': string; + + /* Message Link Preview */ + /* Also used for Images */ + /* Also used for the Media Grid Items */ + /* Also used for Staged Generic Attachments */ + /* Also used for FileDropZone */ + /* Used for Quote References Not Found */ + '--message-link-preview-background-color': string; }; // These are only set once in the global style (at root). export const THEME_GLOBALS: ThemeGlobals = { + '--font-default': 'Roboto', + '--font-font-accent': 'Loor', + '--font-font-mono': 'SpaceMono', + '--font-size-xs': '11px', + '--font-size-sm': '13px', + '--font-size-md': '15px', + '--font-size-lg': '17px', + '--font-size-h1': '30px', + '--font-size-h2': '24px', + '--font-size-h3': '20px', + '--font-size-h4': '16px', + + '--margins-xs': '5px', + '--margins-sm': '10px', + '--margins-md': '15px', + '--margins-lg': '20px', + + '--padding-message-content': '7px 13px', + '--padding-link-preview': '-7px -13px 7px -13px', // bottom has positive value because a link preview has always a body below + + '--border-radius': '5px', + '--border-radius-message-box': '16px', + + '--main-view-header-height': '63px', + '--composition-container-height': '60px', + '--search-input-height': '34px', + + '--default-duration': '0.25s', + '--green-color': COLORS.PRIMARY.GREEN, '--blue-color': COLORS.PRIMARY.BLUE, '--yellow-color': COLORS.PRIMARY.YELLOW, @@ -47,6 +123,7 @@ export const THEME_GLOBALS: ThemeGlobals = { '--transparent-color': COLORS.TRANSPARENT, '--white-color': COLORS.WHITE, '--black-color': COLORS.BLACK, + '--grey-color': COLORS.GREY, '--shadow-color': 'var(--black-color)', '--drop-shadow': `0 0 4px 0 var(--shadow-color)`, @@ -62,13 +139,16 @@ export const THEME_GLOBALS: ThemeGlobals = { '--lightbox-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8)`, '--lightbox-caption-background-color': 'rgba(192, 192, 192, .40)', '--lightbox-icon-stroke-color': 'var(--white-color)', + + '--avatar-border-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.59)`, + + '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`, }; // These should only be needed for the global style (at root). export function declareCSSVariables(variables: Record) { let output = ''; for (const [key, value] of Object.entries(variables)) { - console.log(`${key}: ${value}`); output += `${key}: ${value};\n`; } return output; diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts index 479c9b337..ce76e250c 100644 --- a/ts/themes/oceanDark.ts +++ b/ts/themes/oceanDark.ts @@ -3,7 +3,6 @@ import { COLORS, THEMES } from './constants/colors'; import { ThemeColorVariables } from './variableColors'; const oceanDark: ThemeColorVariables = { - '--primary-color': THEMES.OCEAN_DARK.PRIMARY, '--danger-color': THEMES.OCEAN_DARK.DANGER, '--disabled-color': THEMES.OCEAN_DARK.DISABLED, @@ -12,6 +11,7 @@ const oceanDark: ThemeColorVariables = { '--text-primary-color': THEMES.OCEAN_DARK.COLOR7!, '--text-secondary-color': THEMES.OCEAN_DARK.COLOR5, + '--text-selection-color': `rgba(${hexColorToRGB(THEMES.OCEAN_DARK.COLOR7!)}, 0.5)`, '--border-color': THEMES.OCEAN_DARK.COLOR4, @@ -42,7 +42,7 @@ const oceanDark: ThemeColorVariables = { '--button-outline-background-hover-color': `rgba(${hexColorToRGB( THEMES.OCEAN_DARK.COLOR7! )}, 0.3)`, - '--button-outline-text-color': 'var(--text-primary-color)', + '--button-outline-text-color': 'var(--primary-color)', '--button-outline-text-hover-color': 'var(--text-primary-color)', '--button-outline-border-color': 'var(--primary-color)', '--button-outline-border-hover-color': 'var(--text-primary-color)', @@ -129,8 +129,6 @@ const oceanDark: ThemeColorVariables = { '--context-menu-text-color': 'var(--text-primary-color)', '--context-menu-text-hover-color': 'var(--black-color)', - '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`, - '--suggestions-background-color': 'var(--background-secondary-color)', '--suggestions-background-hover-color': THEMES.OCEAN_DARK.COLOR4, '--suggestions-text-color': 'var(--text-primary-color)', diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts index 9b48b0e1c..d6a9be588 100644 --- a/ts/themes/oceanLight.ts +++ b/ts/themes/oceanLight.ts @@ -3,7 +3,6 @@ import { COLORS, THEMES } from './constants/colors'; import { ThemeColorVariables } from './variableColors'; const oceanLight: ThemeColorVariables = { - '--primary-color': THEMES.OCEAN_LIGHT.PRIMARY, '--danger-color': THEMES.OCEAN_LIGHT.DANGER, '--disabled-color': THEMES.OCEAN_LIGHT.DISABLED, @@ -12,6 +11,7 @@ const oceanLight: ThemeColorVariables = { '--text-primary-color': THEMES.OCEAN_LIGHT.COLOR1, '--text-secondary-color': THEMES.OCEAN_LIGHT.COLOR2, + '--text-selection-color': `rgba(${hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR1)}, 0.5)`, '--border-color': THEMES.OCEAN_LIGHT.COLOR3, @@ -129,8 +129,6 @@ const oceanLight: ThemeColorVariables = { '--context-menu-text-color': 'var(--text-primary-color)', '--context-menu-text-hover-color': 'var(--black-color)', - '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`, - '--suggestions-background-color': 'var(--background-secondary-color)', '--suggestions-background-hover-color': THEMES.OCEAN_LIGHT.COLOR4, '--suggestions-text-color': 'var(--text-primary-color)', 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; diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx index c32408dcd..5cefad6bc 100644 --- a/ts/themes/variableColors.tsx +++ b/ts/themes/variableColors.tsx @@ -1,6 +1,5 @@ // Default Theme should be Classic Dark export type ThemeColorVariables = { - '--primary-color': string; '--danger-color': string; '--disabled-color': string; @@ -11,6 +10,7 @@ export type ThemeColorVariables = { /* Text */ '--text-primary-color': string; '--text-secondary-color': string; + '--text-selection-color': string; /* Borders */ '--border-color': string; @@ -30,7 +30,6 @@ export type ThemeColorVariables = { /* Menu Button */ '--menu-button-background-color': string; '--menu-button-background-hover-color': string; - /* TODO Theming Make a icon fill varible that uses the background color? */ '--menu-button-icon-color': string; /* Chat (Interaction) Buttons */ @@ -47,20 +46,17 @@ export type ThemeColorVariables = { '--settings-tab-background-selected-color': string; '--settings-tab-text-color': string; - /* TODO Theming probably consolidate this */ /* Buttons */ /* Outline (Default) */ '--button-outline-background-color': string; '--button-outline-background-hover-color': string; '--button-outline-text-color': string; - /* TODO Theming we might not need this */ '--button-outline-text-hover-color': string; '--button-outline-border-color': string; '--button-outline-border-hover-color': string; '--button-outline-disabled-color': string; /* Solid */ - /* TODO Theming - Should Pills have their own colors */ /* Also used for Pills */ '--button-solid-background-color': string; '--button-solid-background-hover-color': string; @@ -68,7 +64,6 @@ export type ThemeColorVariables = { '--button-solid-text-hover-color': string; /* Solid buttons stay the same and rely on the disabled pointer */ '--button-solid-disabled-color': string; - /* TODO Theming - Only light themes have shadows? */ '--button-solid-shadow-color': string; /* Simple */ @@ -115,18 +110,15 @@ export type ThemeColorVariables = { /* Toggle Switch */ '--toggle-switch-ball-color': string; '--toggle-switch-ball-shadow-color': string; - /* TODO Theming think this should be white instead of transparent */ '--toggle-switch-off-background-color': string; '--toggle-switch-off-border-color': string; '--toggle-switch-on-background-color': string; '--toggle-switch-on-border-color': string; - /* TODO Theming Think this is part of the Convesations Tab */ /* Unread Messages Alert */ '--unread-messages-alert-background-color': string; '--unread-messages-alert-text-color': string; - /* toggles between the Light and Dark mode for a Theme */ /* Color Mode Button */ '--button-color-mode-stroke-color': string; '--button-color-mode-hover-color': string; @@ -138,8 +130,6 @@ export type ThemeColorVariables = { '--emoji-reaction-bar-icon-background-color': string; '--emoji-reaction-bar-icon-color': string; - /* TODO Theming - Should Pills have their own colors? */ - /* Modals */ '--modal-background-content-color': string; '--modal-text-color': string; @@ -169,15 +159,6 @@ export type ThemeColorVariables = { '--context-menu-text-color': string; '--context-menu-text-hover-color': string; - /* Message Link Preview */ - /* Also used for Images */ - /* Also used for the Media Grid Items */ - /* Also used for Staged Generic Attachments */ - /* Also used for FileDropZone */ - /* Used for Quote References Not Found */ - /* Same for all Themes */ - '--message-link-preview-background-color': string; - /* Suggestions i.e. Mentions and Emojis */ '--suggestions-background-color': string; '--suggestions-background-hover-color': string; diff --git a/ts/types/Reaction.ts b/ts/types/Reaction.ts index 01ada6352..89bf0a361 100644 --- a/ts/types/Reaction.ts +++ b/ts/types/Reaction.ts @@ -58,7 +58,6 @@ export interface NativeEmojiData { export interface FixedPickerProps { autoFocus?: boolean | undefined; title?: string | undefined; - // TODO Theming - Add Ocean Colors theme?: 'auto' | 'light' | 'dark' | undefined; perLine?: number | undefined; stickySearch?: boolean | undefined;