keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

feat: removed old themes and switching functions

Browse Source
pull/2522/head
William Grant 3 years ago
parent b1314a9eb6
commit 9062d2c609
3 changed files with 2 additions and 363 deletions
Show Stats Download Patch File Download Diff File

15
ts/components/button/MenuButton.tsx
Unescape Escape View File

@ -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 (
<StyledMenuButton
data-testid="new-conversation-button"
// TODO Theming Maybe move to StyleMenuInput
style={
{
'--bg-color': 'var(--color-accent-button)',
'--hover-bg-color': 'var(--color-accent-button)',
'--fg-color': 'white',
} as CSSProperties
}
onClick={onClickFn}
>
<StyledMenuButton data-testid="new-conversation-button" onClick={onClickFn}>
<SessionIcon
iconSize="small"
iconType="plusFat"

345
ts/themes/SessionTheme.tsx
Unescape Escape View File

@ -18,7 +18,6 @@ const borderLightThemeColor = '#f1f1f1';
const borderDarkThemeColor = '#ffffff0F';
// THEME INDEPEDENT COLORS
const sessionBlack = '#282829';
const avatarBorderColor = '#00000059';
// Blacks
@ -44,309 +43,6 @@ 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
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 */

5
ts/themes/switchTheme.tsx
Unescape Escape View File

@ -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;

Write Preview
Loading…
Cancel
Save