[+] dark mode

src/App.vue

@@ -83,6 +83,13 @@ export default class App extends Vue
 
     &[data-lang="en"]
         font-family: $font-en
+
+@media (prefers-color-scheme: dark)
+    body
+        background: #181825
+
+    #app
+        color: $color-text-dark-main
 </style>
 
 <!-- Scoped Style -->
@@ -122,4 +129,23 @@ export default class App extends Vue
 .router-link
     position: relative
     z-index: 100
+
+@media (prefers-color-scheme: dark)
+    #title
+        background-color: $color-bg-dark-5
+
+        #title-sub
+            color: $color-text-dark-light
+
+    #nav
+        background-color: $color-bg-dark-6
+
+        a
+            color: $color-text-dark-main
+
+            &.router-link-exact-active
+                color: $color-text-dark-special
+
+    #router
+        background-color: $color-bg-dark-4
 </style>

src/components/BirthdayButton.vue

@@ -44,4 +44,9 @@ export default class BirthdayButton extends Vue {
 
     font-size: 1rem
     font-family: 'Hua', $font
+
+@media (prefers-color-scheme: dark)
+    .random
+        color: $color-text-dark-main
+        background-color: $color-bg-dark-6
 </style>

src/components/ChannelBackupButton.vue

@@ -7,9 +7,14 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-facing-decorator';
+import { t, getLang } from '@/logic/config';
 import urljoin from "url-join";
 
-const kvs = {'telegram': '电报', 'twitter': '推特'}
+const kvs = {
+    zh_hans: {'telegram': '电报', 'twitter': '推特'},
+    zh_hant: {'telegram': '電報', 'twitter': '推特'},
+    en: {'telegram': 'telegram', 'twitter': 'twitter'}
+}
 
 @Component({components: {}})
 export default class ChannelBackupButton extends Vue
@@ -19,6 +24,8 @@ export default class ChannelBackupButton extends Vue
     @Prop() url: string
     @Prop() text: string
 
+    kvs = kvs[getLang()]
+
     get computedUrl()
     {
         if (this.url) return this.url
@@ -28,7 +35,7 @@ export default class ChannelBackupButton extends Vue
     get computedText()
     {
         if (this.text) return this.text
-        return '查看' + (kvs[this.platform] ?? ` ${this.platform} `) + '备份'
+        return t.backup.view.replace('{0}', this.kvs[this.platform] ?? ` ${this.platform} `)
     }
 }
 </script>
@@ -61,4 +68,13 @@ 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)
+    .backup
+        background: $color-bg-dark-6
+        color: $color-text-dark-main
+
+        .icon
+            background-color: rgb(89 64 20)
+            text-shadow: rgba(255, 255, 255, 0.125) 0 5px 6px
 </style>

src/components/HyInput.vue

@@ -111,4 +111,8 @@ input:focus~.hy-input-placeholder, .has-text .hy-input-placeholder
 .has-text .hy-input-placeholder
     transform: translate(-10px,-80%)
 
+@media (prefers-color-scheme: dark)
+    input
+        background-color: hsl(35, 77%, 12%)
+        color: #cdd6f4
 </style>

src/components/Loading.vue

@@ -63,7 +63,7 @@ export default class Loading extends Vue {
     }
     to {
         -ms-transform: rotate(360deg);
-        -moz-transform: rotate(360de);
+        -moz-transform: rotate(360deg);
         -webkit-transform: rotate(360deg);
         -o-transform: rotate(360deg);
         transform: rotate(360deg);
@@ -127,4 +127,15 @@ export default class Loading extends Vue {
     text-align: center;
     color: rgba(166, 134, 89, 0.84);
 }
+
+@media (prefers-color-scheme: dark) {
+    .loadingMessage {
+        color: rgba(255, 235, 194, 0.84)
+    }
+
+    .path {
+        color: hsl(20, 71%, 80%);
+        stroke: hsl(20, 71%, 80%)
+    }
+}
 </style>

src/components/MarkdownTooltip.vue

@@ -189,4 +189,13 @@ export default class MarkdownTooltip extends Vue
         padding-left: 3px
         padding-right: 8px
 
+@media (prefers-color-scheme: dark)
+    #MarkdownTooltip
+        background: #fffcff30
+        color: $color-text-dark-light
+        filter: drop-shadow(0 2px 5px rgba(166, 134, 89, 0.42))
+
+        .icon-wrapper:hover
+            background: $color-bg-dark-5
+
 </style>

src/components/ProfileCard.vue

@@ -485,4 +485,21 @@ div:has(.view-limit-alert)
                 width: 30px
                 height: 30px
 
+@media (prefers-color-scheme: dark)
+    #info
+        background-color: $color-bg-dark-6
+
+    #right
+        #hr
+            color: $color-text-dark-main
+
+        #websites
+            #websites-container
+                a
+                    color: $color-text-dark-main
+
+    #left
+        #buttons
+            .button
+                background: $color-bg-dark-5
 </style>

src/components/RandomPerson.vue

@@ -54,4 +54,8 @@ export default class RandomPerson extends Vue {
     font-size: 1rem
     font-family: 'Hua', $font
 
+@media (prefers-color-scheme: dark)
+    .random
+        color: $color-text-dark-main
+        background-color: $color-bg-dark-6
 </style>

src/components/SubmitPrompt.vue

@@ -50,6 +50,7 @@ export default class SubmitPrompt extends Vue
 
 <style lang="sass" scoped>
 @import src/css/global
+@import src/css/colors
 
 #SubmitPrompt
     // Cover entire page
@@ -94,4 +95,7 @@ export default class SubmitPrompt extends Vue
         font-size: small
         color: $color-text-light
 
+@media (prefers-color-scheme: dark)
+    #prompt
+        background: $color-bg-dark-5
 </style>

src/css/colors.sass

@@ -6,3 +6,13 @@ $color-text-special: #ff8373
 $color-bg-6: #ffeedb
 $color-bg-5: #fff4eb
 $color-bg-4: #fffcf9
+
+// dark colors
+
+$color-text-dark-main: #f3b8a6
+$color-text-dark-light: rgba(255, 225, 185, 0.9)
+$color-text-dark-special: #eac0cd
+
+$color-bg-dark-6: hsl(33, 25%, 15%)
+$color-bg-dark-5: hsl(32, 24%, 12%)
+$color-bg-dark-4: hsl(32, 21%, 7%)

src/css/global.sass

@@ -4,7 +4,8 @@
 // Container width (This is normally 50vw,
 //   but when it's smaller than 900px, use 100vw - 50px, because 50px is the margin)
 $app-width: max(50vw, min(900px, 100vw - 50px))
-$c-highlight: #ff7878
+$c-highlight: rgb(255, 120, 120)
+$c-highlight-dark: rgba(255, 120, 120, 0.25)
 
 // Highlight color
 .color-highlight
@@ -185,4 +186,25 @@ svg.icon
   font-family: 'katex-math' !important
 
   .katex-html
-    display: none
+    display: none
+
+@media (prefers-color-scheme: dark)
+  .color-hightlight
+    color: $c-highlight-dark
+
+  .hy-button
+    background: $color-bg-dark-6
+
+  .spoiler
+    background-color: transparent
+    filter: blur(6px) drop-shadow(1px 1px 5px $color-text-dark-special)
+
+    span
+      opacity: 1
+
+  .spoiler.spoiler-visible
+    background-color: transparent
+    filter: none
+
+    span
+      opacity: 1

src/css/markdown.sass

@@ -38,4 +38,19 @@
     border-radius: 5px
 
   hr
-    border: 0.5px solid $color-text-special
+    border-style: solid
+    border-width: 1px
+    border-image: repeating-linear-gradient(45deg, #e94880, #e94880 10px, #f5aac5 10px, #f5aac5 20px) 1
+
+@media (prefers-color-scheme: dark)
+  .markdown-content
+    a
+      color: $color-text-dark-special
+
+    h1, h2
+      border-bottom: 1px solid $color-text-dark-special
+
+    hr
+      border-style: solid
+      border-width: 1px
+      border-image: repeating-linear-gradient(45deg, #aed6fa, #aed6fa 10px, #ddeffc 10px, #ddeffc 20px) 1

src/logic/config.ts

@@ -133,6 +133,11 @@ export const i18n = {
         switch_warning: {
             title: "Trigger Warning",
             text: "The entry to be switched has a strong trauma triggering factor. Please prioritize your mental state."
+        },
+        backup: {
+            error: "Error in load page",
+            back: "back",
+            view: "View backup of {0}"
         }
     },
     "zh_hans": {
@@ -195,6 +200,11 @@ export const i18n = {
         switch_warning: {
             title: "创伤触发要素警告",
             text: "将要切换的条目有极强的创伤触发要素. 请优先保证自己精神状态. "
+        },
+        backup: {
+            error: "加载页面错误... 请重试",
+            back: "返回",
+            view: "查看{0}备份"
         }
     },
     "zh_hant": {
@@ -257,6 +267,11 @@ export const i18n = {
         switch_warning: {
             title: "創傷觸發要素警告",
             text: "將要切換的條目具有極強的創傷觸發性. 請優先保證自己的精神狀態"
+        },
+        backup: {
+            error: "加載頁面時出錯... 請重新嘗試",
+            back: "返回",
+            view: "視察{0}備份"
         }
     }
 }

src/views/ChannelBackup.vue

@@ -1,18 +1,18 @@
 <template>
     <div>
         <TgBlog id="profile-page" :posts-url="postsUrl" :posts-data="postsData" v-if="postsUrl">
-            <ChannelBackupButton class="heading" text="返回" icon="icon-back"
+            <ChannelBackupButton class="heading" :text="t.backup.back" icon="icon-back"
                                  :url="`/profile/${userid}`" />
         </TgBlog>
         <div v-if="error">
-            加载页面错误... 请重试
+            {{ t.backup.error }}
         </div>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-facing-decorator';
-import { backupUrl } from "@/logic/config";
+import { backupUrl, t } from "@/logic/config";
 import { TgBlog } from "tg-blog";
 import "tg-blog/dist/style.css"
 import ChannelBackupButton from "@/components/ChannelBackupButton.vue";
@@ -29,6 +29,8 @@ export default class ChannelBackup extends Vue
     postsData: string = null
     error: string = null
 
+    t = t
+
     get computedBackup() { return this.backup in alias ? alias[this.backup] : this.backup }
 
     async created()

src/views/EditInfo.vue

@@ -263,13 +263,14 @@ export default class EditInfo extends Vue
             padding: 4px 8px
             color: $color-text-main
             text-align: center
+            outline: none
 
         input.key
             margin-right: 10px
             font-weight: bold
 
         input:focus-visible
-            outline-color: $color-text-light
+            outline: solid $color-text-light
 
     .button.submit
         margin-top: 30px
@@ -309,4 +310,22 @@ export default class EditInfo extends Vue
             border-bottom: 1px solid #ff7878
             border-top-left-radius: 0
             border-top-right-radius: 0
+
+@media (prefers-color-scheme: dark)
+    #EditInfo
+        background: $color-bg-dark-5
+
+        #id
+            color: $color-text-dark-light
+
+        .input-box
+            input
+                color: $color-text-dark-main
+                background-color: $color-bg-dark-6
+
+            input:focus-visible
+                outline: solid $color-text-dark-light
+
+        .button.submit
+            background-color: $color-bg-dark-6
 </style>

src/views/Home.vue

@@ -249,4 +249,13 @@ export default class Home extends Vue
             $len: 30vw
             height: $len
             width: $len
+
+@media (prefers-color-scheme: dark)
+    .back, .front
+        border: 10px solid rgba(27, 27, 32, 0.8964) !important
+        outline: 2px solid $color-text-dark-main !important
+
+    .bookmark
+        border: 40px solid rgba(255, 189, 202, 0.25) !important
+        border-bottom: 10px solid transparent !important
 </style>