dark

app/src/App.js

@@ -11,7 +11,7 @@ export default function App() {
 	}
 
 
-	return <div className="App h-full">
+	return <div className="App h-full dark:bg-black dark:text-white">
 		{user ? <Chat user={user} /> : <InitPage setUser={setUser} />}
 	</div>
 }

app/src/Chat.js

@@ -70,7 +70,7 @@ function ChatInput({sendMessage}) {
 	}
 	return <form onSubmit={onSubmit}>
 		<input
-		 	className="p-4 w-full"
+		 	className="p-4 w-full dark:bg-black"
 			type="text"
 			onChange={event => setContent(event.target.value)}
 			value={content}

app/src/InitPage.js

@@ -10,33 +10,19 @@ export default function InitPage({setUser}) {
 		setUser({name, color});
 	}
 
-	return <div className="InitPage p-6 content-center">
-		<div className="block p-6 rounded-lg shadow-lg bg-white max-w-sm m-auto">
+	return <div className="InitPage p-3">
+		<div className="">
 			<form onSubmit={onSubmit}>
-				<div>welcome to chat app</div>
-				<div>
-				<label for="name">enter name:</label>
-				<input type="text" id="name" className="form-control
-				block
-				w-full
-				px-3
-				py-1.5
-				text-base
-				font-normal
-				text-gray-700
-				bg-white bg-clip-padding
-				border border-solid border-gray-300
-				rounded
-				transition
-				ease-in-out
-				m-0
-				focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" value={name} onChange={event => setName(event.target.value)} />
+				<div className="m-1">welcome to chat app</div>
+				<div className="m-1">
+				<label for="name" className="mr-2">enter name:</label>
+				<input type="text" id="name" className="dark:bg-black border p-1" value={name} onChange={event => setName(event.target.value)} />
 				</div>
-				<div>
-				<label for="color">choose color:</label>
+				<div className="m-1">
+				<label for="color" className="mr-2">choose color:</label>
 				<input type="color" id="color" value={color} onChange={event => setColor(event.target.value)} />
 				</div>
-				<div><input type="submit" className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out" value="ok go"></input></div>
+				<div className="m-1"><input type="submit" className="border p-1" value="ok go"></input></div>
 			</form>
 		</div>
 	</div>