dark theme

upvorg · Mar 27, 2024 · 7f1f9b8 · 7f1f9b8
1 parent ff2d461
commit 7f1f9b8
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 18 deletions.
diff --git a/packages/index/src/components/comment/index.scss b/packages/index/src/components/comment/index.scss
@@ -141,7 +141,7 @@
   }
 }
 
-.dark .video-comment .video-comment-edit__input {
+.theme-dark .video-comment .video-comment-edit__input {
   background-color: rgba(255, 255, 255, 0.15);
   border: none;
 }
diff --git a/packages/index/src/components/header/index.scss b/packages/index/src/components/header/index.scss
@@ -14,22 +14,22 @@
   padding: 0;
 }
 
-.dark .navbar-burger {
+.theme-dark .navbar-burger {
   color: unset;
 }
 
-html.dark body .navbar,
-html.dark .navbar-menu {
+html.theme-dark body .navbar,
+html.theme-dark .navbar-menu {
   background-color: #000 !important;
 }
 
-.dark a:hover,
-.dark .navbar-item,
+.theme-dark a:hover,
+.theme-dark .navbar-item,
 .navbar-link {
   color: #fff;
 }
 
-.dark {
+.theme-dark {
   a.navbar-item:focus,
   a.navbar-item:focus-within,
   a.navbar-item:hover,

diff --git a/packages/index/src/components/video-card/index.scss b/packages/index/src/components/video-card/index.scss
@@ -92,7 +92,7 @@
   }
 }
 
-.dark .upv-video-card a {
+.theme-dark .upv-video-card a {
   background-color: #4a4a4a;
 }
 
@@ -121,7 +121,7 @@
 }
 
 @media (max-width: 768px) {
-  .live-card .live-avatar{
+  .live-card .live-avatar {
     width: 60px;
     height: 60px;
   }

diff --git a/packages/index/src/hooks/useDarkMode.ts b/packages/index/src/hooks/useDarkMode.ts
@@ -19,11 +19,12 @@ export const useDarkModeInternal = (
   options: DarkModeConfig = {} as any
 ): IMediaStore => {
   const {
-    classNameDark = 'dark',
-    classNameLight = 'light',
+    classNameDark = 'theme-dark',
+    classNameLight = 'theme-light',
     storageKey = darkModeKey,
     element = globalThis.document && document.documentElement,
-    transition = !!(document as any).startViewTransition && !window.matchMedia(`(prefers-reduced-motion: reduce)`).matches
+    transition = !!(document as any).startViewTransition &&
+    !window.matchMedia(`(prefers-reduced-motion: reduce)`).matches
       ? (document as any).startViewTransition()
       : undefined,
   } = options

diff --git a/packages/index/src/index.scss b/packages/index/src/index.scss
@@ -1,9 +1,11 @@
 @charset "utf-8";
 
 // @import url('https://fonts.googleapis.com/css?family=Nanum Pen Script');
+
 @import '../node_modules/@web/shared/theme.scss';
 
 @import 'bulma/sass/themes';
+
 @import '../../../node_modules/bulma/sass/base';
 @import '../../../node_modules/bulma/sass/utilities';
 @import '../../../node_modules/bulma/sass/form';
@@ -33,7 +35,7 @@ html {
   --black: $light;
 }
 
-html.dark body {
+html.theme-dark body {
   background-color: #000 !important;
   color: $light !important;
   --white: $light;
@@ -47,15 +49,15 @@ html.dark body {
   mix-blend-mode: normal;
 }
 
-.dark::view-transition-old(root) {
+.theme-dark::view-transition-old(root) {
   z-index: 9999;
 }
 
-.dark::view-transition-new(root) {
+.theme-dark::view-transition-new(root) {
   z-index: 1;
 }
 
-html.dark body .footer {
+html.theme-dark body .footer {
   background-color: var(--white, white);
 }
 

diff --git a/packages/index/src/pages/player/index.scss b/packages/index/src/pages/player/index.scss
@@ -30,7 +30,7 @@ $pr: 340px;
   }
 }
 
-.dark {
+.theme-dark {
   .player-header__r .eplist_module .list-wrapper .list-item {
     background-color: #000;
     color: rgba(255, 255, 255, 0.7);

diff --git a/packages/index/src/pages/player/info.scss b/packages/index/src/pages/player/info.scss
@@ -87,7 +87,7 @@
   }
 }
 
-.dark {
+.theme-dark {
   .modal-card-body,
   .rc-md-editor,
   .markdown-body {

diff --git a/packages/shared/theme.scss b/packages/shared/theme.scss
@@ -8,6 +8,8 @@ $primary: #6668ab;
   --primary-color: #6668ab;
   --caption-color: #86909c;
   --p: #6668ab;
+  --primary: red;
+  --secondary: #068295;
 }
 
 :root {