diff --git a/src/pages/settings/components/ThemeCard.tsx b/src/pages/settings/components/ThemeCard.tsx
index ef66fe9..78a93bb 100644
--- a/src/pages/settings/components/ThemeCard.tsx
+++ b/src/pages/settings/components/ThemeCard.tsx
@@ -28,7 +28,10 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
backgroundSize: 'cover',
backgroundColor: theme.backgroundColor,
border: `solid ${theme.borderColor}`,
- color: theme.primaryColor,
+ color:
+ theme.borderColor === theme.primaryColor
+ ? theme.accentColor
+ : theme.primaryColor,
}}
data-theme={theme.name}
onClick={() => {
@@ -132,7 +135,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
paddingRight: '0px',
position: 'absolute',
right: 3,
- backgroundColor: '#ffffff66',
+ backgroundColor: '#ffffff88',
borderTopLeftRadius: '10px',
borderBottomLeftRadius: '10px',
}}
@@ -176,8 +179,9 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
className={actionIconClasses.editButton}
classNames={actionIconClasses}
onClick={() => handleOpen(theme)}
+ mb={2}
>
-
+
)}
diff --git a/src/styles/ActionIcon.module.css b/src/styles/ActionIcon.module.css
index aaf8a3e..84dacf9 100644
--- a/src/styles/ActionIcon.module.css
+++ b/src/styles/ActionIcon.module.css
@@ -21,8 +21,8 @@
.editButton {
&.root {
- background-color: transparent !important;
- color: var(--color-text-pri) !important;
+ background-color: white !important;
+ color: black !important;
.icon {
font-size: 24px;
}