2 files changed, 27 insertions, 0 deletions
diff --git a/src/web/components/darken/Darken.css b/src/web/components/darken/Darken.css
new file mode 100644
index 0000000..bd3b151
--- /dev/null
+++ b/src/web/components/darken/Darken.css
@@ -0,0 +1,14 @@
+.darken {
+    visibility: hidden;
+
+    position: fixed;
+    inset: 0;
+
+    background-color: rgba(0, 0, 0, 0.0);
+    cursor: pointer;
+    transition: background-color var(--transition-time) ease-in-out;
+}
+.darkenActive {
+    visibility: initial;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+\ No newline at end of file
diff --git a/src/web/components/darken/Darken.jsx b/src/web/components/darken/Darken.jsx
new file mode 100644
index 0000000..7f46365
--- /dev/null
+++ b/src/web/components/darken/Darken.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./Darken.css";
+
+export default function Darken({active, className, ...others}) {
+
+    return (
+        <div 
+            className={styles.darken
+                + (active ? " " + styles.darkenActive : "")
+                + (className ? " " + className : "")}
+            {...others} />
+    );
+}
+\ No newline at end of file