Fix color issue in light theme (#23)

pbkit · Jun 13, 2022 · 53ccd68 · 53ccd68
1 parent 8114400
commit 53ccd68
Show file tree

Hide file tree

Showing 5 changed files with 971 additions and 3 deletions.
diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx
@@ -2,7 +2,8 @@ import type { AppProps } from "next/app";
 import "normalize.css/normalize.css";
 import "open-color/open-color.css";
 import "./_app.scss";
-import "flexlayout-react/style/dark.scss";
+import "../styles/flexlayout-light.scss";
+import "../styles/flexlayout-dark.scss";
 
 const App: React.FC<AppProps> = ({ Component, pageProps }) => {
   return <Component {...pageProps} />;

diff --git a/src/pages/_app.scss b/src/pages/_app.scss
@@ -43,10 +43,15 @@ button {
 
 input {
   border: 0;
-  color: var(--oc-gray-5);
-  background-color: var(--oc-gray-9);
   padding: 0.25em;
   margin: 3px 0px;
+  color: var(--oc-gray-9);
+  background-color: var(--oc-gray-5);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--oc-gray-5);
+    background-color: var(--oc-gray-9);
+  }
 
   &:hover {
     box-shadow: 0 0 0 1px var(--pb-sep);