8000 Dark mode · mohammedaktaa/paste.laravel.io@9476b24 · GitHub
[go: up one dir, main page]
Skip to content

Commit 9476b24

Browse files
driesvintsdriesvints
committed
Dark mode
1 parent 8dcf12a commit 9476b24

File tree

11 files changed

+6694
-17777
lines changed

11 files changed

+6694
-17777
lines changed

‎package-lock.json

Lines changed: 6583 additions & 17709 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,17 @@
1111
},
1212
"devDependencies": {
1313
"axios": "^0.21.1",
14+
"i": "^0.3.6",
1415
"laravel-mix": "^6.0.6",
1516
"lodash": "^4.17.19",
16-
"postcss": "^8.1.14"
17+
"npm": "^6.14.11",
18+
"postcss": "^8.1.14",
19+
"postcss-import": "^14.0.0",
20+
"postcss-nested": "^5.0.3",
21+
"postcss-nested-import": "^0.1.0",
22+
"resolve-url-loader": "^3.1.0",
23+
"sass": "^1.32.4",
24+
"sass-loader": "^8.0.2"
1725
},
1826
"dependencies": {
1927
"alpinejs": "^2.8.0",

‎resources/css/app.css renamed to ‎resources/css/app.scss

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
@tailwind base;
1+
@import "tailwindcss/base";
22

3-
@import '~highlight.js/styles/a11y-light.css';
3+
.light {
4+
@import '~highlight.js/styles/a11y-light';
5+
}
6+
7+
.dark {
8+
@import '~highlight.js/styles/a11y-dark';
9+
}
410

5-
@tailwind components;
6-
@tailwind utilities;
11+
@import "tailwindcss/components";
12+
@import "tailwindcss/utilities";
713

814
.hljs {
915
@apply bg-white;

‎resources/js/app.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,20 @@ document.addEventListener('DOMContentLoaded', (event) => {
2929
import ClipboardJS from 'clipboard';
3030

3131
new ClipboardJS('.copy-btn');
32+
33+
// Dark mode
34+
const darkModeToggles = document.getElementsByClassName("darkModeToggle");
35+
36+
for (let i=0; i < darkModeToggles.length; i++) {
37+
darkModeToggles[i].onclick = function(){
38+
if (localStorage.theme === 'light') {
39+
localStorage.theme = 'dark';
40+
document.querySelector('html').classList.add('dark')
41+
document.querySelector('html').classList.remove('light')
42+
} else {
43+
localStorage.theme = 'light';
44+
document.querySelector('html').classList.remove('dark')
45+
document.querySelector('html').classList.add('light')
46+
}
47+
}
48+
}

‎resources/views/components/main.blade.php

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="flex flex-col min-w-0 flex-1 overflow-hidden">
22
<div class="lg:hidden print:hidden">
3-
<div class="flex items-center justify-between bg-gray-50 border-b border-gray-200 px-4 py-1.5">
3+
<div class="flex items-center justify-between bg-gray-50 dark:bg-gray-200 border-b border-gray-200 dark:border-gray-400 px-4 py-1.5">
44
<div>
55
<a href="{{ route('home') }}">
66
<img class="h-8 w-auto" src="{{ asset('images/laravelio-icon.svg') }}" alt="Laravel.io">
@@ -13,10 +13,8 @@
1313
class="-mr-3 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900"
1414
>
1515
<span class="sr-only">Open sidebar</span>
16-
<!-- Heroicon name: menu -->
17-
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
18-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
19-
</svg>
16+
17+
<x-heroicon-o-menu class="h-6 w-6" />
2018
</button>
2119
</div>
2220
</div>

‎resources/views/components/nav-item.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<a
33
href="{{ $link }}"
44
@isset($blank) target="_blank" @endisset
5-
{{ $attributes->merge(['class' => 'inline-flex items-center w-full px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-gray-700 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']) }}
5+
{{ $attributes->merge(['class' => 'inline-flex items-center w-full px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-100 bg-gray-200 dark:bg-gray-500 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']) }}
66
>
77
@svg($icon, '-ml-0.5 mr-2 h-4 w-4')
88

99
{{ $label }}
1010
</a>
1111
@else
12-
<div class="inline-flex items-center w-full px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-gray-700 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
12+
<div class="inline-flex items-center w-full px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-100 bg-gray-200 dark:bg-gray-500 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
1313
@svg($icon, '-ml-0.5 mr-2 h-4 w-4')
1414

1515
<input type="{{ $type }}" value="{{ $label }}" {{ $attributes->merge(['class' => 'bg-transparent cursor-pointer font-medium']) }} />

‎resources/views/components/nav.blade.php

Lines changed: 6 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -13,38 +13,20 @@
1313
<div class="flex-1 w-14" aria-hidden="true">
1414
<!-- Force sidebar to shrink to fit close icon -->
1515
</div>
16-
<div tabindex="0" class="origin-top-right relative flex-shrink-0 flex flex-col max-w-xs w-full bg-white focus:outline-none">
16+
<div tabindex="0" class="origin-top-right relative flex-shrink-0 flex flex-col max-w-xs w-full bg-gray-50 dark:bg-gray-300 focus:outline-none">
1717
<div class="absolute top-0 left-0 -ml-12 pt-2">
1818
<button
1919
type="button"
2020
@click="isOpen = false"
2121
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
2222
>
2323
<span class="sr-only">Close sidebar</span>
24-
<!-- Heroicon name: x -->
25-
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
26-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
27-
</svg>
24+
25+
<x-heroicon-o-x class="h-6 w-6 text-white" />
2826
</button>
2927
</div>
3028
<div class="flex-1 h-0 pt-8 pb-4 px-6 overflow-y-auto">
31-
<div class="flex-shrink-0 flex items-center px-2">
32-
<a href="https://laravel.io">
33-
<img class="w-auto" src="{{ asset('images/laravelio.png') }}" alt="Laravel.io Logo">
34-
</a>
35-
</div>
36-
37-
{!! $errors->first('code', '<p class="mt-8 text-red-600 font-medium">:message</p>') !!}
38-
39-
<nav aria-label="Sidebar" class="mt-5">
40-
<div class="space-y-1">
41-
{!! $slot !!}
42-
</div>
43-
</nav>
44-
45-
<p class="mt-4 text-sm text-gray-500 flex-1">
46-
Please note that all pasted data is publicly available.
47-
</p>
29+
<x-sidebar>{!! $slot !!}</x-sidebar>
4830
</div>
4931
</div>
5032
</div>
@@ -54,25 +36,9 @@ class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outlin
5436
<div :class="{'hidden': !isOpen }" class="lg:flex lg:flex-shrink-0 print:hidden">
5537
<div class="flex flex-col w-64">
5638
<!-- Sidebar component, swap this element with another sidebar if you like -->
57-
<div class="flex flex-col h-0 flex-1 border-r border-gray-200 bg-gray-50">
39+
<div class="flex flex-col h-0 flex-1 border-r border-gray-200 bg-gray-50 dark:bg-gray-300">
5840
<div class="flex-1 flex flex-col pt-8 pb-4 px-6 overflow-y-auto">
59-
<div class="flex items-center flex-shrink-0 px-2">
60-
<a href="https://laravel.io">
61-
<img class="w-auto" src="{{ asset('images/laravelio.png') }}" alt="Laravel.io Logo">
62-
</a>
63-
</div>
64-
65-
{!! $errors->first('code', '<p class="mt-8 text-red-600 font-medium">:message</p>') !!}
66-
67-
<nav class="mt-5" aria-label="Sidebar">
68-
<div class="space-y-1">
69-
{!! $slot !!}
70-
</div>
71-
</nav>
72-
73-
<p class="mt-4 text-sm text-gray-500 flex-1">
74-
Please note that all pasted data is publicly available.
75-
</p>
41+
<x-sidebar>{!! $slot !!}</x-sidebar>
7642
</div>
7743
</div>
7844
</div>

‎resources/views/components/sidebar.blade.php

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<div class="flex items-center flex-shrink-0 px-2">
2+
<a href="https://laravel.io">
3+
<img class="w-auto" src="{{ asset('images/laravelio.png') }}" alt="Laravel.io Logo">
4+
</a>
5+
</div>
6+
7+
{!! $errors->first('code', '<p class="mt-8 text-red-600 font-medium">:message</p>') !!}
8+
9+
<nav class="mt-5" aria-label="Sidebar">
10+
<div class="space-y-1">
11+
{!! $slot !!}
12+
</div>
13+
</nav>
14+
15+
<p class="mt-4 text-sm text-gray-500 text-center">
16+
Please note that all pasted data is publicly available.
17+
</p>
18+
19+
<div class="mt-4 text-center flex-1">
20+
<button
21+
type="button" aria-pressed="false"
22+
class="darkModeToggle bg-gray-300 dark:bg-gray-500 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
23+
>
24+
<span class="sr-only">Use setting</span>
25+
26+
<span class="translate-x-0 dark:translate-x-5 relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200">
27+
<span class="dark:hidden opacity-100 ease-in duration-200 dark:opacity-0 dark:ease-out dark:duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
28+
<x-heroicon-s-sun class="h-3 w-3 text-gray-400" />
29+
</span>
30+
31+
<span class="hidden dark:flex opacity-0 ease-out duration-100 dark:opacity-0 dark:ease-out dark:duration-100 absolute inset-0 h-full w-full items-center justify-center transition-opacity opacity-100 ease-in duration-200 " aria-hidden="true">
32+
<x-heroicon-s-moon class="h-3 w-3 text-gray-600" />
33+
</span>
34+
</span>
35+
</button>
36+
</div>

‎resources/views/layouts/app.blade.php

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
2+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -10,6 +10,16 @@
1010
<meta name="robots" content="noindex">
1111
@endif
1212

13+
<script>
14+
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
15+
document.querySelector('html').classList.add('dark')
16+
document.querySelector('html').classList.remove('light')
17+
} else {
18+
document.querySelector('html').classList.remove('dark')
19+
document.querySelector('html').classList.add('light')
20+
}
21+
</script>
22+
1323
<title>Pastebin | Laravel.io</title>
1424

1525
<link href="https://rsms.me/inter/inter.css" rel="stylesheet">
@@ -20,7 +30,7 @@
2030
@include('layouts.favicons')
2131
@include('layouts.fathom')
2232
</head>
23-
<body>
33+
<body class="dark:bg-dark">
2434

2535
@yield('content')
2636

‎tailwind.config.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,12 @@ const defaultTheme = require('tailwindcss/defaultTheme');
22

33
module.exports = {
44
purge: ['./resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue'],
5-
darkMode: false,
5+
darkMode: 'class',
66
theme: {
77
extend: {
8+
colors: {
9+
'dark': '#2b2b2b',
10+
},
811
fontFamily: {
912
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
1013
},
@@ -14,7 +17,10 @@ module.exports = {
1417
},
1518
},
1619
variants: {
17-
extend: {},
20+
extend: {
21+
display: ['dark'],
22+
translate: ['dark'],
23+
},
1824
},
1925
plugins: [],
2026
};

‎webpack.mix.js

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
const mix = require('laravel-mix');
22

3-
/*
4-
|--------------------------------------------------------------------------
5-
| Mix Asset Management
6-
|--------------------------------------------------------------------------
7-
|
8-
| Mix provides a clean, fluent API for defining some Webpack build steps
9-
| for your Laravel applications. By default, we are compiling the CSS
10-
| file for the application as well as bundling up all the JS files.
11-
|
12-
*/
13-
14-
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [require('tailwindcss')]);
3+
mix.js('resources/js/app.js', 'public/js')
4+
.sass('resources/css/app.scss', 'public/css')
5+
.options({
6+
processCssUrls: false,
7+
postCss: [
8+
require('tailwindcss'),
9+
],
10+
});

0 commit comments

Comments
 (0)
0