Skip to content
This repository was archived by the owner on Jan 24, 2022. It is now read-only.

Commit cb4dec0

Browse files
khatabwedaakhatabwedaa
committed
Dark Mode
1 parent 1ba74ad commit cb4dec0

12 files changed

+346
-285
lines changed

‎source/_assets/css/app.css

+26-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,29 @@
22

33
@import "tailwindcss/components";
44

5-
@import "tailwindcss/utilities";
5+
@import "tailwindcss/utilities";
6+
7+
8+
[v-cloak] {
9+
display: none
10+
}
11+
12+
::-webkit-scrollbar {
13+
width: 10px;
14+
}
15+
16+
::-webkit-scrollbar {
17+
height: 7px;
18+
}
19+
20+
::-webkit-scrollbar-track {
21+
background: #EBF8FF;
22+
}
23+
24+
::-webkit-scrollbar-thumb {
25+
background: #11d3cf;
26+
}
27+
28+
::-webkit-scrollbar-thumb:hover {
29+
background: #0ea09d;
30+
}

‎source/_assets/js/app.js

+25
Original file line numberDiff line numberDiff line change
@@ -1 +1,26 @@
11
import 'alpinejs';
2+
3+
window.ToggleDark = () => {
4+
return {
5+
darkMode: false,
6+
7+
created() {
8+
this.darkMode = JSON.parse(localStorage.getItem('darkMode'))
9+
this.set()
10+
},
11+
12+
toggle() {
13+
this.darkMode = !this.darkMode
14+
localStorage.setItem('darkMode', this.darkMode)
15+
this.set()
16+
},
17+
18+
set() {
19+
if (this.darkMode) {
20+
document.querySelector('html').classList.add('dark')
21+
return
22+
}
23+
document.querySelector('html').classList.remove('dark')
24+
}
25+
}
26+
}

‎source/_layouts/footer.blade.php

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
<div class="bg-gray-100">
1+
<div class="bg-gray-100 dark:bg-gray-800">
22
<div class="container flex flex-col items-center px-4 py-5 mx-auto space-y-6 lg:space-y-0 lg:flex-row lg:justify-between">
3-
<img class="w-48" src="/assets/logo.svg" alt="Tailwindcomponents logo">
3+
<div class="w-48 text-gray-700 dark:text-gray-200">
4+
@include('_layouts.logo')
5+
</div>
46

5-
<p class="text-sm text-center text-gray-500">© 2021 Highscore Studio. Component copyrights belongs to their authors.</p>
7+
<p class="text-sm text-center text-gray-500 dark:text-gray-300">© 2021 Highscore Studio. Component copyrights belongs to their authors.</p>
68

79
<div class="flex items-center space-x-6">
8-
<a href="#" class="text-sm text-gray-500 hover:underline">Privacy</a>
9-
<a href="#" class="text-sm text-gray-500 hover:underline">Legal</a>
10-
<a href="#" class="text-sm text-gray-500 hover:underline">Cookies</a>
10+
<a href="#" class="text-sm text-gray-500 dark:text-gray-300 hover:underline">Privacy</a>
11+
<a href="#" class="text-sm text-gray-500 dark:text-gray-300 hover:underline">Legal</a>
12+
<a href="#" class="text-sm text-gray-500 dark:text-gray-300 hover:underline">Cookies</a>
1113
</div>
1214

1315
</div>

‎source/_layouts/logo.blade.php

+13
Large diffs are not rendered by default.

‎source/_layouts/master.blade.php

+41-37
Original file line numberDiff line numberDiff line change
@@ -18,44 +18,48 @@
1818
<script src="{{ mix('js/app.js', 'assets/build') }}"></script>
1919
</head>
2020
<body class="font-roboto">
21-
<header class="border-b" x-data="{ isOpen: false }">
22-
<div class="container px-4 py-5 mx-auto space-y-4 lg:space-y-0 lg:flex lg:items-center lg:justify-between lg:space-x-10">
23-
<div class="flex justify-between">
24-
<img class="w-48 lg:-mt-1 sm:w-60" src="/assets/logo.svg" alt="Tailwindcomponents logo">
25-
26-
<div class="flex items-center space-x-2 lg:hidden">
27-
<button @click="isOpen = !isOpen" class="p-1 rounded-md hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">
28-
<svg class="w-6 h-6 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
29-
<path fill-rule="evenodd"
30-
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
31-
clip-rule="evenodd" />
32-
</svg>
33-
</button>
21+
<div class="dark:bg-gray-900">
22+
<header class="border-b dark:border-gray-700" x-data="{ isOpen: false }">
23+
<div class="container px-4 py-5 mx-auto space-y-4 lg:space-y-0 lg:flex lg:items-center lg:justify-between lg:space-x-10">
24+
<div class="flex justify-between">
25+
<div class="text-gray-700 dark:text-gray-200">
26+
@include('_layouts.logo')
27+
</div>
28+
29+
<div class="flex items-center space-x-2 lg:hidden">
30+
<button @click="isOpen = !isOpen" class="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-gray-800 focus:outline-none">
31+
<svg class="w-6 h-6 text-gray-500 dark:text-gray-300" viewBox="0 0 20 20" fill="currentColor">
32+
<path fill-rule="evenodd"
33+
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
34+
clip-rule="evenodd" />
35+
</svg>
36+
</button>
37+
</div>
38+
</div>
39+
40+
<div x-show="isOpen"
41+
x-transition:enter="transition ease-out duration-100 transform"
42+
x-transition:enter-start="opacity-0 scale-95"
43+
x-transition:enter-end="opacity-100 scale-100"
44+
x-transition:leave="transition ease-in duration-75 transform"
45+
x-transition:leave-start="opacity-100 scale-100"
46+
x-transition:leave-end="opacity-0 scale-95"
47+
class="flex flex-col space-y-4 lg:hidden"
48+
>
49+
@include('_layouts.nav')
50+
</div>
51+
52+
<div class="hidden lg:flex lg:flex-row lg:items-center lg:justify-between lg:flex-1 lg:space-x-2">
53+
@include('_layouts.nav')
3454
</div>
3555
</div>
36-
37-
<div x-show="isOpen"
38-
x-transition:enter="transition ease-out duration-100 transform"
39-
x-transition:enter-start="opacity-0 scale-95"
40-
x-transition:enter-end="opacity-100 scale-100"
41-
x-transition:leave="transition ease-in duration-75 transform"
42-
x-transition:leave-start="opacity-100 scale-100"
43-
x-transition:leave-end="opacity-0 scale-95"
44-
class="flex flex-col space-y-4 lg:hidden"
45-
>
46-
@include('_layouts.nav')
47-
</div>
48-
49-
<div class="hidden lg:flex lg:flex-row lg:items-center lg:justify-between lg:flex-1 lg:space-x-2">
50-
@include('_layouts.nav')
51-
</div>
52-
</div>
53-
</header>
54-
55-
<main>
56-
@yield('body')
57-
</main>
58-
59-
@include('_layouts.footer')
56+
</header>
57+
58+
<main>
59+
@yield('body')
60+
</main>
61+
62+
@include('_layouts.footer')
63+
</div>
6064
</body>
6165
</html>

‎source/_layouts/nav.blade.php

+18-13
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,31 @@
11
<div class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:space-x-6 xl:space-x-8 lg:items-center">
22
<a class="text-primary hover:underline" href="/">Home</a>
3-
<a class="text-gray-500 hover:text-primary hover:underline" href="/components">Components</a>
4-
<a class="text-gray-500 hover:text-primary hover:underline" href="#">Featured</a>
5-
<a class="text-gray-500 hover:text-primary hover:underline" href="#">Blog</a>
6-
<a class="text-gray-500 hover:text-primary hover:underline" href="#">Cheatsheet</a>
3+
<a class="text-gray-500 dark:text-gray-200 hover:text-primary hover:underline" href="/components">Components</a>
4+
<a class="text-gray-500 dark:text-gray-200 hover:text-primary hover:underline" href="#">Featured</a>
5+
<a class="text-gray-500 dark:text-gray-200 hover:text-primary hover:underline" href="#">Blog</a>
6+
<a class="text-gray-500 dark:text-gray-200 hover:text-primary hover:underline" href="#">Cheatsheet</a>
77
</div>
88

99
<div class="flex flex-col space-y-4 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4">
10-
<button class="flex justify-center py-2 bg-gray-100 rounded-md lg:bg-transparent lg:p-2 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">
11-
<svg class="w-5 h-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
12-
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
13-
</svg>
10+
<button x-data="ToggleDark()" x-init="created()" title="Dark Mode" @click.prevent="toggle()" class="flex justify-center py-2 text-gray-500 bg-gray-100 rounded-md dark:text-gray-200 dark:bg-gray-800 lg:dark:bg-transparent lg:bg-transparent lg:p-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-800 dark:focus:bg-gray-800 focus:outline-none">
11+
<svg x-show="darkMode" class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
12+
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
13+
</svg>
14+
15+
<svg x-show="!darkMode" class="w-5 h-5 transform -rotate-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
16+
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
17+
</svg>
1418
</button>
1519

1620
<a href="#" class="px-4 py-2 text-sm font-semibold text-center text-white rounded-md bg-primary hover:bg-teal-300">
1721
Submit new component
1822
</a>
1923

20-
<div class="relative" @mouseover="dropdown = true" @mouseover.away="dropdown = false" x-data="{ dropdown: false }">
24+
<div class="relative" @click.away="dropdown = false" x-data="{ dropdown: false }">
2125
<!-- Dropdown toggle button -->
22-
<button class="flex items-center justify-center space-x-2 focus:outline-none">
26+
<button @click="dropdown = !dropdown" class="flex items-center justify-center space-x-2 focus:outline-none">
2327
<img class="object-cover w-8 h-8 border-2 rounded-full border-primary lg:w-10 lg:h-10 " src="https://images.unsplash.com/photo-1502767882403-636aee14f873?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
24-
<span class="font-medium text-gray-800 lg:hidden">Jane Doe</span>
28+
<span class="font-medium text-gray-800 dark:text-gray-200 lg:hidden">Jane Doe</span>
2529
</button>
2630

2731
<!-- Dropdown menu -->
@@ -33,7 +37,7 @@
3337
x-transition:leave="transition ease-in duration-75 transform"
3438
x-transition:leave-start="opacity-100 scale-100"
3539
x-transition:leave-end="opacity-0 scale-95"
36-
class="absolute left-0 z-20 w-48 py-1 mt-2 bg-white border border-gray-100 rounded-md shadow-xl lg:left-auto lg:right-0 dark:bg-gray-800">
40+
class="absolute left-0 z-20 w-48 py-1 mt-2 bg-white border border-gray-100 rounded-md shadow-xl dark:border-gray-700 lg:left-auto lg:right-0 dark:bg-gray-800">
3741
<a href="/profile" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-primary hover:text-white dark:hover:text-white">
3842
your profile
3943
</a>
@@ -46,7 +50,8 @@ class="absolute left-0 z-20 w-48 py-1 mt-2 bg-white border border-gray-100 round
4650
Settings
4751
</a>
4852

49-
<hr>
53+
<hr class="dark:border-gray-700">
54+
5055
<a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-primary hover:text-white dark:hover:text-white">
5156
Log Out
5257
</a>

0 commit comments

Comments
 (0)