diff --git a/redisinsight/ui/src/contexts/themeContext.tsx b/redisinsight/ui/src/contexts/themeContext.tsx index 62eae330a2..138ecc313f 100644 --- a/redisinsight/ui/src/contexts/themeContext.tsx +++ b/redisinsight/ui/src/contexts/themeContext.tsx @@ -4,7 +4,6 @@ import { theme as redisUiOldTheme, CommonStyles, themeLight, - themeDark, } from '@redis-ui/styles' import 'modern-normalize/modern-normalize.css' import '@redis-ui/styles/normalized-styles.css' @@ -19,6 +18,7 @@ import { DEFAULT_THEME, } from '../constants' import { localStorageService, themeService } from '../services' +import { customDarkTheme } from 'uiSrc/styles/custom/dark_theme' interface Props { children: React.ReactNode @@ -98,7 +98,7 @@ export class ThemeProvider extends React.Component { const { theme, usingSystemTheme }: any = this.state const uiTheme = theme === Theme.Dark - ? themeDark + ? customDarkTheme : theme === Theme.Light ? themeLight : redisUiOldTheme diff --git a/redisinsight/ui/src/styles/custom/dark_theme/color.ts b/redisinsight/ui/src/styles/custom/dark_theme/color.ts new file mode 100644 index 0000000000..403e44af92 --- /dev/null +++ b/redisinsight/ui/src/styles/custom/dark_theme/color.ts @@ -0,0 +1,3 @@ +export const color = { + dusk000: '#ffffff', +} diff --git a/redisinsight/ui/src/styles/custom/dark_theme/components/ButtonGroup.ts b/redisinsight/ui/src/styles/custom/dark_theme/components/ButtonGroup.ts new file mode 100644 index 0000000000..f989acefe3 --- /dev/null +++ b/redisinsight/ui/src/styles/custom/dark_theme/components/ButtonGroup.ts @@ -0,0 +1,16 @@ +import { DeepPartial } from '@reduxjs/toolkit' +import { ButtonGroupTheme, themeDark } from '@redis-ui/styles' +import { color } from 'uiSrc/styles/custom/dark_theme/color' + +export const buttonGroup: DeepPartial = { + button: { + toggleStates: { + on: { + normal: { + bgColor: themeDark.color.azure600, + textColor: color.dusk000, + }, + }, + }, + }, +} diff --git a/redisinsight/ui/src/styles/custom/dark_theme/components/index.ts b/redisinsight/ui/src/styles/custom/dark_theme/components/index.ts new file mode 100644 index 0000000000..d8a8370498 --- /dev/null +++ b/redisinsight/ui/src/styles/custom/dark_theme/components/index.ts @@ -0,0 +1,5 @@ +import { buttonGroup } from './ButtonGroup' + +export default { + buttonGroup, +} diff --git a/redisinsight/ui/src/styles/custom/dark_theme/index.ts b/redisinsight/ui/src/styles/custom/dark_theme/index.ts new file mode 100644 index 0000000000..b0055648c0 --- /dev/null +++ b/redisinsight/ui/src/styles/custom/dark_theme/index.ts @@ -0,0 +1,7 @@ +import { merge } from 'lodash' +import { themeDark } from '@redis-ui/styles' +import { color } from 'uiSrc/styles/custom/dark_theme/color' +import components from 'uiSrc/styles/custom/dark_theme/components' + +// Create modified dark theme with legacy colors +export const customDarkTheme = merge({}, themeDark, { color }, { components })