From ca4c556a9390ee78b8936f950f17bbc486bde23b Mon Sep 17 00:00:00 2001 From: Daniel Supernault Date: Sun, 21 Apr 2019 23:42:37 -0600 Subject: [PATCH] Update Timeline, add persistent dark mode --- resources/assets/js/components/Timeline.vue | 30 ++++++++++++++------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/resources/assets/js/components/Timeline.vue b/resources/assets/js/components/Timeline.vue index 22f05e5c3..db52aa34a 100644 --- a/resources/assets/js/components/Timeline.vue +++ b/resources/assets/js/components/Timeline.vue @@ -374,6 +374,10 @@ }, mounted() { + if($('link[data-stylesheet="dark"]').length != 0) { + this.modes.dark = true; + } + this.$nextTick(function () { $('[data-toggle="tooltip"]').tooltip() }); @@ -810,17 +814,23 @@ modeDarkToggle() { // todo: more graceful stylesheet change if(this.modes.dark == true) { - this.modes.dark = false; - $('link[data-stylesheet=dark]').remove(); + axios.post('/i/metro/dark-mode', { + mode: 'light' + }).then(res => { + $('link[data-stylesheet=dark]') + .attr('data-stylesheet', 'light') + .attr('href', '/css/app.css?v=' + Date.now()); + this.modes.dark = false; + }); } else { - this.modes.dark = true; - let head = document.head; - let link = document.createElement("link"); - link.type = "text/css"; - link.rel = "stylesheet"; - link.href = "/css/appdark.css"; - link.setAttribute('data-stylesheet','dark'); - head.appendChild(link); + axios.post('/i/metro/dark-mode', { + mode: 'dark' + }).then(res => { + $('link[data-stylesheet=light]') + .attr('data-stylesheet', 'dark') + .attr('href', '/css/appdark.css?v=' + Date.now()); + this.modes.dark = true; + }); } window.ls.set('pixelfed-classicui-settings', this.modes); },