diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index aac71a326..7f805b7de 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -183,14 +183,13 @@ label { visibility: hidden; } -// TODO Theming update .Toastify__toast { - background: var(--modal-background-content-color); - color: var(--modal-text-color); - border-left: 4px solid var(--primary-color); + background: var(--toast-background-color); + color: var(--toast-text-color); + border-left: 4px solid var(--toast-color-strip-color); .Toastify__close-button { - color: var(--modal-text-color); + color: var(--toast-text-color); } .Toastify__progress-bar { diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 18ddb5d22..babdca503 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -630,7 +630,10 @@ export const SessionGlobalStyles = createGlobalStyle` --modal-drop-shadow: 0px 0px 10px rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22); /* Toasts */ - --toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1); + --toast-background-color: 'var(--background-primary-color)'; + --toast-text-color: 'var(--text-primary-color)'; + --toast-color-strip-color: 'var(--primary-color)'; + --toast-progress-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1); /* Right Panel Items */ /* Also used for Session Dropdown */ diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx index faabdf28a..df86cab70 100644 --- a/ts/themes/switchTheme.tsx +++ b/ts/themes/switchTheme.tsx @@ -330,9 +330,15 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) { document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)'); document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)'); + document.documentElement.style.setProperty( + '--toast-background-color', + 'var(--background-primary-color)' + ); + document.documentElement.style.setProperty('--toast-text-color', 'var(--text-primary-color)'); + document.documentElement.style.setProperty('--toast-color-strip-color', 'var(--primary-color)'); document.documentElement.style.setProperty( '--toast-progress-color', - `rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1)` + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)` ); document.documentElement.style.setProperty( @@ -746,10 +752,15 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) { document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)'); document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)'); - // TODO Theming - Update + document.documentElement.style.setProperty( + '--toast-background-color', + 'var(--background-primary-color)' + ); + document.documentElement.style.setProperty('--toast-text-color', 'var(--text-primary-color)'); + document.documentElement.style.setProperty('--toast-color-strip-color', 'var(--primary-color)'); document.documentElement.style.setProperty( '--toast-progress-color', - `rgba(${hexColorToRGB(THEMES.CLASSIC_DARK.COLOR0)}, 0.1)` + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)` ); document.documentElement.style.setProperty( @@ -1164,9 +1175,15 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) { document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)'); document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)'); + document.documentElement.style.setProperty( + '--toast-background-color', + 'var(--background-primary-color)' + ); + document.documentElement.style.setProperty('--toast-text-color', 'var(--text-primary-color)'); + document.documentElement.style.setProperty('--toast-color-strip-color', 'var(--primary-color)'); document.documentElement.style.setProperty( '--toast-progress-color', - `rgba(${hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR0)}, 0.1)` + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)` ); document.documentElement.style.setProperty( @@ -1573,10 +1590,15 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) { document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)'); document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)'); - // TODO Theming - Update + document.documentElement.style.setProperty( + '--toast-background-color', + 'var(--background-secondary-color)' + ); + document.documentElement.style.setProperty('--toast-text-color', 'var(--text-primary-color)'); + document.documentElement.style.setProperty('--toast-color-strip-color', 'var(--primary-color)'); document.documentElement.style.setProperty( '--toast-progress-color', - `rgba(${hexColorToRGB(THEMES.OCEAN_DARK.COLOR0)}, 0.1)` + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)` ); document.documentElement.style.setProperty(