Skip to content

Commit 4f762b1

Browse files
ramonrietdijktaylorotwell
ramonrietdijk
and
taylorotwell
authored
Respect the prefers-color-scheme setting (#1275)
* Respect the prefers-color-scheme setting * Added a scheme toggler * update deps --------- Co-authored-by: Taylor Otwell <[email protected]>
1 parent a364b36 commit 4f762b1

File tree

8 files changed

+86
-12
lines changed

8 files changed

+86
-12
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/app.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/mix-manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"/app.js": "/app.js?id=821948ef9dd305db5755875c266d2355",
2+
"/app.js": "/app.js?id=c6187bff8d842d49dbb4d3de4b583600",
33
"/app-dark.css": "/app-dark.css?id=15c72df05e2b1147fa3e4b0670cfb435",
44
"/app.css": "/app.css?id=4d6a1a7fe095eedc2cb2a4ce822ea8a5",
55
"/img/favicon.png": "/img/favicon.png?id=1542bfe8a0010dcbee710da13cce367f",

‎resources/js/app.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ const router = new VueRouter({
4242

4343
Vue.component('vue-json-pretty', VueJsonPretty);
4444
Vue.component('alert', require('./components/Alert.vue').default);
45+
Vue.component('scheme-toggler', require('./components/SchemeToggler.vue').default);
4546

4647
Vue.mixin(Base);
4748

‎resources/js/components/SchemeToggler.vue‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<script type="text/ecmascript-6">
2+
export default {
3+
data () {
4+
return {
5+
scheme: 'system'
6+
}
7+
},
8+
9+
watch: {
10+
scheme (value) {
11+
localStorage.setItem('scheme', value);
12+
}
13+
},
14+
15+
mounted () {
16+
this.scheme = localStorage.getItem('scheme') ?? 'system';
17+
18+
window
19+
.matchMedia('(prefers-color-scheme: dark)')
20+
.addEventListener('change', () => this.calculateScheme())
21+
22+
this.calculateScheme()
23+
},
24+
25+
methods: {
26+
toggleScheme () {
27+
if (this.scheme == 'system') {
28+
this.scheme = 'dark'
29+
} else if (this.scheme == 'dark') {
30+
this.scheme = 'light'
31+
} else {
32+
this.scheme = 'system'
33+
}
34+
35+
this.calculateScheme()
36+
},
37+
38+
calculateScheme () {
39+
const light = document.querySelector('link[data-scheme="light"]');
40+
const dark = document.querySelector('link[data-scheme="dark"]');
41+
42+
if (this.scheme == 'system') {
43+
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
44+
45+
light.disabled = prefersDarkMode.matches;
46+
dark.disabled = ! prefersDarkMode.matches;
47+
} else if (this.scheme == 'dark') {
48+
light.disabled = true;
49+
dark.disabled = false;
50+
} else {
51+
light.disabled = false;
52+
dark.disabled = true;
53+
}
54+
}
55+
}
56+
}
57+
</script>
58+
59+
<template>
60+
<button class="btn btn-muted" title="Switch Theme" v-on:click.prevent="toggleScheme">
61+
<svg v-if="scheme == 'system'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon" fill="currentColor">
62+
<path fill-rule="evenodd" d="M2 4.25A2.25 2.25 0 014.25 2h11.5A2.25 2.25 0 0118 4.25v8.5A2.25 2.25 0 0115.75 15h-3.105a3.501 3.501 0 001.1 1.677A.75.75 0 0113.26 18H6.74a.75.75 0 01-.484-1.323A3.501 3.501 0 007.355 15H4.25A2.25 2.25 0 012 12.75v-8.5zm1.5 0a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75H4.25a.75.75 0 01-.75-.75v-7.5z" clip-rule="evenodd" />
63+
</svg>
64+
<svg v-if="scheme == 'dark'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon" fill="currentColor">
65+
<path fill-rule="evenodd" d="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z" clip-rule="evenodd" />
66+
</svg>
67+
<svg v-if="scheme == 'light'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon" fill="currentColor">
68+
<path d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z" />
69+
</svg>
70+
</button>
71+
</template>

‎resources/views/layout.blade.php‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
<!-- Style sheets-->
1313
<link rel="preconnect" href="https://fonts.bunny.net">
1414
<link href="https://fonts.bunny.net/css?family=figtree:300,400,500,600" rel="stylesheet" />
15-
<link href="{{ asset(mix($cssFile, 'vendor/horizon')) }}" rel="stylesheet">
15+
<link href="{{ asset(mix('app.css', 'vendor/horizon')) }}" rel="stylesheet" data-scheme="light">
16+
<link href="{{ asset(mix('app-dark.css', 'vendor/horizon')) }}" rel="stylesheet" data-scheme="dark">
1617
</head>
1718
<body>
1819
<div id="horizon" v-cloak>
@@ -35,11 +36,15 @@
3536
</h1>
3637
</router-link>
3738

38-
<button class="btn btn-muted ml-auto" :class="{active: autoLoadsNewEntries}" v-on:click.prevent="autoLoadNewEntries" title="Auto Load Entries">
39-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon" fill="currentColor">
40-
<path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z" clip-rule="evenodd" />
41-
</svg>
42-
</button>
39+
<div class="ml-auto">
40+
<scheme-toggler></scheme-toggler>
41+
42+
<button class="btn btn-muted ml-2" :class="{active: autoLoadsNewEntries}" v-on:click.prevent="autoLoadNewEntries" title="Auto Load Entries">
43+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon" fill="currentColor">
44+
<path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z" clip-rule="evenodd" />
45+
</svg>
46+
</button>
47+
</div>
4348
</div>
4449

4550
<div class="row mt-4">

‎src/Http/Controllers/HomeController.php‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ public function index()
1616
{
1717
return view('horizon::layout', [
1818
'assetsAreCurrent' => Horizon::assetsAreCurrent(),
19-
'cssFile' => Horizon::$useDarkTheme ? 'app-dark.css' : 'app.css',
2019
'horizonScriptVariables' => Horizon::scriptVariables(),
2120
'isDownForMaintenance' => App::isDownForMaintenance(),
2221
]);

‎stubs/HorizonServiceProvider.stub‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@ class HorizonServiceProvider extends HorizonApplicationServiceProvider
1818
// Horizon::routeSmsNotificationsTo('15556667777');
1919
// Horizon::routeMailNotificationsTo('[email protected]');
2020
// Horizon::routeSlackNotificationsTo('slack-webhook-url', '#channel');
21-
22-
// Horizon::night();
2321
}
2422

2523
/**

0 commit comments

Comments
 (0)