From f9c7c7e9988d2fd08efb6cef48f1d6f2484fe03e Mon Sep 17 00:00:00 2001
From: Gorbachev Egor <7gorbachevm@gmail.com>
Date: Wed, 15 Nov 2023 18:30:36 +0700
Subject: [PATCH] Fix secondary button in dark mode

---
 src/lib/color-scheme/is-dark-theme.tsx        | 3 +++
 src/screens/deck-review/deck-preview.tsx      | 1 +
 src/screens/deck-review/review.tsx            | 1 +
 src/screens/deck-review/share-deck-button.tsx | 2 ++
 src/ui/button.tsx                             | 5 ++++-
 5 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/color-scheme/is-dark-theme.tsx

diff --git a/src/lib/color-scheme/is-dark-theme.tsx b/src/lib/color-scheme/is-dark-theme.tsx
new file mode 100644
index 00000000..57221575
--- /dev/null
+++ b/src/lib/color-scheme/is-dark-theme.tsx
@@ -0,0 +1,3 @@
+export const isDarkTheme = () => {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+};
diff --git a/src/screens/deck-review/deck-preview.tsx b/src/screens/deck-review/deck-preview.tsx
index a8169ff8..2c9bec14 100644
--- a/src/screens/deck-review/deck-preview.tsx
+++ b/src/screens/deck-review/deck-preview.tsx
@@ -11,6 +11,7 @@ import { Button } from "../../ui/button.tsx";
 import { ShareDeckButton } from "./share-deck-button.tsx";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
+import { isDarkTheme } from "../../lib/color-scheme/is-dark-theme.tsx";
 
 export const DeckPreview = observer(() => {
   const reviewStore = useReviewStore();
diff --git a/src/screens/deck-review/review.tsx b/src/screens/deck-review/review.tsx
index 69f2ea8f..638e17c3 100644
--- a/src/screens/deck-review/review.tsx
+++ b/src/screens/deck-review/review.tsx
@@ -11,6 +11,7 @@ import { useReviewStore } from "../../store/review-store-context.tsx";
 import { Button } from "../../ui/button.tsx";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { useHotkeys } from "react-hotkeys-hook";
+import { isDarkTheme } from "../../lib/color-scheme/is-dark-theme.tsx";
 
 const rotateBorder = 80;
 
diff --git a/src/screens/deck-review/share-deck-button.tsx b/src/screens/deck-review/share-deck-button.tsx
index f69150ac..baa6aeed 100644
--- a/src/screens/deck-review/share-deck-button.tsx
+++ b/src/screens/deck-review/share-deck-button.tsx
@@ -3,6 +3,8 @@ import { assert } from "../../lib/typescript/assert.ts";
 import { trimEnd } from "../../lib/string/trim.ts";
 import WebApp from "@twa-dev/sdk";
 import { Button } from "../../ui/button.tsx";
+import { theme } from "../../ui/theme.tsx";
+import { isDarkTheme } from "../../lib/color-scheme/is-dark-theme.tsx";
 
 type Props = {
   deckId: number;
diff --git a/src/ui/button.tsx b/src/ui/button.tsx
index a19ec9c6..8237bdca 100644
--- a/src/ui/button.tsx
+++ b/src/ui/button.tsx
@@ -3,6 +3,7 @@ import React, { useMemo } from "react";
 import { colord } from "colord";
 import { reset } from "./reset.ts";
 import { theme } from "./theme.tsx";
+import { isDarkTheme } from "../lib/color-scheme/is-dark-theme.tsx";
 
 type Props = {
   mainColor?: string;
@@ -70,7 +71,9 @@ export const Button = (props: Props) => {
         }),
         outline &&
           css({
-            backgroundColor: parsedColor.lighten(0.4).toHex(),
+            backgroundColor: parsedColor
+              .lighten(isDarkTheme() ? 0.2 : 0.4)
+              .toHex(),
             color: mainColor,
             ":hover": noPseudoClasses
               ? undefined