diff --git a/lib/constants.ts b/lib/constants.ts index 20d71bca..bcc9519f 100644 --- a/lib/constants.ts +++ b/lib/constants.ts @@ -317,6 +317,8 @@ export const LABEL_COLORS = [ ]; export const REGEX_IMAGE_EXTENSION = /\.(gif|jpe?g|tiff|png)$/i; +export const DARK_MODE_CLASS = 'isDarkMode'; + export enum LINK_WARNING { KEY = 'link_warning', VALUE = 'dontAsk' diff --git a/lib/themes/helpers.js b/lib/themes/helpers.js index c8bdbbae..781215c6 100644 --- a/lib/themes/helpers.js +++ b/lib/themes/helpers.js @@ -1,4 +1,5 @@ import { PROTON_THEMES, CUSTOM_THEME, DEFAULT_THEME } from './themes'; +import { DARK_MODE_CLASS } from '../constants'; const { protonThemeIdentifiers, protonThemes } = Object.values(PROTON_THEMES).reduce( (acc, { identifier, theme }) => { @@ -84,3 +85,14 @@ export const getTheme = (themeIdentifier) => { * @returns {String} */ export const toStyle = (themes = []) => themes.join('\n'); + +/** + * Given two arguments, the second meant to be used in dark mode and the first in the other cases, + * pick the appropiate one depending on whether the class 'isDarkMode' is in the body or not + * @param {*} light + * @param {*} dark + * @return {*} + */ +export const getLightOrDark = (light, dark) => { + return document.body.classList.contains(DARK_MODE_CLASS) ? dark : light; +};