From d87cc00fc83bb2bc5c1ffa69b4dad71d51e1cc66 Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Sun, 6 Mar 2022 16:46:05 +0800
Subject: Make theme switch a native select/option menu

---
 src/components/shared/ThemeSwitcher.module.scss | 58 +++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/components/shared/ThemeSwitcher.module.scss

(limited to 'src/components/shared/ThemeSwitcher.module.scss')

diff --git a/src/components/shared/ThemeSwitcher.module.scss b/src/components/shared/ThemeSwitcher.module.scss
new file mode 100644
index 0000000..c5de126
--- /dev/null
+++ b/src/components/shared/ThemeSwitcher.module.scss
@@ -0,0 +1,58 @@
+.iconWrapper {
+  --sz: 40px;
+
+  width: var(--sz);
+  height: var(--sz);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  outline: none;
+  padding: 5px;
+  color: var(--color-text);
+  border-radius: 100%;
+  border: 1px solid transparent;
+}
+.iconWrapper:hover {
+  opacity: 0.6;
+}
+.iconWrapper:focus {
+  border-color: var(--color-focus-blue);
+}
+
+.themeSwitchContainer {
+  --sz: 40px;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--sz);
+  select {
+    cursor: pointer;
+    padding-left: var(--sz);
+    width: var(--sz);
+    height: var(--sz);
+    appearance: none;
+    outline: none;
+    border-radius: 100%;
+    border: 1px solid transparent;
+    background: var(--color-bg-sidebar);
+    &:focus {
+      border-color: var(--color-focus-blue);
+    }
+    option {
+      // this has effect in Firefox
+      // Chrome and Safari use the native menu
+      background: var(--color-bg-sidebar);
+    }
+  }
+  .iconWrapper {
+    pointer-events: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
-- 
cgit v1.3.1