浏览代码

Add dark mode

Daniel Supernault 6 年之前
父节点
当前提交
898e411327

+ 8 - 14
resources/assets/js/components/Timeline.vue

@@ -204,10 +204,6 @@
 							<label class="custom-control-label font-weight-bold" for="mode-mod">Moderator Mode</label>
 						</div>
 						<!-- <div class="custom-control custom-switch mb-3">
-							<input type="checkbox" class="custom-control-input" id="mode-dark" v-on:click="modeDarkToggle()" v-model="modes.dark">
-							<label class="custom-control-label font-weight-bold" for="mode-dark">Dark Mode</label>
-						</div>
-						<div class="custom-control custom-switch mb-3">
 							<input type="checkbox" class="custom-control-input" id="mode-notify" v-on:click="modeNotifyToggle()"  v-model="!modes.notify">
 							<label class="custom-control-label font-weight-bold" for="mode-notify">Disable Notifications</label>
 						</div> -->
@@ -215,6 +211,12 @@
 							<input type="checkbox" class="custom-control-input" id="mode-infinite" v-on:click="modeInfiniteToggle()" v-model="modes.infinite">
 							<label class="custom-control-label font-weight-bold" for="mode-infinite">Enable Infinite Scroll</label>
 						</div>
+						<hr>
+						<p class="font-weight-bold">BETA FEATURES</p>
+						<div class="custom-control custom-switch">
+							<input type="checkbox" class="custom-control-input" id="mode-dark" v-on:click="modeDarkToggle()" v-model="modes.dark">
+							<label class="custom-control-label font-weight-bold" for="mode-dark">Dark Mode</label>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -793,23 +795,15 @@
 				// todo: more graceful stylesheet change
 				if(this.modes.dark == true) {
 					this.modes.dark = false;
-					$('link[rel=stylesheet]').remove();
-					let head = document.head;
-					let link = document.createElement("link");
-					link.type = "text/css";
-					link.rel = "stylesheet";
-					link.href = "/css/app.css";
-					head.appendChild(link);
+					$('link[data-stylesheet=dark]').remove();
 				} else {
 					this.modes.dark = true;
-					$('link[rel=stylesheet]').remove();
 					let head = document.head;
 					let link = document.createElement("link");
-					link.id = "darkModeSheet";
 					link.type = "text/css";
 					link.rel = "stylesheet";
 					link.href = "/css/appdark.css";
-
+					link.setAttribute('data-stylesheet','dark');
 					head.appendChild(link);
 				}
 				window.ls.set('pixelfed-classicui-settings', this.modes);

+ 1 - 1
resources/views/layouts/anon.blade.php

@@ -25,7 +25,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
     <link rel="canonical" href="{{request()->url()}}">
-    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+    <link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
     @stack('styles')
 </head>
 <body class="">

+ 1 - 1
resources/views/layouts/app.blade.php

@@ -23,7 +23,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
     <link rel="canonical" href="{{request()->url()}}">
-    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+    <link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
     @stack('styles')
 
 </head>

+ 1 - 1
resources/views/layouts/blank.blade.php

@@ -22,7 +22,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
     <link rel="canonical" href="{{request()->url()}}">
-    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+    <link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
     @stack('styles')
 </head>
 <body class="">

+ 1 - 1
resources/views/layouts/bundle.blade.php

@@ -23,7 +23,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
     <link rel="canonical" href="{{request()->url()}}">
-    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+    <link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
     @stack('styles')
 
 </head>