Fix secondary button in dark mode

src/lib/color-scheme/is-dark-theme.tsx

@@ -0,0 +1,3 @@
+export const isDarkTheme = () => {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+};

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();

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;
 

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;

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