Merge pull request #4384 from marmelab/rich-text-dark-theme

Fix RichTextInput dark theme
marmelab · Feb 7, 2020 · e4afbbd · e4afbbd
2 parents 27213bc + c915342
commit e4afbbd
Showing 1 changed file with 30 additions and 14 deletions.
diff --git a/packages/ra-input-rich-text/src/styles.js b/packages/ra-input-rich-text/src/styles.js
@@ -61,7 +61,7 @@ export default theme => ({
                     fontWeight: 500,
                 },
                 '& a': {
-                    color: '#304ffe',
+                    color: theme.palette.primary.main,
                 },
                 '& ul': {
                     marginBottom: '1rem',
@@ -79,49 +79,64 @@ export default theme => ({
                 },
             },
             '& .standard .ql-editor': {
-                backgroundColor: 'white',
+                backgroundColor: theme.palette.text.primary,
             },
             '& .outlined .ql-editor': {
-                backgroundColor: 'white',
+                backgroundColor: theme.palette.text.primary,
             },
             '& .ql-toolbar.ql-snow': {
                 margin: '0.5rem 0',
                 border: 0,
                 padding: 0,
+
+                '& .ql-picker-item': {
+                    color: theme.palette.text.secondary,
+                },
+                '& .ql-stroke': {
+                    stroke: theme.palette.text.secondary,
+                },
+                '& .ql-fill': {
+                    fill: theme.palette.text.secondary,
+                },
                 '& .ql-picker-item.ql-active': {
-                    color: '#304ffe',
+                    color: theme.palette.primary.main,
                 },
                 '& .ql-picker-item:hover': {
-                    color: '#304ffe',
+                    color: theme.palette.primary.main,
                 },
                 '& .ql-picker-item.ql-selected': {
-                    color: '#304ffe',
+                    color: theme.palette.primary.main,
                 },
                 '& .ql-picker-label.ql-active': {
-                    color: '#304ffe',
+                    color: theme.palette.primary.main,
                 },
                 '& .ql-picker-label.ql-selected': {
-                    color: '#304ffe',
+                    color: theme.palette.primary.main,
                 },
                 '& .ql-picker-label:hover': {
-                    color: '#304ffe',
+                    color: theme.palette.primary.main,
                 },
 
                 '& button:hover .ql-fill': {
-                    fill: '#304ffe',
+                    fill: theme.palette.primary.main,
                 },
                 '& button.ql-active .ql-fill': {
-                    fill: '#304ffe',
+                    fill: theme.palette.primary.main,
                 },
 
                 '& button:hover .ql-stroke': {
-                    stroke: '#304ffe',
+                    stroke: theme.palette.primary.main,
                 },
                 '& button.ql-active .ql-stroke': {
-                    stroke: '#304ffe',
+                    stroke: theme.palette.primary.main,
                 },
                 '& .ql-picker-label:hover .ql-stroke': {
-                    stroke: '#304ffe',
+                    stroke: theme.palette.primary.main,
+                },
+
+                '& .ql-picker.ql-expanded .ql-picker-options': {
+                    backgroundColor: theme.palette.background.paper,
+                    borderColor: theme.palette.background.paper,
                 },
 
                 '& .ql-snow .ql-picker.ql-expanded .ql-picker-options': {
@@ -131,6 +146,7 @@ export default theme => ({
 
                 '& .ql-picker-label': {
                     paddingLeft: 0,
+                    color: theme.palette.text.secondary,
                 },
 
                 '& + .ql-container.ql-snow': {