feat: add dark theme

2025-04-05 07:44:38 +00:00 · 2024-08-02 20:55:01 +05:00 · 2024-08-02 20:55:01 +05:00 · 3e72866a08
commit 3e72866a08
parent 1588039542
22 changed files with 314 additions and 162 deletions
--- a/TODO.md
+++ b/TODO.md
@ -76,7 +76,7 @@

 ## Стиль

- [ ] Тёмная тема
+- [X] Тёмная тема
 - [ ] Больше метаданных для превью ссылки страницы

 ## Баги
--- a/app/App.tsx
+++ b/app/App.tsx
@ -12,7 +12,7 @@ export const App = (props) => {
  }, []);

  return (
-    <body className={`${inter.className} overflow-x-hidden`}>
+    <body className={`${inter.className} overflow-x-hidden dark:bg-[#0d1117] dark:text-white`}>
      <Navbar />
      {props.children}
    </body>
--- a/app/components/Comments/Comments.Main.tsx
+++ b/app/components/Comments/Comments.Main.tsx
@ -19,7 +19,7 @@ export const CommentsMain = (props: {
          </div>
          <Button
            size={"sm"}
-            className="text-gray-500 border border-gray-600 rounded-full"
+            className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
            color="inline"
          >
            Показать все
@ -45,19 +45,21 @@ export const CommentsMain = (props: {
            Оставить комментарий
          </Button>
        </form>
-        {props.comments.map((comment: any) => (
-          <CommentsComment
-            key={comment.id}
-            profile={comment.profile}
-            comment={{
-              id: comment.id,
-              timestamp: comment.timestamp,
-              message: comment.message,
-              likes: comment.likes_count,
-              reply_count: comment.reply_count,
-            }}
-          />
-        ))}
+        <div className="flex flex-col gap-2">
+          {props.comments.map((comment: any) => (
+            <CommentsComment
+              key={comment.id}
+              profile={comment.profile}
+              comment={{
+                id: comment.id,
+                timestamp: comment.timestamp,
+                message: comment.message,
+                likes: comment.likes_count,
+                reply_count: comment.reply_count,
+              }}
+            />
+          ))}
+        </div>
      </div>
    </Card>
  );
--- a/app/components/Navbar/Navbar.tsx
+++ b/app/components/Navbar/Navbar.tsx
@ -2,11 +2,20 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useUserStore } from "#/store/auth";
-import { Dropdown } from "flowbite-react";
+import { usePreferencesStore } from "#/store/preferences";
+import {
+  Dropdown,
+  Modal,
+  Button,
+  DarkThemeToggle,
+  useThemeMode,
+} from "flowbite-react";
+import { useState } from "react";

 export const Navbar = () => {
  const pathname = usePathname();
  const userStore: any = useUserStore((state) => state);
+  const [isSettingModalOpen, setIsSettingModalOpen] = useState(false);

  const navLinks = [
    {
@ -57,47 +66,125 @@ export const Navbar = () => {
  ];

  return (
-    <header className="fixed bottom-0 left-0 z-50 w-full text-white bg-black sm:sticky sm:top-0">
-      <div className="container flex items-center justify-between px-4 py-4 mx-auto">
-        <nav className="flex gap-4">
-          {navLinks.map((link) => {
-            return (
-              <Link
-                key={link.id}
-                href={link.href}
-                className={`flex-col items-center sm:flex-row ${
-                  link.withAuthOnly && !userStore.isAuth
-                    ? "hidden"
-                    : link.mobileMenu
-                    ? "hidden sm:flex"
-                    : "flex"
-                }`}
-              >
-                <span
-                  className={`iconify ${
-                    pathname == link.href ? link.iconActive : link.icon
-                  } w-6 h-6`}
-                ></span>
-                <span
-                  className={`${
-                    pathname == link.href ? "font-bold" : ""
-                  } text-xs sm:text-base`}
+    <>
+      <header className="fixed bottom-0 left-0 z-50 w-full text-white bg-black sm:sticky sm:top-0">
+        <div className="container flex items-center justify-between px-4 py-4 mx-auto">
+          <nav className="flex gap-4">
+            {navLinks.map((link) => {
+              return (
+                <Link
+                  key={link.id}
+                  href={link.href}
+                  className={`flex-col items-center sm:flex-row ${
+                    link.withAuthOnly && !userStore.isAuth
+                      ? "hidden"
+                      : link.mobileMenu
+                      ? "hidden sm:flex"
+                      : "flex"
+                  }`}
                >
-                  {link.title}
-                </span>
-              </Link>
-            );
-          })}
-        </nav>
-        {userStore.isAuth ? (
-          <div className="flex flex-col items-center justify-center gap-1 text-xs sm:flex-row sm:text-base">
-            <img
-              src={userStore.user.avatar}
-              alt=""
-              className="w-6 h-6 rounded-full"
-            />
+                  <span
+                    className={`iconify ${
+                      pathname == link.href ? link.iconActive : link.icon
+                    } w-6 h-6`}
+                  ></span>
+                  <span
+                    className={`${
+                      pathname == link.href ? "font-bold" : ""
+                    } text-xs sm:text-base`}
+                  >
+                    {link.title}
+                  </span>
+                </Link>
+              );
+            })}
+          </nav>
+          {userStore.isAuth ? (
+            <div className="flex flex-col items-center justify-center gap-1 text-xs sm:flex-row sm:text-base">
+              <img
+                src={userStore.user.avatar}
+                alt=""
+                className="w-6 h-6 rounded-full"
+              />
+              <Dropdown
+                label={userStore.user.login}
+                inline={true}
+                dismissOnClick={true}
+                theme={{
+                  arrowIcon:
+                    "ml-1 w-4 h-4 [transform:rotateX(180deg)] sm:transform-none",
+                }}
+              >
+                <Dropdown.Item className="text-sm md:text-base">
+                  <Link
+                    href={`/profile/${userStore.user.id}`}
+                    className="flex items-center gap-1"
+                  >
+                    <span
+                      className={`iconify ${
+                        pathname == `/profile/${userStore.user.id}`
+                          ? "font-bold mdi--user"
+                          : "mdi--user-outline"
+                      } w-4 h-4 sm:w-6 sm:h-6`}
+                    ></span>
+                    <span>Профиль</span>
+                  </Link>
+                </Dropdown.Item>
+                {navLinks.map((link) => {
+                  return (
+                    <Dropdown.Item
+                      key={link.id + "_mobile"}
+                      className={`${
+                        link.mobileMenu ? "block sm:hidden" : "hidden"
+                      } text-sm md:text-base`}
+                    >
+                      <Link
+                        href={link.href}
+                        className={`flex items-center gap-1`}
+                      >
+                        <span
+                          className={`iconify ${
+                            pathname == link.href ? link.iconActive : link.icon
+                          } w-4 h-4 sm:w-6 sm:h-6`}
+                        ></span>
+                        <span
+                          className={`${
+                            pathname == link.href ? "font-bold" : ""
+                          }`}
+                        >
+                          {link.title}
+                        </span>
+                      </Link>
+                    </Dropdown.Item>
+                  );
+                })}
+                <Dropdown.Item
+                  onClick={() => {
+                    setIsSettingModalOpen(true);
+                  }}
+                  className="flex items-center gap-1 text-sm md:text-base"
+                >
+                  <span
+                    className={`iconify material-symbols--settings-outline-rounded w-4 h-4 sm:w-6 sm:h-6`}
+                  ></span>
+                  <span>Настройки</span>
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => {
+                    userStore.logout();
+                  }}
+                  className="flex items-center gap-1 text-sm md:text-base"
+                >
+                  <span
+                    className={`iconify material-symbols--logout-rounded w-4 h-4 sm:w-6 sm:h-6`}
+                  ></span>
+                  <span>Выйти</span>
+                </Dropdown.Item>
+              </Dropdown>
+            </div>
+          ) : (
            <Dropdown
-              label={userStore.user.login}
+              label="Меню"
              inline={true}
              dismissOnClick={true}
              theme={{
@ -106,76 +193,82 @@ export const Navbar = () => {
              }}
            >
              <Dropdown.Item className="text-sm md:text-base">
-                <Link href={`/profile/${userStore.user.id}`} className="flex items-center gap-1">
+                <Link
+                  href="/login"
+                  className="flex items-center gap-1"
+                >
                  <span
-                    className={`iconify ${pathname == `/profile/${userStore.user.id}` ? "font-bold mdi--user" : "mdi--user-outline"} w-4 h-4 sm:w-6 sm:h-6`}
+                    className={`w-4 h-4 sm:w-6 sm:h-6 iconify ${
+                      pathname == "/login"
+                        ? "mdi--user-circle"
+                        : "mdi--user-circle-outline"
+                    }`}
                  ></span>
-                  <span>Профиль</span>
+                  <span
+                    className={`${
+                      pathname == "/login" ? "font-bold" : ""
+                    } text-xs sm:text-base`}
+                  >
+                    Войти
+                  </span>
                </Link>
              </Dropdown.Item>
-              {navLinks.map((link) => {
-                return (
-                  <Dropdown.Item
-                    key={link.id + "_mobile"}
-                    className={`${
-                      link.mobileMenu ? "block sm:hidden" : "hidden"
-                    } text-sm md:text-base`}
-                  >
-                    <Link
-                      href={link.href}
-                      className={`flex items-center gap-1`}
-                    >
-                      <span
-                        className={`iconify ${
-                          pathname == link.href ? link.iconActive : link.icon
-                        } w-4 h-4 sm:w-6 sm:h-6`}
-                      ></span>
-                      <span
-                        className={`${
-                          pathname == link.href ? "font-bold" : ""
-                        }`}
-                      >
-                        {link.title}
-                      </span>
-                    </Link>
-                  </Dropdown.Item>
-                );
-              })}
              <Dropdown.Item
                onClick={() => {
-                  userStore.logout();
+                  setIsSettingModalOpen(true);
                }}
-                className="text-sm md:text-base"
+                className="flex items-center gap-1 text-sm md:text-base"
              >
                <span
-                  className={`iconify material-symbols--logout-rounded w-4 h-4 sm:w-6 sm:h-6`}
+                  className={`iconify material-symbols--settings-outline-rounded w-4 h-4 sm:w-6 sm:h-6`}
                ></span>
-                <span>Выйти</span>
+                <span>Настройки</span>
              </Dropdown.Item>
            </Dropdown>
-          </div>
-        ) : (
-          <Link
-            href="/login"
-            className="flex flex-col items-center justify-center gap-1 sm:flex-row"
-          >
-            <span
-              className={`w-6 h-6 iconify ${
-                pathname == "/login"
-                  ? "mdi--user-circle"
-                  : "mdi--user-circle-outline"
-              }`}
-            ></span>
-            <span
-              className={`${
-                pathname == "/login" ? "font-bold" : ""
-              } text-xs sm:text-base`}
-            >
-              Войти
-            </span>
-          </Link>
-        )}
-      </div>
-    </header>
+          )}
+        </div>
+      </header>
+      <SettingsModal
+        isOpen={isSettingModalOpen}
+        setIsOpen={setIsSettingModalOpen}
+      />
+    </>
+  );
+};
+
+const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
+  const preferenceStore = usePreferencesStore();
+
+  const { computedMode, setMode } = useThemeMode();
+
+  return (
+    <Modal
+      dismissible
+      show={props.isOpen}
+      onClose={() => props.setIsOpen(false)}
+    >
+      <Modal.Header>Настройки</Modal.Header>
+      <Modal.Body>
+        <div className="space-y-6">
+          <div className="flex items-center justify-between">
+            <p className="font-bold dark:text-white">Тема</p>
+            <Button.Group>
+              <Button
+                color={computedMode == "light" ? "blue" : "gray"}
+                onClick={() => setMode("light")}
+              >
+                Светлая
+              </Button>
+              <Button
+                color={computedMode == "dark" ? "blue" : "gray"}
+                onClick={() => setMode("dark")}
+              >
+                Темная
+              </Button>
+            </Button.Group>
+          </div>
+        </div>
+      </Modal.Body>
+    </Modal>
  );
 };
--- a/app/components/RelatedSection/RelatedSection.tsx
+++ b/app/components/RelatedSection/RelatedSection.tsx
@ -29,7 +29,7 @@ export const RelatedSection = (props: any) => {
            {props.release_count} {declension} во франшизе
          </p>
          <Link href={`/related/${props.id}`}>
-          <div className="flex items-center px-8 py-2 transition border border-black rounded-full hover:text-white hover:bg-black">
+          <div className="flex items-center px-8 py-2 transition border border-black rounded-full hover:text-white hover:bg-black dark:border-white hover:dark:text-black hover:dark:bg-white">
            <p className="text-xl font-bold">Перейти</p>
            <span className="w-6 h-6 iconify mdi--arrow-right"></span>
          </div>
--- a/app/components/ReleaseCourusel/ReleaseCourusel.module.css
+++ b/app/components/ReleaseCourusel/ReleaseCourusel.module.css
@ -9,5 +9,7 @@
@media (hover: hover) {
  .section:hover .swiper-button {
    display: flex !important;
+    width: 64px;
+    height: 64px;
  }
 }
--- a/app/components/ReleaseCourusel/ReleaseCourusel.tsx
+++ b/app/components/ReleaseCourusel/ReleaseCourusel.tsx
@ -39,7 +39,7 @@ export const ReleaseCourusel = (props: {

  return (
    <section className={`${Styles.section}`}>
-      <div className="flex justify-between px-4 py-2 border-b-2 border-black">
+      <div className="flex justify-between px-4 py-2 border-b-2 border-black dark:border-white">
        <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
          {props.sectionTitle}
        </h1>
--- a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
@ -15,10 +15,10 @@ export const ReleaseInfoBasics = (props: {
        ></img>
        <div className="flex flex-col max-w-2xl gap-2 text-sm md:text-base">
          <div className="flex flex-col gap-1">
-            <p className="text-xl font-bold text-black md:text-2xl">
+            <p className="text-xl font-bold text-black md:text-2xl dark:text-white">
              {props.title.ru}
            </p>
-            <p className="text-sm text-gray-500 md:text-base">
+            <p className="text-sm text-gray-500 md:text-base dark:text-gray-400">
              {props.title.original}
            </p>
          </div>
--- a/app/components/ReleaseInfo/ReleaseInfo.Info.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Info.tsx
@ -53,7 +53,7 @@ export const ReleaseInfoInfo = (props: {
          </Table.Row>
          <Table.Row>
            <Table.Cell className="py-0">
-              <span className="w-8 h-8 iconify-color mdi--animation-play-outline "></span>
+              <span className="w-8 h-8 iconify-color mdi--animation-play-outline dark:invert"></span>
            </Table.Cell>
            <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
              {props.episodes.released ? props.episodes.released : "?"}
@ -64,7 +64,7 @@ export const ReleaseInfoInfo = (props: {
          </Table.Row>
          <Table.Row>
            <Table.Cell className="py-0">
-              <span className="w-8 h-8 iconify-color mdi--calendar-outline "></span>
+              <span className="w-8 h-8 iconify-color mdi--calendar-outline dark:invert"></span>
            </Table.Cell>
            <Table.Cell className="font-medium text-gray-900 dark:text-white">
              {props.category}
@ -76,7 +76,7 @@ export const ReleaseInfoInfo = (props: {
          </Table.Row>
          <Table.Row>
            <Table.Cell className="py-0">
-              <span className="w-8 h-8 iconify-color mdi--people-group-outline "></span>
+              <span className="w-8 h-8 iconify-color mdi--people-group-outline dark:invert"></span>
            </Table.Cell>
            <Table.Cell className="font-medium text-gray-900 dark:text-white">
              {props.studio && (
@ -112,7 +112,7 @@ export const ReleaseInfoInfo = (props: {
          </Table.Row>
          <Table.Row>
            <Table.Cell className="py-0">
-              <span className="w-8 h-8 iconify-color mdi--tag-outline "></span>
+              <span className="w-8 h-8 iconify-color mdi--tag-outline dark:invert"></span>
            </Table.Cell>
            <Table.Cell className="font-medium text-gray-900 dark:text-white">
              {props.genres &&
@ -129,7 +129,7 @@ export const ReleaseInfoInfo = (props: {
          {props.status.toLowerCase() == "анонс" && (
            <Table.Row>
              <Table.Cell className="py-0">
-                <span className="w-8 h-8 iconify-color mdi--clock-outline "></span>
+                <span className="w-8 h-8 iconify-color mdi--clock-outline dark:invert"></span>
              </Table.Cell>
              <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
                {props.aired_on_date != 0 ? (
--- a/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx
@ -46,7 +46,7 @@ export const ReleaseInfoRating = (props: {
                </p>
                <Button
                  size={"xs"}
-                  className="text-gray-500 border border-gray-600 rounded-full"
+                  className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
                  color="inline"
                >
                  изменить
@ -55,7 +55,7 @@ export const ReleaseInfoRating = (props: {
            ) : (
              <Button
                size={"xs"}
-                className="text-gray-500 border border-gray-600 rounded-full"
+                className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
                color="inline"
              >
                оценить
--- a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
@ -17,7 +17,7 @@ export const ReleaseInfoRelated = (props: {
 }) => {
  return (
    <Card>
-      <div className="flex justify-between py-2 border-b-2 border-black">
+      <div className="flex justify-between py-2 border-b-2 border-black dark:border-white">
        <h1>Связанные релизы</h1>
        {props.related && (
          <Link href={`/related/${props.related.id}`}>
--- a/app/components/ReleaseInfo/ReleaseInfo.UserList.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.UserList.tsx
@ -13,7 +13,7 @@ const lists = [
 const DropdownTheme = {
  floating: {
    target:
-      "flex-1 bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+      "flex-1",
  },
 };

@ -57,6 +57,7 @@ export const ReleaseInfoUserList = (props: {
            label={lists[props.userList].name}
            dismissOnClick={true}
            theme={DropdownTheme}
+            color="blue"
          >
            {lists.map((list) => (
              <Dropdown.Item
@ -68,7 +69,7 @@ export const ReleaseInfoUserList = (props: {
            ))}
          </Dropdown>
          <Button
-            className="bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            color="blue"
            onClick={() => {
              _addToFavorite();
            }}
--- a/app/components/ReleaseLink/ReleaseLink.16_9.tsx
+++ b/app/components/ReleaseLink/ReleaseLink.16_9.tsx
@ -21,12 +21,14 @@ export const ReleaseLink169 = (props: any) => {
  return (
    <Link href={`/release/${props.id}`}>
      <div className="w-full aspect-video group">
-        <div className="relative w-full h-full overflow-hidden bg-gradient-to-t from-black to-transparent">
-          <img
+        <div className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] " style={{
+            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
+          }}>
+          {/* <img
            className="absolute z-0 object-cover w-full h-full transition mix-blend-overlay group-hover:scale-110"
            src={props.image}
            alt=""
-          />
+          /> */}
          <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
            <Chip
              bg_color={
--- a/app/components/ReleasePlayer/ReleasePlayer.tsx
+++ b/app/components/ReleasePlayer/ReleasePlayer.tsx
@ -8,16 +8,10 @@ import { useState, useEffect } from "react";

 const DropdownTheme = {
  floating: {
-    target:
-      "w-full md:min-w-[256px] md:w-fit bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+    target: "w-full md:min-w-[256px] md:w-fit",
  },
 };

-const ButtonThemeInactive =
-  "bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
-const ButtonThemeActive =
-  "bg-blue-800 dark:bg-blue-600 disabled:opacity-100 dark:disabled:opacity-100";
-
 async function _fetch(url: string) {
  const data = fetch(url)
    .then((res) => {
@ -103,10 +97,7 @@ export const ReleasePlayer = (props: { id: number }) => {
      ) : (
        <>
          <div className="flex flex-wrap gap-2">
-            <Dropdown
-              label={`Озвучка: ${selectedVoiceover.name}`}
-              theme={DropdownTheme}
-            >
+            <Dropdown label={`Озвучка: ${selectedVoiceover.name}`} color="blue">
              {voiceoverInfo.map((voiceover: any) => (
                <Dropdown.Item
                  key={`voiceover_${voiceover.id}`}
@ -116,10 +107,7 @@ export const ReleasePlayer = (props: { id: number }) => {
                </Dropdown.Item>
              ))}
            </Dropdown>
-            <Dropdown
-              label={`Плеер: ${selectedSource.name}`}
-              theme={DropdownTheme}
-            >
+            <Dropdown label={`Плеер: ${selectedSource.name}`} color="blue">
              {sourcesInfo.map((source: any) => (
                <Dropdown.Item
                  key={`source_${source.id}`}
@ -141,11 +129,12 @@ export const ReleasePlayer = (props: { id: number }) => {
            <div className="flex gap-2 p-2 overflow-x-auto scrollbar-thin">
              {episodeInfo.map((episode: any) => (
                <Button
-                  className={`text-center min-w-fit ${
+                  color={
                    selectedEpisode.position === episode.position
-                      ? ButtonThemeActive
-                      : ButtonThemeInactive
-                  }`}
+                      ? "blue"
+                      : "light"
+                  }
+                  theme={{base: "min-w-fit disabled:opacity-100"}}
                  key={`episode_${episode.position}`}
                  onClick={() => {
                    setSelectedEpisode(episode);
--- a/app/components/ReleaseSection/ReleaseSection.tsx
+++ b/app/components/ReleaseSection/ReleaseSection.tsx
@ -4,7 +4,7 @@ export const ReleaseSection = (props: any) => {
  return (
    <section>
      {props.sectionTitle && (
-        <div className="flex justify-between px-4 py-2 border-b-2 border-black">
+        <div className="flex justify-between px-4 py-2 border-b-2 border-black dark:border-white">
          <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
            {props.sectionTitle}
          </h1>
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,5 +1,6 @@
 import "./globals.css";
 import { App } from "./App";
+import { ThemeModeScript } from "flowbite-react";

 export const metadata = {
  title: {
@ -11,7 +12,10 @@ export const metadata = {

 export default function RootLayout({ children }) {
  return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <ThemeModeScript />
+      </head>
      <App>{children}</App>
    </html>
  );
--- a/app/pages/BookmarksCategory.tsx
+++ b/app/pages/BookmarksCategory.tsx
@ -62,13 +62,13 @@ export function BookmarksCategoryPage(props: any) {
  const DropdownTheme = {
    floating: {
      target:
-        "w-fit bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+        "w-fit bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:enabled:hover:bg-blue-700 dark:focus:ring-blue-800",
    },
  };

  return (
    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
-      <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black">
+      <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
        <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
          {props.SectionTitleMapping[props.slug]}
        </h1>
--- a/app/pages/Favorites.tsx
+++ b/app/pages/Favorites.tsx
@ -61,13 +61,13 @@ export function FavoritesPage() {
  const DropdownTheme = {
    floating: {
      target:
-        "w-fit bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+        "w-fit bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:enabled:hover:bg-blue-700 dark:focus:ring-blue-800",
    },
  };

  return (
    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
-      <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black">
+      <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
        <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
          Избранное
        </h1>
--- a/app/pages/History.tsx
+++ b/app/pages/History.tsx
@ -57,7 +57,7 @@ export function HistoryPage() {

  return (
    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
-      <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black">
+      <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
        <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
          История
        </h1>
--- a/app/pages/Related.tsx
+++ b/app/pages/Related.tsx
@ -58,7 +58,7 @@ export function RelatedPage(props: {id: number|string, title: string}) {

  return (
    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
-      <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black">
+      <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
        <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
          Франшиза {props.title}
        </h1>
--- a/app/store/preferences.ts
+++ b/app/store/preferences.ts
@ -1,10 +1,42 @@
 "use client";
 import { create } from "zustand";
-import { persist, createJSONStorage } from "zustand/middleware";
+import { persist } from "zustand/middleware";

-export const usePreferencesStore = create(
+interface preferencesState {
+  flags: {
+    // saveSearchHistory: boolean;
+    saveWatchHistory: boolean;
+    // theme: "light" | "dark" | "black" | "system";
+  };
+  params: {
+    isFirstLaunch: boolean;
+    // color: {
+    //   primary: string;
+    //   secondary: string;
+    //   accent: string;
+    // }
+  };
+  setFlags: (flags: preferencesState["flags"]) => void;
+  setParams: (params: preferencesState["params"]) => void;
+}
+
+export const usePreferencesStore = create<preferencesState>()(
  persist(
    (set, get) => ({
+      flags: {
+        // saveSearchHistory: true,
+        saveWatchHistory: true,
+        // theme: "light",
+      },
+      params: {
+        isFirstLaunch: true,
+      },
+      setFlags(flags) {
+        set({ flags });
+      },
+      setParams(params) {
+        set({ params });
+      },
    }),
    {
      name: "preferences",
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -11,7 +11,34 @@ module.exports = {
  ],
  plugins: [
    addIconSelectors(["mdi", "material-symbols", "twemoji", "fa6-brands"]),
-    require('tailwind-scrollbar'),
+    require("tailwind-scrollbar"),
    flowbite.plugin(),
  ],
+  darkMode: "selector",
+  theme: {
+    extend: {
+      animation: {
+        bg_zoom: "bg_zoom 150ms linear",
+        bg_zoom_rev: "bg_zoom_rev 150ms linear",
+      },
+      keyframes: {
+        bg_zoom: {
+          "0%": {
+            "background-size": "100% auto",
+          },
+          "100%": {
+            "background-size": "110% auto",
+          },
+        },
+        bg_zoom_rev: {
+          "0%": {
+            "background-size": "110% auto",
+          },
+          "100%": {
+            "background-size": "100% auto",
+          },
+        },
+      },
+    },
+  },
 };