[PR] Merge pull request #52 from one-among-us/dark

[+] dark mode button

src/App.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script lang="ts">
+import {applyTheme} from "@/logic/theme";
 import { Component, Vue } from 'vue-facing-decorator';
 import Divider from "@/components/divider.vue";
 import LangButton from "@/components/LangButton.vue";
@@ -52,6 +53,7 @@ export default class App extends Vue
         )
 
         document.getElementById("app").dataset.lang = getLang()
+        applyTheme()
     }
 }
 </script>
@@ -84,7 +86,7 @@ export default class App extends Vue
     &[data-lang="en"]
         font-family: $font-en
 
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
     body
         background: #181825
     
@@ -130,7 +132,7 @@ export default class App extends Vue
     position: relative
     z-index: 100
 
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
     #title
         background-color: $color-bg-dark-5
 

src/components.d.ts

@@ -40,5 +40,6 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SubmitPrompt: typeof import('./components/SubmitPrompt.vue')['default']
     SwitchButton: typeof import('./components/SwitchButton.vue')['default']
+    ThemeButton: typeof import('./components/ThemeButton.vue')['default']
   }
 }

src/components/ChannelBackupButton.vue

@@ -69,7 +69,7 @@ export default class ChannelBackupButton extends Vue
 .button.anim:hover
     box-shadow: 0 10px 10px -5px rgba(166, 134, 89, 0.3)
 
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
     .backup
         background: $color-bg-dark-6
         color: $color-text-dark-main

src/components/HyInput.vue

@@ -111,7 +111,7 @@ input:focus~.hy-input-placeholder, .has-text .hy-input-placeholder
 .has-text .hy-input-placeholder
     transform: translate(-10px,-80%)
 
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
     input
         background-color: hsl(35, 77%, 12%)
         color: #cdd6f4

src/components/LangButton.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="lang-btns" v-if="showBtn">
+        <ThemeButton />
         <div class="clickable hy-button" 
             @click="() => click(l)" v-for="l in targets" :key="l">
             {{ supportedLang[l] }}
@@ -11,9 +12,10 @@
 import { Component, Vue } from 'vue-facing-decorator';
 import { getLang, Lang, setLang, supportedLang } from "@/logic/config";
 import { info } from "@/logic/utils";
+import ThemeButton from "@/components/ThemeButton.vue";
 
 
-@Component({ components: {} })
+@Component({ components: {ThemeButton} })
 export default class LangButton extends Vue {
     lang = getLang()
     supportedLang = supportedLang

src/components/Loading.vue

@@ -128,7 +128,7 @@ export default class Loading extends Vue {
     color: rgba(166, 134, 89, 0.84);
 }
 
-@media (prefers-color-scheme: dark) {
+[data-theme="dark"] {
     .loadingMessage {
         color: rgba(255, 235, 194, 0.84)
     }

src/components/MarkdownTooltip.vue

@@ -189,7 +189,7 @@ export default class MarkdownTooltip extends Vue
         padding-left: 3px
         padding-right: 8px
 
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
     #MarkdownTooltip
         background: #fffcff30
         color: $color-text-dark-light

src/components/ProfileCard.vue

@@ -485,7 +485,7 @@ div:has(.view-limit-alert)
                 width: 30px
                 height: 30px
 
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
     #info
         background-color: $color-bg-dark-6
     

src/components/RandomPerson.vue

@@ -54,7 +54,7 @@ export default class RandomPerson extends Vue {
     font-size: 1rem
     font-family: 'Hua', $font
 
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
     .random
         color: $color-text-dark-main
         background-color: $color-bg-dark-6

src/components/SubmitPrompt.vue

@@ -95,7 +95,7 @@ export default class SubmitPrompt extends Vue
         font-size: small
         color: $color-text-light
 
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
     #prompt
         background: $color-bg-dark-5
 </style>

src/components/ThemeButton.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="clickable hy-button theme-button" :key="theme" v-on:click="changeTheme()">
+        <Icon class="iconR" icon="mynaui:sun" v-if="theme != 'dark'" />
+        <Icon class="iconR" icon="mynaui:moon" v-else />
+    </div>
+</template>
+
+<script lang="ts">
+import {applyTheme, getTheme, setTheme} from "@/logic/theme";
+import {Vue, Component} from 'vue-facing-decorator';
+import {Icon} from '@iconify/vue';
+
+@Component({components: {Icon}})
+export default class ThemeButton extends Vue {
+    theme = getTheme()
+
+    changeTheme(): void {
+        if (this.theme == 'dark') {
+            setTheme('light')
+        } else {
+            setTheme('dark')
+        }
+        applyTheme()
+        this.theme = getTheme()
+    }
+}
+</script>
+
+<style lang="sass">
+@import "../css/colors"
+@import "../css/global"
+
+.theme-button
+    padding: 10px
+    width: 25px
+    height: 25px
+    border-radius: 9008px
+    border-color: $color-text-main
+    border-width: 1px
+    border-style: solid
+
+    .iconR
+        width: 20px
+        height: 20px
+        color: $color-text-main
+
+[data-theme="dark"]
+    .iconR
+        color: $color-text-dark-main
+</style>

src/css/global.sass

@@ -186,7 +186,7 @@ svg.icon
 .katex-html
   display: none
 
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
   .color-hightlight
     color: $c-highlight-dark
 

src/css/markdown.sass

@@ -42,7 +42,7 @@
     border-width: 1px
     border-image: repeating-linear-gradient(45deg, #e94880, #e94880 10px, #f5aac5 10px, #f5aac5 20px) 1
 
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
   .markdown-content
     a
       color: $color-text-dark-special

src/logic/theme.ts

@@ -0,0 +1,22 @@
+export type Theme = 'dark' | 'light' | 'unset'
+
+export function getTheme(): Theme {
+    if (localStorage.getItem('theme')) {
+        return localStorage.getItem('theme') as Theme
+    }
+    if (window.matchMedia) {
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark'
+        }
+        return 'light'
+    }
+    return 'unset'
+}
+
+export function setTheme(theme: Theme) {
+    localStorage.setItem('theme', theme)
+}
+
+export function applyTheme() {
+    document.documentElement.setAttribute('data-theme', getTheme())
+}

src/views/EditInfo.vue

@@ -311,7 +311,7 @@ export default class EditInfo extends Vue
             border-top-left-radius: 0
             border-top-right-radius: 0
 
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
     #EditInfo
         background: $color-bg-dark-5
 

src/views/Home.vue

@@ -250,7 +250,7 @@ export default class Home extends Vue
             height: $len
             width: $len
 
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
     .back, .front
         border: 10px solid rgba(27, 27, 32, 0.8964) !important
         outline: 2px solid $color-text-dark-main !important

src/views/ProfileComments.vue

@@ -264,7 +264,7 @@ export default class ProfileComments extends Vue
             color: $color-text-light
             margin-right: 5px
     
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
     .comment
         .from
             color: $color-text-dark-light !important

src/views/TdorComments.vue

@@ -257,7 +257,7 @@ export default class TdorComments extends Vue {
     box-shadow: 15px 15px 15px -5px rgba(166 134 89 / 0.3)
     border-color: $color-text-special
 
-@media (prefers-color-scheme: dark)
+[data-theme="dark"]
     .comment
         .from
             color: $color-text-dark-light