diff --git a/src/renderer/components/dialog/dialog.tsx b/src/renderer/components/dialog/dialog.tsx index f339ec973e..0bb3f76b75 100644 --- a/src/renderer/components/dialog/dialog.tsx +++ b/src/renderer/components/dialog/dialog.tsx @@ -12,6 +12,7 @@ import { reaction } from "mobx"; import { Animate } from "../animate"; import { cssNames, noop, stopPropagation } from "../../utils"; import { navigation } from "../../navigation"; +import { InputThemeContext } from "../input"; // todo: refactor + handle animation-end in props.onClose()? @@ -139,16 +140,18 @@ export class Dialog extends React.PureComponent { className = cssNames("Dialog flex center", className, { modal, pinned }); let dialog = ( -
-
this.contentElem = e}> - {this.props.children} + +
+
this.contentElem = e}> + {this.props.children} +
-
+ ); if (animated) { diff --git a/src/renderer/components/input/input.tsx b/src/renderer/components/input/input.tsx index 6b9c19521b..21a1370354 100644 --- a/src/renderer/components/input/input.tsx +++ b/src/renderer/components/input/input.tsx @@ -70,6 +70,8 @@ interface State { submitted: boolean; } +export const InputThemeContext = React.createContext("dark"); + const defaultProps: Partial = { rows: 1, maxRows: 10000, @@ -347,9 +349,10 @@ export class Input extends React.Component { ...inputProps } = this.props; const { dirty, valid, validating, errors } = this.state; + const theme = this.context; const className = cssNames(styles.Input, this.props.className, { - [styles.lightTheme]: lightTheme, + [styles.lightTheme]: lightTheme || theme == "light", [styles.disabled]: disabled, [styles.invalid]: !valid, [styles.dirty]: dirty, @@ -413,3 +416,5 @@ export class Input extends React.Component { ); } } + +Input.contextType = InputThemeContext; \ No newline at end of file