chris/pixelfed
1
0
Fork 0
forked from mirror/pixelfed
Code Pull requests Activity

Add dark mode

Browse source
This commit is contained in:
Daniel Supernault 2019-02-26 00:46:33 -07:00
parent 7295b1b887
commit 898e411327
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
5 changed files with 12 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
resources/assets/js/components/Timeline.vue
View file

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

2
resources/views/layouts/anon.blade.php
View file

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

2
resources/views/layouts/app.blade.php
View file

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

2
resources/views/layouts/blank.blade.php
View file

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

2
resources/views/layouts/bundle.blade.php
View file

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