Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-11 00:33:03 +00:00
Code Issues Projects Releases Wiki Activity

Dark Mode (#33)

Browse Source 
* Add dark mode to webiste

* wip

* wip

* wip

* wip

* wip

* Add dark mode to all components and fix some style
This commit is contained in:
khatab Wedaa
2020-12-26 12:35:46 +02:00
committed by GitHub
parent 705673eb96
commit ce79c7f31a
44 changed files with 642 additions and 629 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/ui/Heros/WithPattern.vue
View File

@@ -26,20 +26,20 @@
</div>
<div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
<div class="max-w-sm bg-white rounded-lg">
<div class="max-w-sm bg-white dark:bg-gray-800 rounded-lg">
<div class="p-5 text-center">
<h2 class="text-2xl font-semibold text-gray-700 fo">Sign In</h2>
<h2 class="text-2xl font-semibold text-gray-700 dark:text-white fo">Sign In</h2>
<form action="#">
<div class="mt-4">
<input class="w-full py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="email" placeholder="Email address" aria-label="Email address">
<input class="w-full mt-4 py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="password" placeholder="Password" aria-label="Password">
<input class="w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email address" aria-label="Email address">
<input class="mt-4 w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
</div>
<div class="mt-4 flex items-center justify-between">
<a href="#" class="text-gray-600 text-sm hover:underline">Forget Password?</a>
<a href="#" class="text-gray-600 dark:text-gray-200 text-sm hover:underline">Forget Password?</a>
<button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800">Login</button>
<button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-800 dark:focus:bg-gray-700">Login</button>
</div>
</form>
</div>
@@ -83,20 +83,20 @@
</div>
<div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
<div class="max-w-sm bg-white rounded-lg">
<div class="max-w-sm bg-white dark:bg-gray-800 rounded-lg">
<div class="p-5 text-center">
<h2 class="text-2xl font-semibold text-gray-700 fo">Sign In</h2>
<h2 class="text-2xl font-semibold text-gray-700 dark:text-white fo">Sign In</h2>
<form action="#">
<div class="mt-4">
<input class="w-full py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="email" placeholder="Email address" aria-label="Email address">
<input class="w-full mt-4 py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="password" placeholder="Password" aria-label="Password">
<input class="w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email address" aria-label="Email address">
<input class="mt-4 w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
</div>
<div class="mt-4 flex items-center justify-between">
<a href="#" class="text-gray-600 text-sm hover:underline">Forget Password?</a>
<a href="#" class="text-gray-600 dark:text-gray-200 text-sm hover:underline">Forget Password?</a>
<button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800">Login</button>
<button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-800 dark:focus:bg-gray-700">Login</button>
</div>
</form>
</div>