Add primitive dark mode

package.json

@@ -15,6 +15,7 @@
     "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "sass": "^1.57.1",
     "zod": "^3.20.2"
   },
   "devDependencies": {

src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import { type AppType } from "next/dist/shared/lib/utils";
 
-import "../styles/globals.css";
+import "../styles/globals.scss";
 
 const MyApp: AppType = ({ Component, pageProps }) => {
   return <Component {...pageProps} />;

src/pages/index.tsx

@@ -247,7 +247,7 @@ const Index: NextPage = () => {
                   }
 
                 `}</style>
-                <nav className="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm">
+                <nav className="navbar navbar-expand-lg navbar-dark shadow-sm">
                   <span className="text-white" style={{fontSize: 'larger'}}>
                     <a className="navbar-brand" href="#">rdap.xevion.dev</a>
                   </span>
@@ -260,7 +260,9 @@ const Index: NextPage = () => {
                             <div className="input-group">
 
                                 <div className="input-group-prepend">
-                                    <select className="custom-select" id="type" name="type"
+                                    <select onChange={() => {
+                                        return false;
+                                    }} className="custom-select bg-zinc-800 border-zinc-700 text-zinc-200" id="type" name="type"
                                             value={uriType}>
                                         <option value="domain">Domain</option>
                                         <option value="tld">TLD</option>
@@ -273,7 +275,7 @@ const Index: NextPage = () => {
                                     </select>
                                 </div>
 
-                                <input className="form-control"
+                                <input className="form-control bg-zinc-800 focus:bg-zinc-700 focus:border-zinc-600 border-zinc-700 text-zinc-200"
                                        type="text"
                                        placeholder={placeholders[uriType]}
                                        disabled={loading}

src/styles/globals.scss

@@ -11,3 +11,18 @@ dd {
 [title]:not(.no-title) {
     border-bottom: 1px dashed silver;
 }
+
+body {
+    @apply bg-zinc-900 text-white;
+}
+
+.card {
+    @apply bg-zinc-800;
+    .card-header {
+        @apply bg-zinc-700;
+    }
+}
+
+.navbar {
+    @apply bg-zinc-850;
+}

tailwind.config.cjs

@@ -2,7 +2,13 @@
 module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        zinc: {
+          850: "#1D1D20"
+        }
+      },
+    },
   },
   plugins: [],
 };

yarn.lock

@@ -536,7 +536,7 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -1347,6 +1347,11 @@ immutability-helper@^3.1.1:
   resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-3.1.1.tgz#2b86b2286ed3b1241c9e23b7b21e0444f52f77b7"
   integrity sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ==
 
+immutable@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.2.2.tgz#2da9ff4384a4330c36d4d1bc88e90f9e0b0ccd16"
+  integrity sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -2143,6 +2148,15 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
+sass@^1.57.1:
+  version "1.57.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.57.1.tgz#dfafd46eb3ab94817145e8825208ecf7281119b5"
+  integrity sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
@@ -2193,7 +2207,7 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==