1 files changed, 11 insertions, 0 deletions
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 7b8642761..a0a187e5f 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -1,3 +1,5 @@
+import { darken } from 'polished';
+
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
@@ -30,6 +32,7 @@ export interface ContainerProps {
     opacity?: number;
     cursor?: string;
     overflow?: string;
+    darkenOnHover?: boolean;
 }
 
 export const Container =
@@ -64,6 +67,14 @@ export const Container =
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
+    &:hover {
+        ${props =>
+            props.darkenOnHover
+                ? `background-color: ${
+                      props.backgroundColor ? darken(0.05, props.theme[props.backgroundColor]) : 'none'
+                  }`
+                : ''};
+    }
 `;
 
 Container.defaultProps = {