8.63.0

Merge pull request #2781 from syuilo/theme
Theme
2018-09-29 00:51:13 +09:00 · 2018-09-29 00:48:56 +09:00 · 2018-09-29 00:48:02 +09:00 · 2018-09-29 00:44:23 +09:00 · 2018-09-29 00:20:49 +09:00 · 2018-09-29 00:03:28 +09:00
245 changed files with 3574 additions and 3822 deletions
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -285,6 +285,28 @@ common/views/components/media-banner.vue:
  sensitive: "閲覧注意"
  click-to-show: "クリックして表示"
 common/views/components/theme.vue:
  light-theme: "非ダークモード時に使用するテーマ"
  dark-theme: "ダークモード時に使用するテーマ"
  install-a-theme: "テーマのインストール"
  theme-code: "テーマコード"
  install: "インストール"
  create-a-theme: "テーマの作成"
  save-created-theme: "テーマを保存"
  primary-color: "プライマリ カラー"
  secondary-color: "セカンダリ カラー"
  text-color: "文字色"
  base-theme: "ベーステーマ"
  base-theme-light: "Light"
  base-theme-dark: "Dark"
  theme-name: "テーマ名"
  preview-created-theme: "プレビュー"
  invalid-theme: "テーマが正しくありません。"
  already-installed: "既にそのテーマはインストールされています。"
  saved: "保存しました"
  installed-themes: "インストールされたテーマ"
  select-theme: "テーマを選択してください"
 common/views/components/cw-button.vue:
  hide: "隠す"
  show: "もっと見る"
@@ -328,6 +350,7 @@ common/views/components/note-menu.vue:
  copy-link: "リンクをコピー"
  favorite: "お気に入り"
  pin: "ピン留め"
  unpin: "ピン留め解除"
  delete: "削除"
  delete-confirm: "この投稿を削除しますか？"
  remote: "投稿元で見る"
@@ -761,6 +784,7 @@ desktop/views/components/settings.vue:
  2fa: "二段階認証"
  other: "その他"
  license: "ライセンス"
  theme: "テーマ"
  behaviour: "動作"
  fetch-on-scroll: "スクロールで自動読み込み"
@@ -779,9 +803,10 @@ desktop/views/components/settings.vue:
  choose-wallpaper: "壁紙を選択"
  delete-wallpaper: "壁紙を削除"
  dark-mode: "ダークモード"
  use-shadow: "UIに影を使用"
  rounded-corners: "UIの角を丸める"
  circle-icons: "円形のアイコンを使用"
  contrasted-acct: "ユーザー名にコントラストを付ける"
  gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
  post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
  suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する"
  show-clock-on-header: "右上に時計を表示する"
@@ -790,7 +815,6 @@ desktop/views/components/settings.vue:
  show-renoted-my-notes: "自分の投稿のRenoteをタイムラインに表示する"
  show-local-renotes: "ローカルの投稿のRenoteをタイムラインに表示する"
  show-maps: "マップの自動展開"
  show-maps-desc: "位置情報が添付された投稿のマップを自動的に展開します。"
  sound: "サウンド"
  enable-sounds: "サウンドを有効にする"
@@ -1416,6 +1440,7 @@ mobile/views/pages/settings.vue:
  notification-position: "通知の表示"
  notification-position-bottom: "下"
  notification-position-top: "上"
  theme: "テーマ"
  behavior: "動作"
  fetch-on-scroll: "スクロールで自動読み込み"
  note-visibility: "投稿の公開範囲"
--- a/locales/ja-KS.yml
+++ b/locales/ja-KS.yml
@@ -13,12 +13,12 @@ common:
    rich-contents: "投稿"
    rich-contents-desc: "思っとること、タイガースの実況、他に言いたいことがあればなんでも言ってええで。いろんな構文あるから、好きにつこうてくれや。画像や動画、アンケートも添付できるで。"
    reaction: "リアクション"
-    reaction-desc: "あなたの気持ちを伝える最も簡単な方法です。Misskeyは、他のユーザーの投稿に様々なリアクションを付けることができます。いちどMisskeyのリアクション機能を体験してしまうと、もう「いいね」の概念しか存在しないSNSには戻れなくなるかもしれません。"
+    reaction-desc: "「何思っとるか言うてみ？」言われても、わからんわ！リアクション使うて、エモーションをダイレクトに伝えるんや！Misskeyはな、他のユーザーの投稿にいろんなリアクション付けられるんや。もう「いいね」とかいうもんだけのSNSには戻れへんわな。551の豚まん食うてみ？もう他の豚まん食えへんで？"
-    ui: "インターフェース"
+    ui: "インターフェイス"
-    ui-desc: "どのようなUIが使いやすいかは人それぞれです。だから、Misskeyは自由度の高いUIを持っています。レイアウトやデザインを調整したり、カスタマイズ可能な様々なウィジェットを配置したりして、自分だけのホームを作ってください。"
+    ui-desc: "このUIええ言うてたで、知らんけど。あんたの好みのUIなんて知ったこっちゃない。Misskeyは好きにいじれるからな、レイアウトやデザイン変えたり、色んなウィジェットひっつけたりして、あんただけのMisskey作って楽しんでな！"
    drive: "ドライブ"
-    drive-desc: "以前投稿したことのある画像をまた投稿したくなったことはありませんか？もしくは、アップロードしたファイルをフォルダ分けして整理したくなったことはありませんか？Misskeyの根幹に組み込まれたドライブ機能によってそれらが解決します。ファイルの共有も簡単です。"
+    drive-desc: "「こないだの画像、どこやったかな…また投稿したいんやけど…」「さっきのファイルあのフォルダに直しといて」そんなこと言わんとって。Misskeyはもとからドライブ機能持っとるさかい、心配あらへん。ファイルの「わけわけ」したってな。"
-    outro: "他にもMisskeyにしかない機能はまだまだあるので、ぜひあなた自身の目で確かめてください。Misskeyは分散型SNSなので、このインスタンスが気に入らなければ他のインスタンスを試すこともできます。それでは、GLHF!"
+    outro: "Misskeyの機能は無限大や！知らんけど。知らん言うとるやんけ、あんたが見に行けや！Misskeyは分散型SNSやから、ここがあかんくても他がある。阪神でもオリックスでもワイは応援するで！"
  adblock:
    detected: "広告ブロッカーを無効にしてや"
    warning: "<strong>Misskeyは広告を掲載してへん</strong>けど、広告をブロックしはる機能がおると一部の機能が利用できんくなったり、不具合が発生するかも分からん。知らんけど。"
@@ -84,11 +84,11 @@ common:
  note-visibility:
    public: "公開"
    home: "ホーム"
-    home-desc: "ホームタイムラインにのみ公開"
+    home-desc: "ホームタイムライン以外に見せんとって"
    followers: "フォロワー"
-    followers-desc: "自分のフォロワーにのみ公開"
+    followers-desc: "自分のフォロワー以外に見せんとって"
    specified: "ダイレクト"
-    specified-desc: "指定したユーザーにのみ公開"
+    specified-desc: "今から言うユーザー以外に見せんとってや"
    private: "非公開"
  note-placeholders:
    a: "今なにしてん？"
@@ -109,12 +109,12 @@ common:
  use-contrast-reversi-stones: "リバーシのアイコンにコントラストをつけんで！"
  verified-user: "アメちゃん付きアカウント"
  disable-animated-mfm: "投稿内のちょろちょろ動いてんのを止める"
-  always-show-nsfw: "常に閲覧注意のメディアを表示する"
+  always-show-nsfw: "閲覧注意？見せたらあかん？そんなん知らんわ、見せろや！"
-  always-mark-nsfw: "常にメディアを閲覧注意として投稿"
+  always-mark-nsfw: "わからんからとりあえずメディアは見せたらあかん"
-  show-full-acct: "ユーザー名のホストを省略しない"
+  show-full-acct: "ユーザー名のホストも出したる"
-  reduce-motion: "UIの動きを減らす"
+  reduce-motion: "UI、動き過ぎや、静かにしてや"
  this-setting-is-this-device-only: "このデバイスのみ"
-  do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
+  do-not-use-in-production: '開発ビルドや。本番環境で使わんといて！知らんで！'
  reversi:
    drawn: "おあいこ"
    my-turn: "あんさんのターンや"
@@ -157,7 +157,7 @@ common:
    hybrid: "ソーシャル"
    hashtag: "ハッシュタグ"
    global: "グローバル"
-    mentions: "あなた宛て"
+    mentions: "あんた宛て"
    direct: "ダイレクト投稿"
    notifications: "通知"
    list: "リスト"
@@ -262,11 +262,11 @@ common/views/components/connect-failed.troubleshooter.vue:
  flush: "キャッシュの削除"
  set-version: "バージョン指定"
 common/views/components/media-banner.vue:
-  sensitive: "閲覧注意"
+  sensitive: "見せたらあかん"
-  click-to-show: "クリックして表示"
+  click-to-show: "押してみ、見せたるわ"
 common/views/components/cw-button.vue:
-  hide: "隠す"
+  hide: "見せへんわ"
-  show: "もっと見る"
+  show: "もっとあるやろ！"
 common/views/components/messaging.vue:
  search-user: "ユーザーを探す"
  you: "あんさん"
@@ -303,7 +303,7 @@ common/views/components/note-menu.vue:
  pin: "ピン留め"
  delete: "ほかす"
  delete-confirm: "この投稿を削除してもええか？"
-  remote: "投稿元で見る"
+  remote: "投稿元に行ってみよか"
 common/views/components/poll.vue:
  vote-to: "「{}」に投票や！"
  vote-count: "{}票"
@@ -318,7 +318,7 @@ common/views/components/poll-editor.vue:
  add: "+選択肢を追加"
  destroy: "アンケートをほかそ"
 common/views/components/reaction-picker.vue:
-  choose-reaction: "リアクションを選択"
+  choose-reaction: "リアクション、どれにするんや？"
 common/views/components/signin.vue:
  username: "ユーザー名"
  password: "パスワード"
@@ -330,7 +330,7 @@ common/views/components/signin.vue:
  login-failed: "なんかログインできんかったわ。ユーザー名とパスワードとかを確認してや。"
 common/views/components/signup.vue:
  invitation-code: "招待コード"
-  invitation-info: "招待コードをお持ちでない方は、<a href=\"{}\">管理者</a>までご連絡ください。"
+  invitation-info: "招待コードをもっとらんのやったら、<a href=\"{}\">管理者</a>まで連絡してや。"
  username: "ユーザー名"
  checking: "確認中や…"
  available: "使えるで"
@@ -338,7 +338,7 @@ common/views/components/signup.vue:
  error: "通信あかんわ"
  invalid-format: "a~z、A~Z、0~9、_が使えるで"
  too-short: "1文字以上やで！"
-  too-long: "20文字以内でお願いします"
+  too-long: "20文字以内やで"
  password: "パスワード"
  password-placeholder: "8文字以上にしときや"
  weak-password: "へぼいパスワード"
@@ -352,8 +352,8 @@ common/views/components/signup.vue:
  create: "アカウント作成"
  some-error: "何かよう分からんけど、アカウントの作成に失敗してしもたわ。すまんがもっぺん試してくれへんか？"
 common/views/components/special-message.vue:
-  new-year: "Happy New Year!"
+  new-year: "おおきに。今年もよろしゅう。"
-  christmas: "Merry Christmas!"
+  christmas: "メリークリスマス！"
 common/views/components/stream-indicator.vue:
  connecting: "つないどるで"
  reconnecting: "つなぎ直すで"
@@ -370,19 +370,19 @@ common/views/components/uploader.vue:
 common/views/components/visibility-chooser.vue:
  public: "公開"
  home: "ホーム"
-  home-desc: "ホームタイムラインにのみ公開"
+  home-desc: "ホームタイムライン以外に見せんとって"
  followers: "フォロワー"
-  followers-desc: "自分のフォロワーにのみ公開"
+  followers-desc: "自分のフォロワー以外に見せんとって"
  specified: "ダイレクト"
-  specified-desc: "指定したユーザーにのみ公開"
+  specified-desc: "今から言うユーザー以外に見せんとってや"
  private: "非公開"
 common/views/components/trends.vue:
  count: "{}人が投稿"
-  empty: "トレンドなし"
+  empty: "流行は自分で作るんや"
 common/views/widgets/broadcast.vue:
  fetching: "見てみるわ…"
  no-broadcasts: "お知らせはあらへんで"
-  have-a-nice-day: "良い一日を！"
+  have-a-nice-day: "おおきに！"
  next: "次"
 common/views/widgets/calendar.vue:
  year: "{}年"
@@ -436,21 +436,21 @@ common/views/widgets/tips.vue:
  tips-line25: "対応ブラウザやったらMisskeyを開いとらんでも通知を受け取れんで"
 common/views/pages/follow.vue:
  signed-in-as: "{}としてサインイン中"
-  following: "フォロー中"
+  following: "フォローしとる"
  follow: "フォロー"
-  request-pending: "フォロー許可待ち"
+  request-pending: "フォローの許し待っとる"
-  follow-request: "フォロー申請"
+  follow-request: "フォロー許してくれや！言うてみる"
 desktop:
-  banner-crop-title: "バナーとして表示する部分を選択"
+  banner-crop-title: "どこバナーとして出す？"
  banner: "バナー"
  uploading-banner: "新しいバナーをアップロードしとるで"
  banner-updated: "バナーを更新したで"
  choose-banner: "バナーにする画像選んでや"
  avatar-crop-title: "どこアバターとして出しとく？"
  avatar: "アバター"
-  uploading-avatar: "新しいアバターをアップロードしています"
+  uploading-avatar: "新しいアバターをアップロードしとるで"
-  avatar-updated: "アバターを更新しました"
+  avatar-updated: "アバターを更新したで"
-  choose-avatar: "アバターにする画像を選択"
+  choose-avatar: "アバターにする画像選んでや"
  invalid-filetype: "この形式のファイル無理やねん"
 desktop/views/components/activity.chart.vue:
  total: "Black ... Total"
@@ -459,7 +459,7 @@ desktop/views/components/activity.chart.vue:
  renotes: "Green ... Renotes"
 desktop/views/components/activity.vue:
  title: "アクティビティ"
-  toggle: "表示を切り替え"
+  toggle: "表示変える"
 desktop/views/components/calendar.vue:
  title: "{1}年 {2} 月"
  prev: "前の月"
@@ -474,10 +474,10 @@ desktop/views/components/charts.vue:
  drive: "ドライブ"
  network: "ネットワーク"
  charts:
-    notes: "投稿の増減 (統合)"
+    notes: "投稿の増減(統合)"
    local-notes: "投稿の増減 (ローカル)"
    remote-notes: "投稿の増減 (リモート)"
-    notes-total: "投稿の累計"
+    notes-total: "全部の投稿"
    users: "ユーザーの増減"
    users-total: "ユーザーの累計"
    drive: "ドライブ使用量の増減"
@@ -488,21 +488,21 @@ desktop/views/components/charts.vue:
    network-time: "応答時間"
    network-usage: "通信量"
 desktop/views/components/choose-file-from-drive-window.vue:
-  choose-file: "ファイル選択中"
+  choose-file: "ファイル選択しとる"
-  upload: "PCからドライブにファイルをアップロード"
+  upload: "PCからドライブにファイル上げる"
  cancel: "やめとくわ"
-  ok: "決定"
+  ok: "そうする"
-  choose-prompt: "ファイルを選択"
+  choose-prompt: "ファイル選んでや"
 desktop/views/components/choose-folder-from-drive-window.vue:
  cancel: "やめとくわ"
-  ok: "決定"
+  ok: "そうする"
-  choose-prompt: "フォルダを選択"
+  choose-prompt: "フォルダ選んでや"
 desktop/views/components/crop-window.vue:
-  skip: "クロップをスキップ"
+  skip: "クロップせーへんわ"
  cancel: "やめとくわ"
-  ok: "決定"
+  ok: "そうする"
 desktop/views/components/drive-window.vue:
-  used: "使用中"
+  used: "使うとる"
  drive: "ドライブ"
 desktop/views/components/drive.file.vue:
  avatar: "アイコン"
@@ -538,17 +538,17 @@ desktop/views/components/drive.nav-folder.vue:
 desktop/views/components/drive.vue:
  search: "検索"
  load-more: "もっとあらへんのか！"
-  empty-draghover: "ドロップですか？いいですよ、ボクはカワイイですからね"
+  empty-draghover: "ドロップするにゃ！お魚以外なら何でもいいにゃ！"
  empty-drive: "ドライブには何もあらへんで。"
-  empty-drive-description: "右クリックして「ファイルをアップロード」を選んだり、ファイルをドラッグ&ドロップすることでもアップロードできます。"
+  empty-drive-description: "右クリックして「ファイルをアップロード」を選んだり、ファイルをドラッグ&ドロップすることでもアップロードできんねん。"
-  empty-folder: "このフォルダーは空です"
+  empty-folder: "このフォルダーは空や"
  unable-to-process: "あかん、無理やわ"
-  circular-reference-detected: "移動先のフォルダーは、移動するフォルダーのサブフォルダーです。"
+  circular-reference-detected: "移動先のフォルダーは、移動するフォルダーのサブフォルダーや。"
  unhandled-error: "ようわからん"
  url-upload: "URLアップロード"
  url-of-file: "このURLのファイルをアップロードしたいねん"
  url-upload-requested: "アップロードしたい言うといたで"
-  may-take-time: "アップロードが完了するまで時間がかかる場合があります。"
+  may-take-time: "アップロード終わるまで時間かかるわ、知らんけど。たこ焼き何個食べれるやろか…"
  create-folder: "フォルダー作成"
  folder-name: "フォルダー名"
  contextmenu:
@@ -579,7 +579,7 @@ desktop/views/components/friends-maker.vue:
  empty: "おもろいユーザー居らんかったわ"
  fetching: "読みこんどるで…"
  refresh: "もっとあるやろ！"
-  close: "閉じる"
+  close: "さいなら"
 desktop/views/components/game-window.vue:
  game: "ゲーム"
 desktop/views/components/home.vue:
@@ -606,9 +606,9 @@ desktop/views/components/notes.note.vue:
  reply: "返す"
  renote: "Renote"
  add-reaction: "リアクション"
-  detail: "詳細"
+  detail: "もっと"
-  private: "この投稿は非公開です"
+  private: "この投稿は見せられへんわ"
-  deleted: "この投稿は削除されました"
+  deleted: "この投稿なんか無くなってもうたわ"
 desktop/views/components/notes.vue:
  error: "あかん、読み込めへんわ"
  retry: "もっぺん"
@@ -656,11 +656,11 @@ desktop/views/components/renote-form.vue:
  quote: "持ってくる…"
  cancel: "やめとくわ"
  renote: "Renote"
-  reposting: "しています..."
+  reposting: "やっとります..."
-  success: "Renoteしました！"
+  success: "Renoteしたで！"
-  failure: "Renoteに失敗しました"
+  failure: "Renoteでけへん"
 desktop/views/components/renote-form-window.vue:
-  title: "この投稿をRenoteしますか？"
+  title: "この投稿をRenoteしてもええか？"
 desktop/views/components/settings-window.vue:
  settings: "設定"
 desktop/views/components/settings.vue:
@@ -669,27 +669,27 @@ desktop/views/components/settings.vue:
  apps: "アプリ"
  mute: "ミュート"
  drive: "ドライブ"
-  security: "セキュリティ"
+  security: "守護神セキュリティ"
-  signin: "サインイン履歴"
+  signin: "こんな感じでサインインしたらしいで"
  password: "パスワード"
  2fa: "二段階認証"
  other: "その他"
  license: "ライセンス"
-  behaviour: "動作"
+  behaviour: "動き"
-  fetch-on-scroll: "スクロールで自動読み込み"
+  fetch-on-scroll: "スクロールしたらもっと見せてや"
-  fetch-on-scroll-desc: "ページを下までスクロールしたときに自動で追加のコンテンツを読み込みます。"
+  fetch-on-scroll-desc: "ページを下までスクロールしたときに自動でもっとコンテンツを読み込むで。"
  note-visibility: "投稿の公開範囲"
-  default-note-visibility: "デフォルトの公開範囲"
+  default-note-visibility: "もとからの公開範囲"
-  remember-note-visibility: "投稿の公開範囲を記憶する"
+  remember-note-visibility: "投稿の公開範囲おぼえといて"
  auto-popout: "ウィンドウの自動ポップアウト"
-  auto-popout-desc: "ウィンドウが開かれるとき、ポップアウト(ブラウザ外に切り離す)可能なら自動でポップアウトします。この設定はブラウザに記憶されます。"
+  auto-popout-desc: "ウィンドウが開かれるとき、ポップアウト(ブラウザ外に切り離す)可能なら自動でポップアウトすんで。この設定はブラウザに記憶されんで。"
-  advanced: "詳細設定"
+  advanced: "もっと設定"
  api-via-stream: "ストリームを経由したAPIリクエスト"
  api-via-stream-desc: "この設定をオンにすると、WebSocket接続を経由してAPIリクエストが行われんで(パフォーマンス向上するかも、知らんけど)。オフにすると、ネイティブの fetch API が利用されるで。この設定はこのデバイスのみ有効やで。"
-  display: "デザインと表示"
+  display: "見た感じ"
  customize: "ホームをカスタマイズ"
-  choose-wallpaper: "壁紙を選択"
+  choose-wallpaper: "壁紙選ぶ"
-  delete-wallpaper: "壁紙を削除"
+  delete-wallpaper: "壁紙ほかす"
  dark-mode: "夜にすんで"
  circle-icons: "アイコンもタコ焼きも丸いやんな？"
  contrasted-acct: "ユーザー名ようわからんし見やすしといて"
@@ -722,39 +722,39 @@ desktop/views/components/settings.vue:
  cache-cleared: "キャッシュお掃除したで"
  cache-cleared-desc: "もっぺんページ読みこみ直してくれや"
  auto-watch: "投稿勝手にウォッチしといてや"
-  auto-watch-desc: "リアクションしたり返信したりした投稿に関する通知を自動的に受け取るようにします。"
+  auto-watch-desc: "リアクションしたり返信したりした投稿に関する通知を勝手に受け取るようにすんで。"
-  about: "Misskeyについて"
+  about: "Misskeyってなんや？"
-  operator: "このサーバーの運営者"
+  operator: "このサーバー誰のや"
  update: "Misskey Update"
  version: "バージョン:"
  latest-version: "最新のバージョン:"
-  update-checking: "アップデートを確認中"
+  update-checking: "アップデートはあらへんか…"
-  do-update: "アップデートを確認"
+  do-update: "アップデートあるか見てみる"
-  update-settings: "詳細設定"
+  update-settings: "もっと設定"
-  prevent-update: "アップデートを延期する(非推奨)"
+  prevent-update: "アップデートしたないわ、また今度や(やめときや)"
-  prevent-update-desc: "この設定をオンにしてもアップデートが反映される場合があります。この設定はこのデバイスのみ有効です。"
+  prevent-update-desc: "この設定をオンにしとってもアップデートが反映される場合があるかも分からん、知らんけど気ぃつけてや。この設定はこのデバイスのみ有効やで。"
-  no-updates: "利用可能な更新はありません"
+  no-updates: "使える更新はあらへん"
  no-updates-desc: "つこてるMisskeyは最新や！"
  update-available: "新しいバージョンが利用可能や"
  update-available-desc: "ページを再度読み込みすると更新が適用されるで。"
-  advanced-settings: "高度な設定"
+  advanced-settings: "ワイにはわからん設定"
-  debug-mode: "デバッグモードを有効にする"
+  debug-mode: "デバッグモードにしてみる"
-  debug-mode-desc: "この設定はブラウザに記憶されます。"
+  debug-mode-desc: "この設定はブラウザに記憶されんで。"
-  experimental: "実験的機能を有効にする"
+  experimental: "お試し機能使うてみる"
-  experimental-desc: "実験的機能を有効にするとMisskeyの動作が不安定になる可能性があります。この設定はブラウザに記憶されます。"
+  experimental-desc: "実験的機能を有効にするとMisskeyの動作が不安定になるかも分からん、知らんけど気ぃつけてや。この設定はブラウザに記憶されんで。"
  tools: "ツール"
  task-manager: "タスクマネージャ"
  third-parties: "サードパーティ"
 desktop/views/components/settings.2fa.vue:
-  intro: "二段階認証を設定すると、サインイン時にパスワードだけでなく、予め登録しておいた物理的なデバイス(例えばあなたのスマートフォンなど)も必要になり、よりセキュリティが向上します。"
+  intro: "二段階認証を設定すると、サインイン時にパスワードだけとちゃうくて、予め登録しておいた物理的なデバイス(例えばあんさんのスマートフォンなど)も必要になり、よりセキュリティが向上すんで。"
  detail: "詳細..."
  url: "https://www.google.co.jp/intl/ja/landing/2step/"
-  caution: "登録したデバイスを紛失するなどした場合、Misskeyにサインインできなくなりますのでご注意ください。"
+  caution: "登録したデバイスを紛失してもうたら、もうMisskeyにサインインできんくなるで。"
-  register: "デバイスを登録する"
+  register: "デバイス登録する"
-  already-registered: "既に設定は完了しています。"
+  already-registered: "もう設定終わっとるわ"
-  unregister: "設定を解除"
+  unregister: "設定をほかす"
-  unregistered: "二段階認証が無効になりました。"
+  unregistered: "二段階認証もうせーへんで"
-  enter-password: "パスワードを入力してください"
+  enter-password: "パスワードを入れてや"
  authenticator: "まず、Google Authenticatorとかのをつこてるデバイスにインストールしてや:"
  howtoinstall: "インストール方法はここやで"
  scan: "んで、ここに出とるQRコードをスキャンしてな:"
@@ -779,28 +779,28 @@ desktop/views/components/settings.mute.vue:
  no-users: "ミュートしているユーザーはおらんで"
 desktop/views/components/settings.password.vue:
  reset: "パスワードを変更する"
-  enter-current-password: "現在のパスワードを入力してください"
+  enter-current-password: "今のパスワードを入れてや"
-  enter-new-password: "新しいパスワードを入力してください"
+  enter-new-password: "さらのパスワード入れてや"
-  enter-new-password-again: "もう一度新しいパスワードを入力してください"
+  enter-new-password-again: "もういっぺんさらのパスワードを入れてや"
-  not-match: "新しいパスワードが一致しません"
+  not-match: "パスワードがおうとらん"
-  changed: "パスワードを変更しました"
+  changed: "パスワード変えたわ"
 desktop/views/components/settings.profile.vue:
  avatar: "アイコン"
-  choice-avatar: "画像を選択"
+  choice-avatar: "画像選んでや"
  name: "名前"
  location: "場所"
-  description: "自己紹介"
+  description: "ワイのこと"
  birthday: "誕生日"
  save: "保存"
-  locked-account: "アカウントの保護"
+  locked-account: "アカウント守る"
-  is-locked: "フォローを承認制にする"
+  is-locked: "他人のフォローは許してからや！"
  other: "その他"
-  is-bot: "このアカウントはBotです"
+  is-bot: "このアカウントはBotやで"
-  is-cat: "このアカウントはCatです"
+  is-cat: "このアカウントはCatやで"
-  profile-updated: "プロフィールを更新しました"
+  profile-updated: "プロフィールを更新したで"
 desktop/views/components/sub-note-content.vue:
-  private: "この投稿は非公開です"
+  private: "この投稿は見せられへんわ"
-  deleted: "この投稿は削除されました"
+  deleted: "この投稿なんか無くなってもうたわ"
  media-count: "{}つのメディア"
  poll: "アンケート"
 desktop/views/components/taskmanager.vue:
@@ -810,27 +810,27 @@ desktop/views/components/timeline.vue:
  local: "ローカル"
  hybrid: "ソーシャル"
  global: "グローバル"
-  mentions: "あなた宛て"
+  mentions: "あんた宛て"
  messages: "メッセージ"
  list: "リスト"
  hashtag: "ハッシュタグ"
-  add-tag-timeline: "ハッシュタグを追加"
+  add-tag-timeline: "ハッシュタグ増やす"
-  add-list: "リストを追加"
+  add-list: "リストに入れる"
  list-name: "リスト名"
 desktop/views/components/ui.header.vue:
  welcome-back: "おかえり、"
-  adjective: "さん"
+  adjective: "はん"
 desktop/views/components/ui.header.account.vue:
  profile: "プロフィール"
  drive: "ドライブ"
  favorites: "お気に入り"
  lists: "リスト"
-  follow-requests: "フォロー申請"
+  follow-requests: "フォロー許してくれや！言うてみる"
  customize: "ホームをカスタマイズ"
  admin: "管理"
  settings: "設定"
-  signout: "サインアウト"
+  signout: "さいなら"
-  dark: "闇に飲まれる"
+  dark: "ナイトゲームじゃ！"
 desktop/views/components/ui.header.nav.vue:
  home: "ホーム"
  deck: "デッキ"
@@ -843,9 +843,9 @@ desktop/views/components/ui.header.post.vue:
 desktop/views/components/ui.header.search.vue:
  placeholder: "検索"
 desktop/views/components/received-follow-requests-window.vue:
-  title: "フォロー申請"
+  title: "フォロー許してくれや！言うてみる"
-  accept: "承認"
+  accept: "許す"
-  reject: "拒否"
+  reject: "許さん"
 desktop/views/components/user-lists-window.vue:
  title: "リスト"
  create-list: "新しいリストを作成"
@@ -856,14 +856,14 @@ desktop/views/components/user-preview.vue:
  followers: "フォロワー"
 desktop/views/components/users-list.vue:
  all: "すべて"
-  iknow: "知り合い"
+  iknow: "知っとる"
  load-more: "もっと"
-  fetching: "読み込んでいます"
+  fetching: "読みこんどるで…"
 desktop/views/components/users-list-item.vue:
-  followed: "フォローされています"
+  followed: "フォローされとるで"
 desktop/views/components/window.vue:
  popout: "ポップアウト"
-  close: "閉じる"
+  close: "さいなら"
 desktop/views/pages/admin/admin.vue:
  dashboard: "ダッシュボード"
  drive: "ドライブ"
@@ -871,15 +871,15 @@ desktop/views/pages/admin/admin.vue:
  update: "更新"
 desktop/views/pages/admin/admin.dashboard.vue:
  dashboard: "ダッシュボード"
-  all-users: "全てのユーザー"
+  all-users: "知り合い全員や"
-  original-users: "このインスタンスのユーザー"
+  original-users: "ここの人らだけ"
  all-notes: "全ての投稿"
  original-notes: "このインスタンスの投稿"
-  invite: "招待"
+  invite: "来てや"
 desktop/views/pages/admin/admin.suspend-user.vue:
  suspend-user: "ユーザーの凍結"
  suspend: "凍結"
-  suspended: "凍結しました"
+  suspended: "凍結したで"
 desktop/views/pages/admin/admin.unsuspend-user.vue:
  unsuspend-user: "ユーザーの凍結の解除"
  unsuspend: "凍結の解除"
@@ -889,33 +889,33 @@ desktop/views/pages/admin/admin.verify-user.vue:
  verify: "公式アカウントにする"
  verified: "公式アカウントにしたで"
 desktop/views/pages/admin/admin.unverify-user.vue:
-  unverify-user: "ユーザーの公式アカウント解除"
+  unverify-user: "ユーザーの公式アカウントにせーへん"
-  unverify: "公式アカウントを解除する"
+  unverify: "公式アカウントにはさせへんで"
-  unverified: "公式アカウントを解除しました"
+  unverified: "公式アカウントを解除したで"
 desktop/views/pages/deck/deck.tl-column.vue:
-  is-media-only: "メディア投稿のみ"
+  is-media-only: "メディア投稿だけや"
  is-media-view: "メディアビュー"
  edit: "オプション"
 desktop/views/pages/deck/deck.note.vue:
  reposted-by: "{}がRenote"
-  private: "この投稿は非公開です"
+  private: "この投稿は見せられへんわ"
-  deleted: "この投稿は削除されました"
+  deleted: "この投稿なんか無くなってもうたわ"
 desktop/views/pages/stats/stats.vue:
  all-users: "全てのユーザー"
-  original-users: "このインスタンスのユーザー"
+  original-users: "ここの人らだけ"
  all-notes: "全ての投稿"
  original-notes: "このインスタンスの投稿"
 desktop/views/pages/welcome.vue:
-  about: "詳しく..."
+  about: "もっと…"
-  gotit: "わかった"
+  gotit: "ほい"
  signin: "サインイン"
  signup: "サインアップ"
  signin-button: "サインイン中…"
  signup-button: "サインアップ"
  timeline: "タイムライン"
-  announcements: "お知らせ"
+  announcements: "知っときや"
  photos: "最近の画像"
-  powered-by-misskey: "Powered by <b>Misskey</b>."
+  powered-by-misskey: "<b>Misskey</b>のおかげや"
  info: "情報"
 desktop/views/pages/drive.vue:
  title: "ドライブ"
@@ -924,41 +924,41 @@ desktop/views/pages/favorites.vue:
 desktop/views/pages/home-customize.vue:
  title: "ホームをカスタマイズ"
 desktop/views/pages/note.vue:
-  prev: "前の投稿"
+  prev: "前のやつ"
-  next: "次の投稿"
+  next: "次のやつ"
 desktop/views/pages/selectdrive.vue:
-  title: "ファイルを選択してください"
+  title: "ファイルを選択してや"
  ok: "決定"
  cancel: "やめとくわ"
-  upload: "PCからドライブにファイルをアップロード"
+  upload: "PCからドライブにファイル上げる"
 desktop/views/pages/search.vue:
-  not-available: "検索機能はインスタンスの設定で無効になっています。"
+  not-available: "検索機能は使えへんわ。管理者がそう言うとる。"
-  not-found: "「{}」に関する投稿は見つかりませんでした。"
+  not-found: "「{}」に関する投稿はあらへん。"
 desktop/views/pages/share.vue:
  share-with: "{}で共有"
 desktop/views/pages/tag.vue:
-  no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
+  no-posts-found: "ハッシュタグ「{}」が付けられた投稿はあらへん。"
 desktop/views/pages/user-list.users.vue:
  users: "ユーザー"
-  add-user: "ユーザーを追加"
+  add-user: "ユーザー増やす"
  username: "ユーザー名"
 desktop/views/pages/user/user.followers-you-know.vue:
-  title: "知り合いのフォロワー"
+  title: "知っとるフォロワー"
-  loading: "読み込み中"
+  loading: "読み込んどる…"
-  no-users: "知り合いのフォロワーはいません"
+  no-users: "フォロワー全員知らんわ"
 desktop/views/pages/user/user.friends.vue:
-  title: "よく話すユーザー"
+  title: "よう話すツレ"
-  loading: "読み込み中"
+  loading: "読み込んどる…"
-  no-users: "よく話すユーザーはいません"
+  no-users: "よう話すツレは居らん"
 desktop/views/pages/user/user.vue:
-  is-suspended: "このユーザーは凍結されています。"
+  is-suspended: "このユーザーはあかんわ。凍結されとる。"
-  is-remote: "このユーザーはリモートユーザーです。"
+  is-remote: "このユーザーはリモートユーザーや。"
-  view-remote: "正確な情報を見る"
+  view-remote: "ちゃんとした情報を見る"
 desktop/views/pages/user/user.home.vue:
-  last-used-at: "最終アクセス"
+  last-used-at: "最後いつ来た？"
 desktop/views/pages/user/user.photos.vue:
  title: "写真"
-  loading: "読み込み中"
+  loading: "読み込んどる…"
  no-photos: "写真はあらへんで"
 desktop/views/pages/user/user.profile.vue:
  follows-you: "フォローされとるで"
@@ -974,12 +974,12 @@ desktop/views/pages/user/user.header.vue:
  posts: "投稿"
  following: "フォロー"
  followers: "フォロワー"
-  is-bot: "このアカウントはBotです"
+  is-bot: "このアカウントはBotや"
 desktop/views/pages/user/user.timeline.vue:
  default: "投稿"
  with-replies: "投稿と返信"
  with-media: "メディア"
-  empty: "このユーザーはまだ何も投稿していないようです。"
+  empty: "このユーザーはまだ何も投稿しとらんようや。"
 desktop/views/widgets/messaging.vue:
  title: "メッセージ"
 desktop/views/widgets/notifications.vue:
@@ -993,76 +993,76 @@ desktop/views/widgets/post-form.vue:
  title: "投稿"
  note: "投稿"
 desktop/views/widgets/profile.vue:
-  update-banner: "クリックでバナー編集"
+  update-banner: "クリックしてバナー編集"
-  update-avatar: "クリックでアバター編集"
+  update-avatar: "クリックしてアバター編集"
 desktop/views/widgets/trends.vue:
-  title: "トレンド"
+  title: "流行"
  refresh: "他を見る"
-  nothing: "ありません！"
+  nothing: "あらへん！"
 desktop/views/widgets/users.vue:
  title: "おすすめユーザー"
  refresh: "他を見る"
-  no-one: "いません！"
+  no-one: "おらん！"
 mobile/views/components/drive.vue:
  drive: "ドライブ"
-  used: "使用中"
+  used: "使うとる"
  folder-count: "フォルダ"
  count-separator: "、"
  file-count: "ファイル"
-  load-more: "もっと読み込む"
+  load-more: "もっとあらへんのか！"
  nothing-in-drive: "ドライブには何もあらへんで。"
-  folder-is-empty: "このフォルダは空です"
+  folder-is-empty: "このフォルダ何もないわ"
-  prompt: "何をしますか？(数字を入力してください): <1 → ファイルをアップロード | 2 → ファイルをURLでアップロード | 3 → フォルダ作成 | 4 → このフォルダ名を変更 | 5 → このフォルダを移動 | 6 → このフォルダを削除>"
+  prompt: "何すんの？(数字を入れてや): <1 → ファイルをアップロード | 2 → ファイルをURLでアップロード | 3 → フォルダ作成 | 4 → このフォルダ名を変更 | 5 → このフォルダを移動 | 6 → このフォルダを削除>"
-  deletion-alert: "ごめんなさい！フォルダの削除は未実装です...。"
+  deletion-alert: "フォルダの削除は未実装やねん...。堪忍な！"
  folder-name: "フォルダー名"
-  root-rename-alert: "現在いる場所はルートで、フォルダではないため名前の変更はできません。名前を変更したいフォルダに移動してからやってください。"
+  root-rename-alert: "現在おる場所はルートで、フォルダとちゃうから名前の変更はできへん。名前を変更したいフォルダに移動してからやってな。"
-  root-move-alert: "現在いる場所はルートで、フォルダではないため移動はできません。移動したいフォルダに移動してからやってください。"
+  root-move-alert: "現在おる場所はルートで、フォルダとちゃうから移動はできへん。移動したいフォルダに移動してからやってな。"
-  url-prompt: "アップロードしたいファイルのURL"
+  url-prompt: "このURLのファイルをアップロードしたいねん"
-  uploading: "アップロードをリクエストしました。アップロードが完了するまで時間がかかる場合があります。"
+  uploading: "アップロードをリクエストしたで。アップロードが完了するまで時間がかかるかも分からん、知らんけど。"
 mobile/views/components/drive-file-detail.vue:
-  rename: "名前を変更"
+  rename: "名前を変えるで"
 mobile/views/components/drive-file-chooser.vue:
-  select-file: "ファイルを選択"
+  select-file: "ファイル選んでや"
 mobile/views/components/drive-folder-chooser.vue:
-  select-folder: "フォルダーを選択"
+  select-folder: "フォルダ選んでや"
 mobile/views/components/drive.file.vue:
-  nsfw: "閲覧注意"
+  nsfw: "ちょっと見せられへんわ"
 mobile/views/components/drive.file-detail.vue:
  download: "ダウンロード"
-  rename: "名前を変更"
+  rename: "名前を変えるで"
  move: "移動"
-  hash: "ハッシュ (md5)"
+  hash: "ハッシュ(md5)"
  exif: "EXIF"
-  nsfw: "閲覧注意"
+  nsfw: "ちょっと見せられへんわ"
 mobile/views/components/media-image.vue:
-  sensitive: "閲覧注意"
+  sensitive: "見たらあかんで"
-  click-to-show: "クリックして表示"
+  click-to-show: "押してみ、見せたるわ"
 mobile/views/components/media-video.vue:
-  sensitive: "閲覧注意"
+  sensitive: "ちょっと見せられへんわ"
-  click-to-show: "クリックして表示"
+  click-to-show: "押してみ、見せたるわ"
 mobile/views/components/follow-button.vue:
-  following: "フォロー中"
+  following: "フォローしとる"
  follow: "フォロー"
-  request-pending: "フォロー許可待ち"
+  request-pending: "フォローの許し待っとる"
-  follow-request: "フォロー申請"
+  follow-request: "フォロー許してくれや！言うてみる"
 mobile/views/components/friends-maker.vue:
-  title: "気になるユーザーをフォロー"
+  title: "おもろそうやな"
-  empty: "おすすめのユーザーは見つかりませんでした。"
+  empty: "おすすめのユーザーはおらん。"
-  fetching: "読み込んでいます"
+  fetching: "読みこんどるで…"
-  refresh: "もっと見る"
+  refresh: "もっとあるやろ！"
-  close: "閉じる"
+  close: "さいなら"
 mobile/views/components/note.vue:
  reposted-by: "{}がRenote"
-  private: "この投稿は非公開です"
+  private: "この投稿は見せられへんわ"
-  deleted: "この投稿は削除されました"
+  deleted: "この投稿なんか無くなってもうたわ"
-  location: "位置情報"
+  location: "ここおるで:"
 mobile/views/components/note-detail.vue:
-  reply: "返信"
+  reply: "返す"
  reaction: "リアクション"
  reposted-by: "{}がRenote"
-  private: "この投稿は非公開です"
+  private: "この投稿は見せられへんわ"
-  deleted: "この投稿は削除されました"
+  deleted: "この投稿なんか無くなってもうたわ"
-  location: "位置情報"
+  location: "ここおるで:"
 mobile/views/components/note-preview.vue:
  admin: "admin"
  bot: "bot"
@@ -1072,55 +1072,55 @@ mobile/views/components/note-sub.vue:
  bot: "bot"
  cat: "cat"
 mobile/views/components/notes.vue:
-  failed: "読み込みに失敗しました。"
+  failed: "あかん、読み込めへんわ"
-  retry: "リトライ"
+  retry: "もっぺん"
 mobile/views/components/notifications.vue:
-  more: "もっと見る"
+  more: "もっとあるやろ！"
-  empty: "ありません！"
+  empty: "あらへん！"
 mobile/views/components/post-form.vue:
-  add-visible-user: "ユーザーを追加"
+  add-visible-user: "ユーザー増やす"
  submit: "投稿"
-  reply: "返信"
+  reply: "返す"
  renote: "Renote"
-  quote-placeholder: "この投稿を引用... (オプション)"
+  quote-placeholder: "この投稿を持ってくる(オプション)"
  reply-placeholder: "この投稿への返信..."
  cw-placeholder: "内容への注釈 (オプション)"
  location-alert: "あんさんのつことる端末は位置情報に対応しとらんみたいやわ、知らんけど。"
  error: "エラー"
  username-prompt: "ユーザー名を入力してや"
 mobile/views/components/sub-note-content.vue:
-  private: "この投稿は非公開です"
+  private: "この投稿は見せられへんわ"
-  deleted: "この投稿は削除されました"
+  deleted: "この投稿なんか無くなってもうたわ"
  media-count: "{}つのメディア"
  poll: "アンケート"
 mobile/views/components/timeline.vue:
-  empty: "投稿がありません"
+  empty: "投稿はあらへん"
  load-more: "もっと"
 mobile/views/components/ui.header.vue:
-  welcome-back: "おかえりなさい、"
+  welcome-back: "おかえり、"
-  adjective: "さん"
+  adjective: "はん"
 mobile/views/components/ui.nav.vue:
  timeline: "タイムライン"
  notifications: "通知"
  messaging: "メッセージ"
-  follow-requests: "フォロー申請"
+  follow-requests: "フォロー許してくれや！言うてみる"
  search: "検索"
  drive: "ドライブ"
  favorites: "お気に入り"
  user-lists: "リスト"
  widgets: "ウィジェット"
  game: "ゲーム"
-  darkmode: "ダークモード"
+  darkmode: "ナイトゲームや"
  settings: "設定"
  admin: "管理"
-  about: "Misskeyについて"
+  about: "Misskeyってなんや？"
 mobile/views/components/user-timeline.vue:
-  no-notes: "このユーザーは投稿していないようです。"
+  no-notes: "このユーザーは投稿しとらんようや。"
-  no-notes-with-media: "メディア付き投稿はありません。"
+  no-notes-with-media: "メディア付き投稿はあらへん。"
  load-more: "もっと"
 mobile/views/components/users-list.vue:
  all: "すべて"
-  known: "知り合い"
+  known: "知っとる"
  load-more: "もっと"
 mobile/views/pages/favorites.vue:
  title: "お気に入り"
@@ -1129,9 +1129,9 @@ mobile/views/pages/user-lists.vue:
  enter-list-name: "リスト名を入力してや"
 mobile/views/pages/drive.vue:
  drive: "ドライブ"
-  more: "もっと見る"
+  more: "もっとあるやろ！"
 mobile/views/pages/signup.vue:
-  lets-start: "📦 始めましょう"
+  lets-start: "📦 始めようや"
 mobile/views/pages/followers.vue:
  followers-of: "{}のフォロワー"
 mobile/views/pages/following.vue:
@@ -1141,7 +1141,7 @@ mobile/views/pages/home.vue:
  local: "ローカル"
  hybrid: "ソーシャル"
  global: "グローバル"
-  mentions: "あなた宛て"
+  mentions: "あんた宛て"
  messages: "メッセージ"
 mobile/views/pages/tag.vue:
  no-posts-found: "ハッシュタグ「{}」が付けられた投稿はあらへんで。"
@@ -1149,28 +1149,28 @@ mobile/views/pages/welcome.vue:
  signup: "新規登録"
 mobile/views/pages/widgets.vue:
  dashboard: "ダッシュボード"
-  widgets-hints: "ウィジェットを追加/削除したり並べ替えたりできます。ウィジェットを移動するには「三」をドラッグします。ウィジェットを削除するには「x」をタップします。いくつかのウィジェットはタップすることで表示を変更できます。"
+  widgets-hints: "ウィジェットを追加/削除したり並べ替えたりできんで。ウィジェットを移動するんやったら「三」をドラッグしてや。ウィジェットを削除するんやったら「x」をタップしてや。いくつかのウィジェットはタップしたったら表示を変更できるかも分からん、知らんけど。"
-  add-widget: "追加"
+  add-widget: "増やす"
  customization-tips: "カスタマイズのヒント"
 mobile/views/pages/widgets/activity.vue:
-  activity: "アクティビティ"
+  activity: "やっとること"
 mobile/views/pages/share.vue:
-  share-with: "{}で共有"
+  share-with: "{}で「わけわけ」"
 mobile/views/pages/messaging.vue:
  messaging: "メッセージ"
 mobile/views/pages/messaging-room.vue:
  messaging: "メッセージ"
 mobile/views/pages/received-follow-requests.vue:
-  title: "フォロー申請"
+  title: "フォロー許してくれや！"
-  accept: "承認"
+  accept: "許す"
-  reject: "拒否"
+  reject: "許さん"
 mobile/views/pages/note.vue:
  title: "投稿"
-  prev: "前の投稿"
+  prev: "前のやつ"
-  next: "次の投稿"
+  next: "次のやつ"
 mobile/views/pages/notifications.vue:
  notifications: "通知"
-  read-all: "すべての通知を既読にしますか？"
+  read-all: "通知全部読んだか？"
 mobile/views/pages/games/reversi.vue:
  reversi: "リバーシ"
 mobile/views/pages/settings/settings.profile.vue:
@@ -1178,12 +1178,12 @@ mobile/views/pages/settings/settings.profile.vue:
  name: "名前"
  account: "アカウント"
  location: "場所"
-  description: "自己紹介"
+  description: "ワイのこと"
  birthday: "誕生日"
  avatar: "アイコン"
  banner: "バナー"
-  is-cat: "このアカウントはCatです"
+  is-cat: "このアカウントはCatや"
-  is-locked: "フォローを承認制にする"
+  is-locked: "他人のフォローは許してからや！"
  advanced: "その他"
  privacy: "プライバシー"
  save: "保存"
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "8.50.0",
+	"version": "8.63.0",
-	"clientVersion": "1.0.9883",
+	"clientVersion": "1.0.10040",
 	"codename": "nighthike",
 	"main": "./built/index.js",
 	"private": true,
@@ -27,7 +27,7 @@
 		"@koa/cors": "2.2.2",
 		"@prezzemolo/rap": "0.1.2",
 		"@prezzemolo/zip": "0.0.3",
-		"@types/bcryptjs": "2.4.1",
+		"@types/bcryptjs": "2.4.2",
 		"@types/dateformat": "1.0.1",
 		"@types/debug": "0.0.30",
 		"@types/deep-equal": "1.0.1",
@@ -51,7 +51,7 @@
 		"@types/koa-logger": "3.1.0",
 		"@types/koa-mount": "3.0.1",
 		"@types/koa-multer": "1.0.0",
-		"@types/koa-router": "7.0.31",
+		"@types/koa-router": "7.0.32",
 		"@types/koa-send": "4.1.1",
 		"@types/koa-views": "2.0.3",
 		"@types/koa__cors": "2.2.3",
@@ -60,7 +60,7 @@
 		"@types/mocha": "5.2.3",
 		"@types/mongodb": "3.1.7",
 		"@types/ms": "0.7.30",
-		"@types/node": "10.10.1",
+		"@types/node": "10.10.3",
 		"@types/portscanner": "2.1.0",
 		"@types/pug": "2.0.4",
 		"@types/qrcode": "1.2.0",
@@ -75,9 +75,10 @@
 		"@types/single-line-log": "1.1.0",
 		"@types/speakeasy": "2.0.2",
 		"@types/systeminformation": "3.23.0",
 		"@types/tinycolor2": "1.4.1",
 		"@types/tmp": "0.0.33",
 		"@types/uuid": "3.4.4",
-		"@types/webpack": "4.4.11",
+		"@types/webpack": "4.4.12",
 		"@types/webpack-stream": "3.2.10",
 		"@types/websocket": "0.0.40",
 		"@types/ws": "6.0.1",
@@ -194,6 +195,7 @@
 		"systeminformation": "3.45.6",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
 		"tinycolor2": "1.4.1",
 		"tmp": "0.0.33",
 		"ts-loader": "4.4.1",
 		"ts-node": "7.0.1",
@@ -206,22 +208,24 @@
 		"v-animate-css": "0.0.2",
 		"vue": "2.5.17",
 		"vue-chartjs": "3.4.0",
 		"vue-color": "2.6.0",
 		"vue-cropperjs": "2.2.2",
 		"vue-js-modal": "1.3.26",
 		"vue-json-tree-view": "2.1.4",
 		"vue-loader": "15.4.2",
 		"vue-router": "3.0.1",
 		"vue-style-loader": "4.1.2",
 		"vue-svg-inline-loader": "1.1.3",
 		"vue-template-compiler": "2.5.17",
 		"vuedraggable": "2.16.0",
 		"vuewordcloud": "18.7.11",
 		"vuex": "3.0.1",
 		"vuex-persistedstate": "2.5.4",
-		"web-push": "3.3.2",
+		"web-push": "3.3.3",
 		"webfinger.js": "2.6.6",
-		"webpack": "4.19.0",
+		"webpack": "4.19.1",
 		"webpack-cli": "3.1.0",
-		"websocket": "1.0.26",
+		"websocket": "1.0.28",
 		"ws": "6.0.0",
 		"xev": "2.0.1"
 	},
--- a/src/client/app/app.styl
+++ b/src/client/app/app.styl
@@ -27,7 +27,7 @@ body
 	z-index 65536
 	.bar
-		background $theme-color
+		background var(--primary)
 		position fixed
 		z-index 65537
@@ -44,7 +44,7 @@ body
 		right 0px
 		width 100px
 		height 100%
-		box-shadow 0 0 10px $theme-color, 0 0 5px $theme-color
+		box-shadow 0 0 10px var(--primary), 0 0 5px var(--primary)
 		opacity 1
 		transform rotate(3deg) translate(0px, -4px)
@@ -64,8 +64,8 @@ body
 		box-sizing border-box
 		border solid 2px transparent
-		border-top-color $theme-color
+		border-top-color var(--primary)
-		border-left-color $theme-color
+		border-left-color var(--primary)
 		border-radius 50%
 		animation progress-spinner 400ms linear infinite
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -1,3 +1,35 @@
 <template>
-<router-view id="app"></router-view>
+<router-view id="app" v-hotkey.global="keymap"></router-view>
 </template>
 <script lang="ts">
 import Vue from 'vue';
 import { url, lang } from './config';
 import applyTheme from './common/scripts/theme';
 const darkTheme = require('../theme/dark');
 const halloweenTheme = require('../theme/halloween');
 export default Vue.extend({
 	computed: {
 		keymap(): any {
 			return {
 				'h|slash': this.help,
 				'd': this.dark
 			};
 		}
 	},
 	methods: {
 		help() {
 			window.open(`${url}/docs/${lang}/keyboard-shortcut`, '_blank');
 		},
 		dark() {
 			this.$store.commit('device/set', {
 				key: 'darkmode',
 				value: !this.$store.state.device.darkmode
 			});
 		}
 	}
 });
 </script>
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -20,6 +20,16 @@
 	const langs = LANGS;
 	//#region Apply theme
 	const theme = localStorage.getItem('theme');
 	if (theme) {
 		Object.entries(JSON.parse(theme)).forEach(([k, v]) => {
 			if (k == 'meta') return;
 			document.documentElement.style.setProperty(`--${k}`, v.toString());
 		});
 	}
 	//#endregion
 	//#region Load settings
 	let settings = null;
 	const vuex = localStorage.getItem('vuex');
@@ -84,13 +94,6 @@
 		app = isMobile ? 'mobile' : 'desktop';
 	}
 	// Dark/Light
 	if (settings) {
 		if (settings.device.darkmode) {
 			document.documentElement.setAttribute('data-darkmode', 'true');
 		}
 	}
 	// Script version
 	const ver = localStorage.getItem('v') || VERSION;
--- a/src/client/app/common/hotkey.ts
+++ b/src/client/app/common/hotkey.ts
@@ -22,7 +22,10 @@ const getKeyMap = keymap => Object.entries(keymap).map(([patterns, callback]): a
 	result.patterns = patterns.split('|').map(part => {
 		const pattern = {
-			which: []
+			which: [],
 			ctrl: false,
 			alt: false,
 			shift: false
 		} as pattern;
 		part.trim().split('+').forEach(key => {
@@ -56,7 +59,7 @@ export default {
 				el.dataset.reservedKeys = reservedKeys.map(key => `'${key}'`).join(' ');
-				el._keyHandler = e => {
+				el._keyHandler = (e: KeyboardEvent) => {
 					const key = e.code.toLowerCase();
 					const targetReservedKeys = document.activeElement ? ((document.activeElement as any).dataset || {}).reservedKeys || '' : '';
@@ -66,10 +69,11 @@ export default {
 						if (el._hotkey_global && targetReservedKeys.includes(`'${key}'`)) break;
 						const matched = action.patterns.some(pattern => {
-							let matched = pattern.which.includes(key);
+							const matched = pattern.which.includes(key) &&
-							if (pattern.ctrl && !e.ctrlKey) matched = false;
+								pattern.ctrl == e.ctrlKey &&
-							if (pattern.shift && !e.shiftKey) matched = false;
+								pattern.shift == e.shiftKey &&
-							if (pattern.alt && !e.altKey) matched = false;
+								pattern.alt == e.altKey &&
 								e.metaKey == false;
 							if (matched) {
 								e.preventDefault();
--- a/src/client/app/common/scripts/fuck-ad-block.ts
+++ b/src/client/app/common/scripts/fuck-ad-block.ts
@@ -1,8 +1,8 @@
 require('fuckadblock');
 declare const fuckAdBlock: any;
 export default (os) => {
 	require('fuckadblock');
 	function adBlockDetected() {
 		os.apis.dialog({
 			title: '%fa:exclamation-triangle%%i18n:common.adblock.detected%',
--- a/src/client/app/common/scripts/streaming/home.ts
+++ b/src/client/app/common/scripts/streaming/home.ts
@@ -50,6 +50,30 @@ export class HomeStream extends Stream {
 			});
 		});
 		this.on('unreadMention', () => {
 			os.store.dispatch('mergeMe', {
 				hasUnreadMentions: true
 			});
 		});
 		this.on('readAllUnreadMentions', () => {
 			os.store.dispatch('mergeMe', {
 				hasUnreadMentions: false
 			});
 		});
 		this.on('unreadSpecifiedNote', () => {
 			os.store.dispatch('mergeMe', {
 				hasUnreadSpecifiedNotes: true
 			});
 		});
 		this.on('readAllUnreadSpecifiedNotes', () => {
 			os.store.dispatch('mergeMe', {
 				hasUnreadSpecifiedNotes: false
 			});
 		});
 		this.on('clientSettingUpdated', x => {
 			os.store.commit('settings/set', {
 				key: x.key,
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -259,15 +259,13 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-autocomplete
 root(isDark)
 	position fixed
 	z-index 65535
 	max-width 100%
 	margin-top calc(1em + 8px)
 	overflow hidden
-	background isDark ? #313543 : #fff
+	background var(--faceHeader)
 	border solid 1px rgba(#000, 0.1)
 	border-radius 4px
 	transition top 0.1s ease, left 0.1s ease
@@ -299,16 +297,16 @@ root(isDark)
 				text-overflow ellipsis
 			&:hover
-				background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1)
+				background var(--autocompleteItemHoverBg)
 			&[data-selected='true']
-				background $theme-color
+				background var(--primary)
 				&, *
 					color #fff !important
 			&:active
-				background darken($theme-color, 10%)
+				background var(--primaryDarken10)
 				&, *
 					color #fff !important
@@ -325,15 +323,15 @@ root(isDark)
 		.name
 			margin 0 8px 0 0
-			color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
+			color var(--autocompleteItemText)
 		.username
-			color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3)
+			color var(--autocompleteItemTextSub)
 	> .hashtags > li
 		.name
-			color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
+			color var(--autocompleteItemText)
 	> .emojis > li
@@ -343,15 +341,9 @@ root(isDark)
 			width 24px
 		.name
-			color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
+			color var(--autocompleteItemText)
 		.alias
 			margin 0 0 0 8px
-			color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3)
+			color var(--autocompleteItemTextSub)
 .mk-autocomplete[data-darkmode]
 	root(true)
 .mk-autocomplete:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -58,6 +58,11 @@ export default Vue.extend({
 			};
 		}
 	},
 	mounted() {
 		if (this.user.avatarColor) {
 			this.$el.style.color = `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`;
 		}
 	},
 	methods: {
 		onClick(e) {
 			this.$emit('click', e);
@@ -67,8 +72,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-
+.mk-avatar
 root(isDark)
 	display inline-block
 	vertical-align bottom
@@ -79,7 +83,7 @@ root(isDark)
 	&.cat::before,
 	&.cat::after
 		background #df548f
-		border solid 4px isDark ? #e0eefd : #202224
+		border solid 4px currentColor
 		box-sizing border-box
 		content ''
 		display inline-block
@@ -105,9 +109,4 @@ root(isDark)
 		transition border-radius 1s ease
 		z-index 1
 .mk-avatar[data-darkmode]
 	root(true)
 .mk-avatar:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/connect-failed.vue
+++ b/src/client/app/common/views/components/connect-failed.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 .mk-connect-failed
 	width 100%
@@ -70,17 +70,17 @@ export default Vue.extend({
 		display block
 		margin 1em auto 0 auto
 		padding 8px 10px
-		color $theme-color-foreground
+		color var(--primaryForeground)
-		background $theme-color
+		background var(--primary)
 		&:focus
-			outline solid 3px rgba($theme-color, 0.3)
+			outline solid 3px var(--primaryAlpha03)
 		&:hover
-			background lighten($theme-color, 10%)
+			background var(--primaryLighten10)
 		&:active
-			background darken($theme-color, 10%)
+			background var(--primaryDarken10)
 	> .thanks
 		display block
--- a/src/client/app/common/views/components/cw-button.vue
+++ b/src/client/app/common/views/components/cw-button.vue
@@ -22,23 +22,17 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.nrvgflfuaxwgkxoynpnumyookecqrrvh
 	display inline-block
 	padding 4px 8px
 	font-size 0.7em
-	color isDark ? #393f4f : #fff
+	color var(--cwButtonFg)
-	background isDark ? #687390 : #b1b9c1
+	background var(--cwButtonBg)
 	border-radius 2px
 	cursor pointer
 	user-select none
 	&:hover
-		background isDark ? #707b97 : #bbc4ce
+		background var(--cwButtonHoverBg)
 .nrvgflfuaxwgkxoynpnumyookecqrrvh[data-darkmode]
 	root(true)
 .nrvgflfuaxwgkxoynpnumyookecqrrvh:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/forkit.vue
+++ b/src/client/app/common/views/components/forkit.vue
@@ -9,7 +9,7 @@
 </template>
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 .a
 	display block
@@ -18,8 +18,8 @@
 		display block
 		//fill #151513
 		//color #fff
-		fill $theme-color
+		fill var(--primary)
-		color $theme-color-foreground
+		color var(--primaryForeground)
 		.octo-arm
 			transform-origin 130px 106px
--- a/src/client/app/common/views/components/games/reversi/reversi.game.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue
@@ -304,9 +304,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.xqnhankfuuilcwvhgsopeqncafzsquya
 root(isDark)
 	text-align center
 	> .go-index
@@ -319,7 +317,7 @@ root(isDark)
 	> header
 		padding 8px
-		border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4
+		border-bottom dashed 1px var(--reversiGameHeaderLine)
 		a
 			color inherit
@@ -386,30 +384,30 @@ root(isDark)
 						user-select none
 					&.empty
-						border solid 2px isDark ? #51595f : #eee
+						border solid 2px var(--reversiGameEmptyCell)
 					&.empty.can
-						background isDark ? #51595f : #eee
+						background var(--reversiGameEmptyCell)
 					&.empty.myTurn
-						border-color isDark ? #6a767f : #ddd
+						border-color var(--reversiGameEmptyCellMyTurn)
 						&.can
-							background isDark ? #51595f : #eee
+							background var(--reversiGameEmptyCellCanPut)
 							cursor pointer
 							&:hover
-								border-color darken($theme-color, 10%)
+								border-color var(--primaryDarken10)
-								background $theme-color
+								background var(--primary)
 							&:active
-								background darken($theme-color, 10%)
+								background var(--primaryDarken10)
 					&.prev
-						box-shadow 0 0 0 4px rgba($theme-color, 0.7)
+						box-shadow 0 0 0 4px var(--primaryAlpha07)
 					&.isEnded
-						border-color isDark ? #6a767f : #ddd
+						border-color var(--reversiGameEmptyCellMyTurn)
 					&.none
 						border-color transparent !important
@@ -458,10 +456,4 @@ root(isDark)
 			margin 0 8px
 			min-width 70px
 .xqnhankfuuilcwvhgsopeqncafzsquya[data-darkmode]
 	root(true)
 .xqnhankfuuilcwvhgsopeqncafzsquya:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/games/reversi/reversi.index.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue
@@ -138,9 +138,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx
 root(isDark)
 	> h1
 		margin 0
 		padding 24px
@@ -148,7 +146,7 @@ root(isDark)
 		text-align center
 		font-weight normal
 		color #fff
-		background linear-gradient(to bottom, isDark ? #45730e : #8bca3e, isDark ? #464300 : #d6cf31)
+		background linear-gradient(to bottom, var(--reversiBannerGradientStart), var(--reversiBannerGradientEnd))
 		& + p
 			margin 0
@@ -156,7 +154,7 @@ root(isDark)
 			margin-bottom 12px
 			text-align center
 			font-size 14px
-			border-bottom solid 1px isDark ? #535f65 : #d3d9dc
+			border-bottom solid 1px var(--faceDivider)
 	> .play
 		margin 0 auto
@@ -171,14 +169,14 @@ root(isDark)
 				padding 16px
 				font-size 14px
 				text-align left
-				background isDark ? #282c37 : #f5f5f5
+				background var(--reversiDescBg)
 				border-radius 8px
 	> section
 		margin 0 auto
 		padding 0 16px 16px 16px
 		max-width 500px
-		border-top solid 1px isDark ? #535f65 : #d3d9dc
+		border-top solid 1px var(--faceDivider)
 		> h2
 			margin 0
@@ -189,9 +187,9 @@ root(isDark)
 	.invitation
 		margin 8px 0
 		padding 8px
-		color isDark ? #fff : #677f84
+		color var(--text)
-		background isDark ? #282c37 : #fff
+		background var(--face)
-		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
+		box-shadow 0 2px 16px var(--reversiListItemShadow)
 		border-radius 6px
 		cursor pointer
@@ -200,13 +198,13 @@ root(isDark)
 			user-select none
 		&:focus
-			border-color $theme-color
+			border-color var(--primary)
 		&:hover
-			background isDark ? #313543 : #f5f5f5
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 		&:active
-			background isDark ? #1e222b : #eee
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 		> .avatar
 			width 32px
@@ -221,9 +219,9 @@ root(isDark)
 		display block
 		margin 8px 0
 		padding 8px
-		color isDark ? #fff : #677f84
+		color var(--text)
-		background isDark ? #282c37 : #fff
+		background var(--face)
-		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
+		box-shadow 0 2px 16px var(--reversiListItemShadow)
 		border-radius 6px
 		cursor pointer
@@ -232,10 +230,10 @@ root(isDark)
 			user-select none
 		&:hover
-			background isDark ? #313543 : #f5f5f5
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 		&:active
-			background isDark ? #1e222b : #eee
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 		> .avatar
 			width 32px
@@ -246,10 +244,4 @@ root(isDark)
 			margin 0 8px
 			line-height 32px
 .phgnkghfpyvkrvwiajkiuoxyrdaqpzcx[data-darkmode]
 	root(true)
 .phgnkghfpyvkrvwiajkiuoxyrdaqpzcx:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -47,9 +47,9 @@
 			</header>
 			<div>
-				<mk-switch v-model="game.settings.isLlotheo" @change="updateSettings" text="%i18n:@is-llotheo%"/>
+				<ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">%i18n:@is-llotheo%</ui-switch>
-				<mk-switch v-model="game.settings.loopedBoard" @change="updateSettings" text="%i18n:@looped-map%"/>
+				<ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">%i18n:@looped-map%</ui-switch>
-				<mk-switch v-model="game.settings.canPutEverywhere" @change="updateSettings" text="%i18n:@can-put-everywhere%"/>
+				<ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">%i18n:@can-put-everywhere%</ui-switch>
 			</div>
 		</div>
@@ -60,7 +60,7 @@
 			<div>
 				<template v-for="item in form">
-					<mk-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</mk-switch>
+					<ui-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</ui-switch>
 					<div class="card" v-if="item.type == 'radio'" :key="item.id">
 						<header>
@@ -252,11 +252,9 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.urbixznjwwuukfsckrwzwsqzsxornqij
 root(isDark)
 	text-align center
-	background isDark ? #191b22 : #f9f9f9
+	background var(--bg)
 	> header
 		padding 8px
@@ -273,10 +271,10 @@ root(isDark)
 					> select
 						width 100%
 						padding 12px 14px
-						background isDark ? #282C37 : #fff
+						background var(--face)
-						border 1px solid isDark ? #6a707d : #dcdfe6
+						border 1px solid var(--reversiMapSelectBorder)
 						border-radius 4px
-						color isDark ? #fff : #606266
+						color var(--text)
 						cursor pointer
 						transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
 						-webkit-appearance none
@@ -284,17 +282,18 @@ root(isDark)
 						appearance none
 						&:hover
-							border-color isDark ? #a7aebd : #c0c4cc
+							border-color var(--reversiMapSelectHoverBorder)
 						&:focus
 						&:active
-							border-color $theme-color
+							border-color var(--primary)
 				> div
 					> .random
 						padding 32px 0
 						font-size 64px
-						color isDark ? #4e5961 : #d8d8d8
+						color var(--text)
 						opacity 0.7
 					> .board
 						display grid
@@ -302,11 +301,11 @@ root(isDark)
 						width 300px
 						height 300px
 						margin 0 auto
-						color isDark ? #fff : #444
+						color var(--text)
 						> div
 							background transparent
-							border solid 2px isDark ? #6a767f : #ddd
+							border solid 2px var(--faceDivider)
 							border-radius 6px
 							overflow hidden
 							cursor pointer
@@ -331,32 +330,26 @@ root(isDark)
 		.card
 			max-width 400px
 			border-radius 4px
-			background isDark ? #282C37 : #fff
+			background var(--face)
-			color isDark ? #fff : #303133
+			color var(--text)
-			box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1)
+			box-shadow 0 2px 12px 0 var(--reversiRoomFormShadow)
 			> header
 				padding 18px 20px
-				border-bottom 1px solid isDark ? #1c2023 : #ebeef5
+				border-bottom 1px solid var(--faceDivider)
 			> div
 				padding 20px
-				color isDark ? #fff : #606266
+				color var(--text)
 	> footer
 		position sticky
 		bottom 0
 		padding 16px
-		background rgba(isDark ? #191b22 : #fff, 0.9)
+		background var(--reversiRoomFooterBg)
-		border-top solid 1px isDark ? #606266 : #c4cdd4
+		border-top solid 1px var(--faceDivider)
 		> .status
 			margin 0 0 16px 0
 .urbixznjwwuukfsckrwzwsqzsxornqij[data-darkmode]
 	root(true)
 .urbixznjwwuukfsckrwzwsqzsxornqij:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/games/reversi/reversi.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.vue
@@ -156,11 +156,9 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.vchtoekanapleubgzioubdtmlkribzfd
-
+	color var(--text)
-root(isDark)
+	background var(--bg)
 	color isDark ? #fff : #677f84
 	background isDark ? #191b22 : #fff
 	> .matching
 		> h1
@@ -177,10 +175,4 @@ root(isDark)
 			text-align center
 			border-top dashed 1px #c4cdd4
 .vchtoekanapleubgzioubdtmlkribzfd[data-darkmode]
 	root(true)
 .vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/google.vue
+++ b/src/client/app/common/views/components/google.vue
@@ -26,7 +26,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.mk-google
 	display flex
 	margin 8px 0
@@ -37,31 +37,25 @@ root(isDark)
 		height 40px
 		font-family sans-serif
 		font-size 16px
-		color isDark ? #dee4e8 : #55595c
+		color var(--googleSearchFg)
-		background isDark ? #191b22 : #fff
+		background var(--googleSearchBg)
-		border solid 1px isDark ? #495156 : #dadada
+		border solid 1px var(--googleSearchBorder)
 		border-radius 4px 0 0 4px
 		&:hover
-			border-color isDark ? #777c86 : #b0b0b0
+			border-color var(--googleSearchHoverBorder)
 	> button
 		flex-shrink 0
 		padding 0 16px
-		border solid 1px isDark ? #495156 : #dadada
+		border solid 1px var(--googleSearchBorder)
 		border-left none
 		border-radius 0 4px 4px 0
 		&:hover
-			background-color isDark ? #2e3440 : #eee
+			background-color var(--googleSearchHoverButton)
 		&:active
 			box-shadow 0 2px 4px rgba(#000, 0.15) inset
 .mk-google[data-darkmode]
 	root(true)
 .mk-google:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -1,5 +1,7 @@
 import Vue from 'vue';
 import theme from './theme.vue';
 import instance from './instance.vue';
 import cwButton from './cw-button.vue';
 import tagCloud from './tag-cloud.vue';
 import trends from './trends.vue';
@@ -29,7 +31,6 @@ import messagingRoom from './messaging-room.vue';
 import urlPreview from './url-preview.vue';
 import twitterSetting from './twitter-setting.vue';
 import fileTypeIcon from './file-type-icon.vue';
 import Switch from './switch.vue';
 import Reversi from './games/reversi/reversi.vue';
 import welcomeTimeline from './welcome-timeline.vue';
 import uiInput from './ui/input.vue';
@@ -43,6 +44,8 @@ import uiSelect from './ui/select.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 Vue.component('mk-theme', theme);
 Vue.component('mk-instance', instance);
 Vue.component('mk-cw-button', cwButton);
 Vue.component('mk-tag-cloud', tagCloud);
 Vue.component('mk-trends', trends);
@@ -72,7 +75,6 @@ Vue.component('mk-messaging-room', messagingRoom);
 Vue.component('mk-url-preview', urlPreview);
 Vue.component('mk-twitter-setting', twitterSetting);
 Vue.component('mk-file-type-icon', fileTypeIcon);
 Vue.component('mk-switch', Switch);
 Vue.component('mk-reversi', Reversi);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
 Vue.component('ui-input', uiInput);
--- a/src/client/app/common/views/components/instance.vue
+++ b/src/client/app/common/views/components/instance.vue
@@ -0,0 +1,51 @@
 <template>
 <div class="nhasjydimbopojusarffqjyktglcuxjy" v-if="meta">
 	<div class="banner" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }"></div>
 	<h1>{{ meta.name }}</h1>
 	<p v-html="meta.description || '%i18n:common.about%'"></p>
 	<router-link to="/">%i18n:@start%</router-link>
 </div>
 </template>
 <script lang="ts">
 import Vue from 'vue';
 export default Vue.extend({
 	data() {
 		return {
 			meta: null
 		}
 	},
 	created() {
 		(this as any).os.getMeta().then(meta => {
 			this.meta = meta;
 		});
 	}
 });
 </script>
 <style lang="stylus" scoped>
 .nhasjydimbopojusarffqjyktglcuxjy
 	color var(--text)
 	background var(--face)
 	text-align center
 	> .banner
 		height 100px
 		background-position center
 		background-size cover
 	> h1
 		margin 16px
 		font-size 16px
 	> p
 		margin 16px
 		font-size 14px
 	> a
 		display block
 		padding-bottom 16px
 </style>
--- a/src/client/app/common/views/components/media-banner.vue
+++ b/src/client/app/common/views/components/media-banner.vue
@@ -43,7 +43,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.mk-media-banner
 	width 100%
 	border-radius 4px
 	margin-top 4px
@@ -71,7 +71,7 @@ root(isDark)
 			font-size 1.6em
 	> .download
-		background isDark ? #21242d : #f7f7f7
+		background var(--noteAttachedFile)
 	> .sensitive
 		background #111
@@ -82,9 +82,4 @@ root(isDark)
 			display block
 			width 100%
 .mk-media-banner[data-darkmode]
 	root(true)
 .mk-media-banner:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/menu.vue
+++ b/src/client/app/common/views/components/menu.vue
@@ -2,9 +2,9 @@
 <div class="onchrpzrvnoruiaenfcqvccjfuupzzwv">
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ hukidasi }" ref="popover">
-		<template v-for="item in items">
+		<template v-for="item, i in items">
 			<div v-if="item === null"></div>
-			<button v-if="item" @click="clicked(item.action)" v-html="item.icon ? item.icon + ' ' + item.text : item.text"></button>
+			<button v-if="item" @click="clicked(item.action)" v-html="item.icon ? item.icon + ' ' + item.text : item.text" :tabindex="i"></button>
 		</template>
 	</div>
 </div>
@@ -117,10 +117,8 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.onchrpzrvnoruiaenfcqvccjfuupzzwv
-
+	$bg-color = var(--popupBg)
 root(isDark)
 	$bg-color = isDark ? #2c303c : #fff
 	$border-color = rgba(27, 31, 35, 0.15)
 	position initial
@@ -132,7 +130,7 @@ root(isDark)
 		z-index 10000
 		width 100%
 		height 100%
-		background rgba(#000, isDark ? 0.5 : 0.1)
+		background var(--modalBackdrop)
 		opacity 0
 	> .popover
@@ -179,26 +177,20 @@ root(isDark)
 			display block
 			padding 8px 16px
 			width 100%
-			color isDark ? #d6dce2 : #111
+			color var(--popupFg)
 			&:hover
-				color $theme-color-foreground
+				color var(--primaryForeground)
-				background $theme-color
+				background var(--primary)
 				text-decoration none
 			&:active
-				color $theme-color-foreground
+				color var(--primaryForeground)
-				background darken($theme-color, 10%)
+				background var(--primaryDarken10)
 		> div
 			margin 8px 0
 			height 1px
-			background isDark ? #1c2023 : #eee
+			background var(--faceDivider)
 .onchrpzrvnoruiaenfcqvccjfuupzzwv[data-darkmode]
 	root(true)
 .onchrpzrvnoruiaenfcqvccjfuupzzwv:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/messaging-room.form.vue
+++ b/src/client/app/common/views/components/messaging-room.form.vue
@@ -195,9 +195,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-messaging-form
 root(isDark)
 	> textarea
 		cursor auto
 		display block
@@ -209,10 +207,10 @@ root(isDark)
 		padding 8px
 		resize none
 		font-size 1em
-		color isDark ? #fff : #000
+		color var(--inputText)
 		outline none
 		border none
-		border-top solid 1px isDark ? #4b5056 : #eee
+		border-top solid 1px var(--faceDivider)
 		border-radius 0
 		box-shadow none
 		background transparent
@@ -234,10 +232,10 @@ root(isDark)
 		transition color 0.1s ease
 		&:hover
-			color $theme-color
+			color var(--primary)
 		&:active
-			color darken($theme-color, 10%)
+			color var(--primaryDarken10)
 			transition color 0s ease
 	.files
@@ -293,19 +291,13 @@ root(isDark)
 		transition color 0.1s ease
 		&:hover
-			color $theme-color
+			color var(--primary)
 		&:active
-			color darken($theme-color, 10%)
+			color var(--primaryDarken10)
 			transition color 0s ease
 	input[type=file]
 		display none
 .mk-messaging-form[data-darkmode]
 	root(true)
 .mk-messaging-form:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -59,10 +59,8 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.message
-
+	$me-balloon-color = var(--primary)
 root(isDark)
 	$me-balloon-color = $theme-color
 	padding 10px 12px 10px 12px
 	background-color transparent
@@ -179,7 +177,7 @@ root(isDark)
 			display block
 			margin 2px 0 0 0
 			font-size 10px
-			color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4)
+			color var(--messagingRoomMessageInfo)
 			> [data-fa]
 				margin-left 4px
@@ -192,7 +190,7 @@ root(isDark)
 			padding-left 66px
 			> .balloon
-				$color = isDark ? #2d3338 : #eee
+				$color = var(--messagingRoomMessageBg)
 				float left
 				background $color
@@ -208,8 +206,7 @@ root(isDark)
 				> .content
 					> .text
-						if isDark
+							color var(--messagingRoomMessageFg)
 							color #fff
 			> footer
 				text-align left
@@ -250,18 +247,9 @@ root(isDark)
 				> .read
 					user-select none
 					margin 0 4px 0 0
 					color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5)
 					font-size 11px
 	&[data-is-deleted]
 		> .balloon
 			opacity 0.5
 .message[data-darkmode]
 	root(true)
 .message:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -262,14 +262,12 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-messaging-room
 root(isDark)
 	display flex
 	flex 1
 	flex-direction column
 	height 100%
-	background isDark ? #191b22 : #fff
+	background var(--messagingRoomBg)
 	> .body
 		width 100%
@@ -277,24 +275,15 @@ root(isDark)
 		margin 0 auto
 		flex 1
-		> .init
+		> .init,
 			width 100%
 			margin 0
 			padding 16px 8px 8px 8px
 			text-align center
 			font-size 0.8em
 			color rgba(isDark ? #fff : #000, 0.4)
 			[data-fa]
 				margin-right 4px
 		> .empty
 			width 100%
 			margin 0
 			padding 16px 8px 8px 8px
 			text-align center
 			font-size 0.8em
-			color rgba(isDark ? #fff : #000, 0.4)
+			color var(--messagingRoomInfo)
 			opacity 0.5
 			[data-fa]
 				margin-right 4px
@@ -305,7 +294,8 @@ root(isDark)
 			padding 16px
 			text-align center
 			font-size 0.8em
-			color rgba(isDark ? #fff : #000, 0.4)
+			color var(--messagingRoomInfo)
 			opacity 0.5
 			[data-fa]
 				margin-right 4px
@@ -349,7 +339,7 @@ root(isDark)
 				left 0
 				right 0
 				margin 0 auto
-				background rgba(isDark ? #fff : #000, 0.1)
+				background var(--messagingRoomDateDividerLine)
 			> span
 				display inline-block
@@ -357,8 +347,8 @@ root(isDark)
 				padding 0 16px
 				//font-weight bold
 				line-height 32px
-				color rgba(isDark ? #fff : #000, 0.3)
+				color var(--messagingRoomDateDividerText)
-				background isDark ? #191b22 : #fff
+				background var(--messagingRoomBg)
 	> footer
 		position -webkit-sticky
@@ -369,7 +359,7 @@ root(isDark)
 		max-width 600px
 		margin 0 auto
 		padding 0
-		background rgba(isDark ? #282c37 : #fff, 0.95)
+		//background rgba(var(--face), 0.95)
 		background-clip content-box
 		> .new-message
@@ -386,15 +376,15 @@ root(isDark)
 				cursor pointer
 				line-height 32px
 				font-size 12px
-				color $theme-color-foreground
+				color var(--primaryForeground)
-				background $theme-color
+				background var(--primary)
 				border-radius 16px
 				&:hover
-					background lighten($theme-color, 10%)
+					background var(--primaryLighten10)
 				&:active
-					background darken($theme-color, 10%)
+					background var(--primaryDarken10)
 				> [data-fa]
 					position absolute
@@ -410,10 +400,4 @@ root(isDark)
 	transition opacity 0.5s
 	opacity 0
 .mk-messaging-room[data-darkmode]
 	root(true)
 .mk-messaging-room:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -167,9 +167,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-messaging
 root(isDark)
 	&[data-compact]
 		font-size 0.8em
@@ -204,12 +202,10 @@ root(isDark)
 		left 0
 		z-index 1
 		width 100%
 		background #fff
 		box-shadow 0 0px 2px rgba(#000, 0.2)
 		> .form
-			padding 8px
+			background rgba(0, 0, 0, 0.02)
 			background isDark ? #282c37 : #f7f7f7
 			> label
 				display block
@@ -229,32 +225,22 @@ root(isDark)
 					bottom 0
 					left 0
 					width 1em
-					line-height 56px
+					line-height 48px
 					margin auto
 					color #555
 			> input
 				margin 0
-				padding 0 0 0 32px
+				padding 0 0 0 42px
 				width 100%
 				font-size 1em
-				line-height 38px
+				line-height 48px
-				color #000
+				color var(--faceText)
 				outline none
-				background isDark ? #191b22 : #fff
+				background transparent
-				border solid 1px isDark ? #495156 : #eee
+				border none
 				border-radius 5px
 				box-shadow none
 				transition color 0.5s ease, border 0.5s ease
 				&:hover
 					border solid 1px isDark ? #b0b0b0 : #ddd
 					transition border 0.2s ease
 				&:focus
 					color darken($theme-color, 20%)
 					border solid 1px $theme-color
 					transition color 0, border 0
 		> .result
 			display block
@@ -287,7 +273,7 @@ root(isDark)
 					&:hover
 					&:focus
 						color #fff
-						background $theme-color
+						background var(--primary)
 						.name
 							color #fff
@@ -297,7 +283,7 @@ root(isDark)
 					&:active
 						color #fff
-						background darken($theme-color, 10%)
+						background var(--primaryDarken10)
 						.name
 							color #fff
@@ -329,21 +315,21 @@ root(isDark)
 		> a
 			display block
 			text-decoration none
-			background isDark ? #282c37 : #fff
+			background var(--face)
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 			*
 				pointer-events none
 				user-select none
 			&:hover
-				background isDark ? #1e2129 : #fafafa
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
-				> .avatar
+				.avatar
 					filter saturate(200%)
 			&:active
-				background isDark ? #14161b : #eee
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 			&[data-is-read]
 			&[data-is-me]
@@ -383,17 +369,17 @@ root(isDark)
 						overflow hidden
 						text-overflow ellipsis
 						font-size 1em
-						color isDark ? #fff : rgba(#000, 0.9)
+						color var(--noteHeaderName)
 						font-weight bold
 						transition all 0.1s ease
 					> .username
 						margin 0 8px
-						color isDark ? #606984 : rgba(#000, 0.5)
+						color var(--noteHeaderAcct)
 					> .mk-time
 						margin 0 0 0 auto
-						color isDark ? #606984 : rgba(#000, 0.5)
+						color var(--noteHeaderInfo)
 						font-size 80%
 				> .avatar
@@ -413,10 +399,10 @@ root(isDark)
 						overflow hidden
 						overflow-wrap break-word
 						font-size 1.1em
-						color isDark ? #fff : rgba(#000, 0.8)
+						color var(--faceText)
 						.me
-							color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4)
+							opacity 0.7
 					> .image
 						display block
@@ -461,10 +447,4 @@ root(isDark)
 					> .avatar
 						margin 0 12px 0 0
 .mk-messaging[data-darkmode]
 	root(true)
 .mk-messaging:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/nav.vue
+++ b/src/client/app/common/views/components/nav.vue
@@ -2,6 +2,8 @@
 <span class="mk-nav">
 	<a :href="aboutUrl">%i18n:@about%</a>
 	<i>・</i>
 	<a href="/stats">%i18n:@stats%</a>
 	<i>・</i>
 	<a :href="repositoryUrl">%i18n:@repository%</a>
 	<i>・</i>
 	<a :href="feedbackUrl" target="_blank">%i18n:@feedback%</a>
--- a/src/client/app/common/views/components/note-header.vue
+++ b/src/client/app/common/views/components/note-header.vue
@@ -42,9 +42,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.bvonvjxbwzaiskogyhbwgyxvcgserpmu
 root(isDark)
 	display flex
 	align-items baseline
 	white-space nowrap
@@ -61,7 +59,7 @@ root(isDark)
 		margin 0 .5em 0 0
 		padding 0
 		overflow hidden
-		color isDark ? #fff : #627079
+		color var(--noteHeaderName)
 		font-size 1em
 		font-weight bold
 		text-decoration none
@@ -82,19 +80,19 @@ root(isDark)
 		margin 0 .5em 0 0
 		padding 1px 6px
 		font-size 80%
-		color isDark ? #758188 : #aaa
+		color var(--noteHeaderBadgeFg)
-		border solid 1px isDark ? #57616f : #ddd
+		background var(--noteHeaderBadgeBg)
 		border-radius 3px
 		&.is-admin
-			border-color isDark ? #d42c41 : #f56a7b
+			background var(--noteHeaderAdminBg)
-			color isDark ? #d42c41 : #f56a7b
+			color var(--noteHeaderAdminFg)
 	> .username
 		margin 0 .5em 0 0
 		overflow hidden
 		text-overflow ellipsis
-		color isDark ? #606984 : #ccc
+		color var(--noteHeaderAcct)
 		flex-shrink 2147483647
 	> .info
@@ -102,7 +100,7 @@ root(isDark)
 		font-size 0.9em
 		> *
-			color isDark ? #606984 : #c0c0c0
+			color var(--noteHeaderInfo)
 		> .mobile
 			margin-right 8px
@@ -110,15 +108,9 @@ root(isDark)
 		> .app
 			margin-right 8px
 			padding-right 8px
-			border-right solid 1px isDark ? #1c2023 : #eaeaea
+			border-right solid 1px var(--faceDivider)
 		> .visibility
 			margin-left 8px
 .bvonvjxbwzaiskogyhbwgyxvcgserpmu[data-darkmode]
 	root(true)
 .bvonvjxbwzaiskogyhbwgyxvcgserpmu:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/note-menu.vue
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -28,17 +28,29 @@ export default Vue.extend({
 			}];
 			if (this.note.userId == this.$store.state.i.id) {
-				items.push({
+				if ((this.$store.state.i.pinnedNoteIds || []).includes(this.note.id)) {
-					icon: '%fa:thumbtack%',
+					items.push({
-					text: '%i18n:@pin%',
+						icon: '%fa:thumbtack%',
-					action: this.pin
+						text: '%i18n:@unpin%',
-				});
+						action: this.unpin
 					});
 				} else {
 					items.push({
 						icon: '%fa:thumbtack%',
 						text: '%i18n:@pin%',
 						action: this.pin
 					});
 				}
 			}
 			if (this.note.userId == this.$store.state.i.id || this.$store.state.i.isAdmin) {
 				items.push({
 					icon: '%fa:trash-alt R%',
 					text: '%i18n:@delete%',
 					action: this.del
 				});
 			}
 			if (this.note.uri) {
 				items.push({
 					icon: '%fa:external-link-square-alt%',
@@ -48,9 +60,11 @@ export default Vue.extend({
 					}
 				});
 			}
 			return items;
 		}
 	},
 	methods: {
 		detail() {
 			this.$router.push(`/notes/${ this.note.id }`);
@@ -68,6 +82,14 @@ export default Vue.extend({
 			});
 		},
 		unpin() {
 			(this as any).api('i/unpin', {
 				noteId: this.note.id
 			}).then(() => {
 				this.destroyDom();
 			});
 		},
 		del() {
 			if (!window.confirm('%i18n:@delete-confirm%')) return;
 			(this as any).api('notes/delete', {
--- a/src/client/app/common/views/components/poll-editor.vue
+++ b/src/client/app/common/views/components/poll-editor.vue
@@ -68,9 +68,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-poll-editor
 root(isDark)
 	padding 8px
 	> .caution
@@ -103,49 +101,43 @@ root(isDark)
 				padding 6px 8px
 				width 300px
 				font-size 14px
-				color isDark ? #fff : #000
+				color var(--inputText)
-				background isDark ? #191b22 : #fff
+				background var(--pollEditorInputBg)
-				border solid 1px rgba($theme-color, 0.1)
+				border solid 1px var(--primaryAlpha01)
 				border-radius 4px
 				&:hover
-					border-color rgba($theme-color, 0.2)
+					border-color var(--primaryAlpha02)
 				&:focus
-					border-color rgba($theme-color, 0.5)
+					border-color var(--primaryAlpha05)
 			> button
 				padding 4px 8px
-				color rgba($theme-color, 0.4)
+				color var(--primaryAlpha04)
 				&:hover
-					color rgba($theme-color, 0.6)
+					color var(--primaryAlpha06)
 				&:active
-					color darken($theme-color, 30%)
+					color var(--primaryDarken30)
 	> .add
 		margin 8px 0 0 0
 		vertical-align top
-		color $theme-color
+		color var(--primary)
 	> .destroy
 		position absolute
 		top 0
 		right 0
 		padding 4px 8px
-		color rgba($theme-color, 0.4)
+		color var(--primaryAlpha04)
 		&:hover
-			color rgba($theme-color, 0.6)
+			color var(--primaryAlpha06)
 		&:active
-			color darken($theme-color, 30%)
+			color var(--primaryDarken30)
 .mk-poll-editor[data-darkmode]
 	root(true)
 .mk-poll-editor:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/poll.vue
+++ b/src/client/app/common/views/components/poll.vue
@@ -67,10 +67,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-poll
 root(isDark)
 	> ul
 		display block
 		margin 0
@@ -82,8 +79,8 @@ root(isDark)
 			margin 4px 0
 			padding 4px 8px
 			width 100%
-			color isDark ? #fff : #000
+			color var(--pollChoiceText)
-			border solid 1px isDark ? #5e636f : #eee
+			border solid 1px var(--pollChoiceBorder)
 			border-radius 4px
 			overflow hidden
 			cursor pointer
@@ -99,7 +96,7 @@ root(isDark)
 				top 0
 				left 0
 				height 100%
-				background $theme-color
+				background var(--primary)
 				transition width 1s ease
 			> span
@@ -110,7 +107,7 @@ root(isDark)
 					margin-left 4px
 	> p
-		color isDark ? #a3aebf : #000
+		color var(--text)
 		a
 			color inherit
@@ -125,10 +122,4 @@ root(isDark)
 			&:active
 				background transparent
 .mk-poll[data-darkmode]
 	root(true)
 .mk-poll:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -77,10 +77,10 @@ export default Vue.extend({
 			return {
 				'esc': this.close,
 				'enter|space|plus': this.choose,
-				'up': this.focusUp,
+				'up|k': this.focusUp,
-				'right': this.focusRight,
+				'left|h|shift+tab': this.focusLeft,
-				'down': this.focusDown,
+				'right|l|tab': this.focusRight,
-				'left': this.focusLeft,
+				'down|j': this.focusDown,
 				'1': () => this.react('like'),
 				'2': () => this.react('love'),
 				'3': () => this.react('laugh'),
@@ -97,10 +97,10 @@ export default Vue.extend({
 	watch: {
 		focus(i) {
-			this.$refs.buttons.childNodes[i].focus();
+			this.$refs.buttons.children[i].focus();
 			if (this.showFocus) {
-				this.title = this.$refs.buttons.childNodes[i].title;
+				this.title = this.$refs.buttons.children[i].title;
 			}
 		}
 	},
@@ -210,11 +210,9 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
@import '~const.styl'
 $border-color = rgba(27, 31, 35, 0.15)
-root(isDark)
+.mk-reaction-picker
 	position initial
 	> .backdrop
@@ -224,11 +222,11 @@ root(isDark)
 		z-index 10000
 		width 100%
 		height 100%
-		background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
+		background var(--modalBackdrop)
 		opacity 0
 	> .popover
-		$bgcolor = isDark ? #2c303c : #fff
+		$bgcolor = var(--popupBg)
 		position absolute
 		z-index 10001
 		background $bgcolor
@@ -281,8 +279,8 @@ root(isDark)
 			margin 0
 			padding 8px 10px
 			font-size 14px
-			color isDark ? #d6dce2 : #586069
+			color var(--popupFg)
-			border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
+			border-bottom solid 1px var(--faceDivider)
 		> div
 			padding 4px
@@ -301,7 +299,7 @@ root(isDark)
 						right 0
 						bottom 0
 						left 0
-						border 2px solid rgba($theme-color, 0.3)
+						border 2px solid var(--primaryAlpha03)
 						border-radius 4px
 			> button
@@ -312,16 +310,10 @@ root(isDark)
 				border-radius 2px
 				&:hover
-					background isDark ? #252731 : #eee
+					background var(--reactionPickerButtonHoverBg)
 				&:active
-					background $theme-color
+					background var(--primary)
 					box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
 .mk-reaction-picker[data-darkmode]
 	root(true)
 .mk-reaction-picker:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/reactions-viewer.vue
+++ b/src/client/app/common/views/components/reactions-viewer.vue
@@ -39,10 +39,9 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.mk-reactions-viewer
-	$borderColor = isDark ? #5e6673 : #eee
+	border-top dashed 1px var(--reactionViewerBorder)
-	border-top dashed 1px $borderColor
+	border-bottom dashed 1px var(--reactionViewerBorder)
 	border-bottom dashed 1px $borderColor
 	margin 4px 0
 	&:empty
@@ -60,12 +59,6 @@ root(isDark)
 		> span
 			margin-left 4px
 			font-size 1.2em
-			color isDark ? #d1d5dc : #444
+			color var(--text)
 .mk-reactions-viewer[data-darkmode]
 	root(true)
 .mk-reactions-viewer:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -68,7 +68,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 .mk-signin
 	color #555
--- a/src/client/app/common/views/components/signup.vue
+++ b/src/client/app/common/views/components/signup.vue
@@ -151,7 +151,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 .mk-signup
 	min-width 302px
--- a/src/client/app/common/views/components/switch.vue
+++ b/src/client/app/common/views/components/switch.vue
@@ -1,199 +0,0 @@
 <template>
 <div
 	class="mk-switch"
 	:class="{ disabled, checked }"
 	role="switch"
 	:aria-checked="checked"
 	:aria-disabled="disabled"
 	@click="switchValue"
 	@mouseover="mouseenter"
 >
 	<input
 		type="checkbox"
 		@change="handleChange"
 		ref="input"
 		:disabled="disabled"
 		@keydown.enter="switchValue"
 	>
 	<span class="button">
 		<span :style="{ transform }"></span>
 	</span>
 	<span class="label">
 		<span :aria-hidden="!checked">{{ text }}</span>
 		<p :aria-hidden="!checked">
 			<slot></slot>
 		</p>
 	</span>
 </div>
 </template>
 <script lang="ts">
 import Vue from 'vue';
 export default Vue.extend({
 	props: {
 		value: {
 			type: Boolean,
 			default: false
 		},
 		disabled: {
 			type: Boolean,
 			default: false
 		},
 		text: String
 	},/*
 	created() {
 		if (!~[true, false].indexOf(this.value)) {
 			this.$emit('input', false);
 		}
 	},*/
 	computed: {
 		checked(): boolean {
 			return this.value;
 		},
 		transform(): string {
 			return this.checked ? 'translate3d(20px, 0, 0)' : '';
 		}
 	},
 	watch: {
 		value() {
 			(this.$el).style.transition = 'all 0.3s';
 			(this.$refs.input as any).checked = this.checked;
 		}
 	},
 	mounted() {
 		(this.$refs.input as any).checked = this.checked;
 	},
 	methods: {
 		mouseenter() {
 			(this.$el).style.transition = 'all 0s';
 		},
 		handleChange() {
 			(this.$el).style.transition = 'all 0.3s';
 			this.$emit('input', !this.checked);
 			this.$emit('change', !this.checked);
 			this.$nextTick(() => {
 				// set input's checked property
 				// in case parent refuses to change component's value
 				(this.$refs.input as any).checked = this.checked;
 			});
 		},
 		switchValue() {
 			!this.disabled && this.handleChange();
 		}
 	}
 });
 </script>
 <style lang="stylus" scoped>
@import '~const.styl'
 root(isDark)
 	display flex
 	margin 12px 0
 	cursor pointer
 	transition all 0.3s
 	> *
 		user-select none
 	&.disabled
 		opacity 0.6
 		cursor not-allowed
 	&.checked
 		> .button
 			background-color $theme-color
 			border-color $theme-color
 		> .label
 			> span
 				color $theme-color
 		&:hover
 			> .label
 				> span
 					color darken($theme-color, 10%)
 			> .button
 				background darken($theme-color, 10%)
 				border-color darken($theme-color, 10%)
 	&:hover
 		> .label
 			> span
 				color isDark ? #fff : #2e3338
 		> .button
 			$color = isDark ? #15181d : #ced2da
 			background $color
 			border-color $color
 	> input
 		position absolute
 		width 0
 		height 0
 		opacity 0
 		margin 0
 		&:focus + .button
 			&:after
 				content ""
 				pointer-events none
 				position absolute
 				top -5px
 				right -5px
 				bottom -5px
 				left -5px
 				border 2px solid rgba($theme-color, 0.3)
 				border-radius 14px
 	> .button
 		$color = isDark ? #1c1f25 : #dcdfe6
 		display inline-block
 		margin 0
 		width 40px
 		min-width 40px
 		height 20px
 		min-height 20px
 		background $color
 		border 1px solid $color
 		outline none
 		border-radius 10px
 		transition inherit
 		> *
 			position absolute
 			top 1px
 			left 1px
 			border-radius 100%
 			transition transform 0.3s
 			width 16px
 			height 16px
 			background-color #fff
 	> .label
 		margin-left 8px
 		display block
 		font-size 15px
 		cursor pointer
 		transition inherit
 		> span
 			display block
 			line-height 20px
 			color isDark ? #c4ccd2 : #4a535a
 			transition inherit
 		> p
 			margin 0
 			//font-size 90%
 			color isDark ? #78858e : #9daab3
 .mk-switch[data-darkmode]
 	root(true)
 .mk-switch:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/tag-cloud.vue
+++ b/src/client/app/common/views/components/tag-cloud.vue
@@ -63,7 +63,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.jtivnzhfwquxpsfidertopbmwmchmnmo
 	height 100%
 	width 100%
@@ -81,10 +81,4 @@ root(isDark)
 		height 100%
 		width 100%
 .jtivnzhfwquxpsfidertopbmwmchmnmo[data-darkmode]
 	root(true)
 .jtivnzhfwquxpsfidertopbmwmchmnmo:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -0,0 +1,179 @@
 <template>
 <div class="nicnklzforebnpfgasiypmpdaaglujqm">
 	<label>
 		<span>%i18n:@light-theme%</span>
 		<ui-select v-model="light" placeholder="%i18n:@light-theme%">
 			<option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
 		</ui-select>
 	</label>
 	<label>
 		<span>%i18n:@dark-theme%</span>
 		<ui-select v-model="dark" placeholder="%i18n:@dark-theme%">
 			<option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
 		</ui-select>
 	</label>
 	<details class="creator">
 		<summary>%i18n:@create-a-theme%</summary>
 		<div>
 			<span>%i18n:@base-theme%:</span>
 			<ui-radio v-model="myThemeBase" value="light">%i18n:@base-theme-light%</ui-radio>
 			<ui-radio v-model="myThemeBase" value="dark">%i18n:@base-theme-dark%</ui-radio>
 		</div>
 		<div>
 			<ui-input v-model="myThemeName">
 				<span>%i18n:@theme-name%</span>
 			</ui-input>
 		</div>
 		<div>
 			<div style="padding-bottom:8px;">%i18n:@primary-color%:</div>
 			<color-picker v-model="myThemePrimary"/>
 		</div>
 		<div>
 			<div style="padding-bottom:8px;">%i18n:@secondary-color%:</div>
 			<color-picker v-model="myThemeSecondary"/>
 		</div>
 		<div>
 			<div style="padding-bottom:8px;">%i18n:@text-color%:</div>
 			<color-picker v-model="myThemeText"/>
 		</div>
 		<ui-button @click="preview()">%i18n:@preview-created-theme%</ui-button>
 		<ui-button primary @click="gen()">%i18n:@save-created-theme%</ui-button>
 	</details>
 	<details>
 		<summary>%i18n:@install-a-theme%</summary>
 		<ui-textarea v-model="installThemeCode">
 			<span>%i18n:@theme-code%</span>
 		</ui-textarea>
 		<ui-button @click="install()">%i18n:@install%</ui-button>
 	</details>
 	<details>
 		<summary>%i18n:@installed-themes%</summary>
 		<ui-select v-model="selectedInstalledTheme" placeholder="%i18n:@select-theme%">
 			<option v-for="x in installedThemes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
 		</ui-select>
 		<ui-textarea readonly :value="selectedInstalledThemeCode">
 			<span>%i18n:@theme-code%</span>
 		</ui-textarea>
 	</details>
 </div>
 </template>
 <script lang="ts">
 import Vue from 'vue';
 import { apiUrl, docsUrl } from '../../../config';
 import { lightTheme, darkTheme, builtinThemes, applyTheme } from '../../../theme';
 import { Chrome } from 'vue-color';
 import * as uuid from 'uuid';
 import * as tinycolor from 'tinycolor2';
 export default Vue.extend({
 	components: {
 		ColorPicker: Chrome
 	},
 	data() {
 		return {
 			installThemeCode: null,
 			selectedInstalledTheme: null,
 			myThemeBase: 'light',
 			myThemeName: '',
 			myThemePrimary: lightTheme.meta.vars.primary,
 			myThemeSecondary: lightTheme.meta.vars.secondary,
 			myThemeText: lightTheme.meta.vars.text
 		};
 	},
 	computed: {
 		themes(): any {
 			return this.$store.state.device.themes.concat(builtinThemes);
 		},
 		installedThemes(): any {
 			return this.$store.state.device.themes;
 		},
 		light: {
 			get() { return this.$store.state.device.lightTheme; },
 			set(value) { this.$store.commit('device/set', { key: 'lightTheme', value }); }
 		},
 		dark: {
 			get() { return this.$store.state.device.darkTheme; },
 			set(value) { this.$store.commit('device/set', { key: 'darkTheme', value }); }
 		},
 		selectedInstalledThemeCode() {
 			if (this.selectedInstalledTheme == null) return null;
 			return JSON.stringify(this.installedThemes.find(x => x.meta.id == this.selectedInstalledTheme));
 		},
 		myTheme(): any {
 			return {
 				meta: {
 					name: this.myThemeName,
 					author: this.$store.state.i.name,
 					base: this.myThemeBase,
 					vars: {
 						primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(),
 						secondary: tinycolor(typeof this.myThemeSecondary == 'string' ? this.myThemeSecondary : this.myThemeSecondary.rgba).toRgbString(),
 						text: tinycolor(typeof this.myThemeText == 'string' ? this.myThemeText : this.myThemeText.rgba).toRgbString()
 					}
 				}
 			};
 		}
 	},
 	watch: {
 		myThemeBase(v) {
 			const theme = v == 'light' ? lightTheme : darkTheme;
 			this.myThemePrimary = theme.meta.vars.primary;
 			this.myThemeSecondary = theme.meta.vars.secondary;
 			this.myThemeText = theme.meta.vars.text;
 		}
 	},
 	methods: {
 		install() {
 			const theme = JSON.parse(this.installThemeCode);
 			if (theme.meta == null || theme.meta.id == null) {
 				alert('%i18n:@invalid-theme%');
 				return;
 			}
 			if (this.$store.state.device.themes.some(t => t.meta.id == theme.meta.id)) {
 				alert('%i18n:@already-installed%');
 				return;
 			}
 			const themes = this.$store.state.device.themes.concat(theme);
 			this.$store.commit('device/set', {
 				key: 'themes', value: themes
 			});
 		},
 		preview() {
 			applyTheme(this.myTheme, false);
 		},
 		gen() {
 			const theme = this.myTheme;
 			theme.meta.id = uuid();
 			const themes = this.$store.state.device.themes.concat(theme);
 			this.$store.commit('device/set', {
 				key: 'themes', value: themes
 			});
 			alert('%i18n:@saved%');
 		}
 	}
 });
 </script>
 <style lang="stylus" scoped>
 .nicnklzforebnpfgasiypmpdaaglujqm
 	> .creator
 		> div
 			padding 16px 0
 			border-bottom solid 1px var(--faceDivider)
 </style>
--- a/src/client/app/common/views/components/trends.vue
+++ b/src/client/app/common/views/components/trends.vue
@@ -49,13 +49,14 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.csqvmxybqbycalfhkxvyfrgbrdalkaoc
 	> .fetching
 	> .empty
 		margin 0
 		padding 16px
 		text-align center
-		color #aaa
+		color var(--text)
 		opacity 0.7
 		> [data-fa]
 			margin-right 4px
@@ -70,13 +71,13 @@ root(isDark)
 			padding 14px 16px
 			&:not(:last-child)
-				border-bottom solid 1px isDark ? #393f4f : #eee
+				border-bottom solid 1px var(--faceDivider)
 			> .tag
 				flex 1
 				overflow hidden
 				font-size 14px
-				color isDark ? #9baec8 : #65727b
+				color var(--text)
 				> a
 					display block
@@ -94,10 +95,4 @@ root(isDark)
 			> .chart
 				height 30px
 .csqvmxybqbycalfhkxvyfrgbrdalkaoc[data-darkmode]
 	root(true)
 .csqvmxybqbycalfhkxvyfrgbrdalkaoc:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -1,9 +1,7 @@
 <template>
-<div class="ui-button" :class="[styl]">
+<button class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
-	<button :type="type" @click="$emit('click')">
+	<slot></slot>
-		<slot></slot>
+</button>
 	</button>
 </div>
 </template>
 <script lang="ts">
@@ -13,70 +11,90 @@ export default Vue.extend({
 		type: {
 			type: String,
 			required: false
 		},
 		primary: {
 			type: Boolean,
 			required: false,
 			default: false
 		},
 		inline: {
 			type: Boolean,
 			required: false,
 			default: false
 		}
 	},
 	data() {
 		return {
 			styl: 'fill'
 		};
 	},
 	inject: {
 		isCardChild: { default: false }
 	},
 	created() {
 		if (this.isCardChild) {
 			this.styl = 'line';
 		}
 	}
 });
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.dmtdnykelhudezerjlfpbhgovrgnqqgr
 	display block
 	width 100%
 	min-height 40px
 	margin 0
 	padding 0
 	font-weight normal
 	font-size 16px
 	border none
 	border-radius 6px
 	outline none
 	box-shadow none
-root(isDark, fill)
+	&:focus
-	> button
+		&:after
-		display block
+			content ""
-		width 100%
+			pointer-events none
-		margin 0
+			position absolute
-		padding 0
+			top -5px
 			right -5px
 			bottom -5px
 			left -5px
 			border 2px solid var(--primaryAlpha03)
 			border-radius 10px
 	&:not(.inline) + .dmtdnykelhudezerjlfpbhgovrgnqqgr
 		margin-top 16px
 	&.inline
 		display inline-block
 		width auto
 	&.primary
 		font-weight bold
 		font-size 16px
 		line-height 44px
 		border none
 		border-radius 6px
 		outline none
 		box-shadow none
-		if fill
+	&.fill
-			color $theme-color-foreground
+		color var(--text)
-			background $theme-color
+		background var(--buttonBg)
 		&:hover
 			background var(--buttonHoverBg)
 		&:active
 			background var(--buttonActiveBg)
 		&.primary
 			color var(--primaryForeground)
 			background var(--primary)
 			&:hover
-				background lighten($theme-color, 5%)
+				background var(--primaryLighten5)
 			&:active
-				background darken($theme-color, 5%)
+				background var(--primaryDarken5)
 		else
 			color $theme-color
 			background none
 			&:hover
 				color darken($theme-color, 5%)
 			&:active
 				background rgba($theme-color, 0.3)
 .ui-button[data-darkmode]
 	&.fill
 		root(true, true)
 	&:not(.fill)
-		root(true, false)
+		color var(--primary)
 		background none
-.ui-button:not([data-darkmode])
+		&:hover
-	&.fill
+			color var(--primaryDarken5)
-		root(false, true)
+
-	&:not(.fill)
+		&:active
-		root(false, false)
+			background var(--primaryAlpha03)
 </style>
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -20,26 +20,24 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.ui-card
 root(isDark)
 	margin 16px
-	color isDark ? #fff : #000
+	color var(--faceText)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 	> header
 		padding 16px
 		font-weight bold
 		font-size 20px
-		color isDark ? #fff : #444
+		color var(--faceText)
 		@media (min-width 500px)
 			padding 24px 32px
 	> section
 		padding 20px 16px
-		border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
+		border-top solid 1px var(--faceDivider)
 		@media (min-width 500px)
 			padding 32px
@@ -50,12 +48,5 @@ root(isDark)
 		> header
 			margin-bottom 16px
 			font-weight bold
-			color isDark ? #fff : #444
+			color var(--faceText)
 .ui-card[data-darkmode]
 	root(true)
 .ui-card:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/ui/form.vue
+++ b/src/client/app/common/views/components/ui/form.vue
@@ -19,7 +19,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 .ui-form
 	> fieldset
--- a/src/client/app/common/views/components/ui/form/button.vue
+++ b/src/client/app/common/views/components/ui/form/button.vue
@@ -25,9 +25,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
 root(isDark)
 	display inline-block
 	& + .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
@@ -38,11 +36,11 @@ root(isDark)
 		margin 0
 		padding 12px 20px
 		font-size 14px
-		border 1px solid isDark ? #6d727d : #dcdfe6
+		border 1px solid var(--formButtonBorder)
 		border-radius 4px
 		outline none
 		box-shadow none
-		color isDark ? #fff : #606266
+		color var(--text)
 		transition 0.1s
 		*
@@ -50,40 +48,34 @@ root(isDark)
 		&:hover
 		&:focus
-			color $theme-color
+			color var(--primary)
-			background rgba($theme-color, isDark ? 0.2 : 0.12)
+			background var(--formButtonHoverBg)
-			border-color rgba($theme-color, isDark ? 0.5 : 0.3)
+			border-color var(--formButtonHoverBorder)
 		&:active
-			color darken($theme-color, 20%)
+			color var(--primaryDarken20)
-			background rgba($theme-color, 0.12)
+			background var(--formButtonActiveBg)
-			border-color $theme-color
+			border-color var(--primary)
 			transition all 0s
 	&.primary
 		> button
-			border 1px solid $theme-color
+			border 1px solid var(--primary)
-			background $theme-color
+			background var(--primary)
-			color $theme-color-foreground
+			color var(--primaryForeground)
 			&:hover
 			&:focus
-				background lighten($theme-color, 20%)
+				background var(--primaryLighten20)
-				border-color lighten($theme-color, 20%)
+				border-color var(--primaryLighten20)
 			&:active
-				background darken($theme-color, 20%)
+				background var(--primaryDarken20)
-				border-color darken($theme-color, 20%)
+				border-color var(--primaryDarken20)
 				transition all 0s
 	&.round
 		> button
 			border-radius 64px
 .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg[data-darkmode]
 	root(true)
 .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/ui/form/radio.vue
+++ b/src/client/app/common/views/components/ui/form/radio.vue
@@ -49,9 +49,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.uywduthvrdnlpsvsjkqigicixgyfctto
 root(isDark)
 	display inline-flex
 	margin 0 16px 0 0
 	cursor pointer
@@ -62,7 +60,7 @@ root(isDark)
 	&:hover
 		> .button
-			border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			border solid 2px var(--inputLabel)
 	&.disabled
 		opacity 0.6
@@ -70,15 +68,15 @@ root(isDark)
 	&.checked
 		> .button
-			border-color $theme-color
+			border-color var(--primary)
 			&:after
-				background-color $theme-color
+				background-color var(--primary)
 				transform scale(1)
 				opacity 1
 		> .label
-			color $theme-color
+			color var(--primary)
 	> input
 		position absolute
@@ -93,7 +91,7 @@ root(isDark)
 		width 20px
 		height 20px
 		background none
-		border solid 2px isDark ? rgba(#fff, 0.6) : rgba(#000, 0.4)
+		border solid 2px var(--radioBorder)
 		border-radius 100%
 		transition inherit
@@ -117,10 +115,4 @@ root(isDark)
 		line-height 20px
 		cursor pointer
 .uywduthvrdnlpsvsjkqigicixgyfctto[data-darkmode]
 	root(true)
 .uywduthvrdnlpsvsjkqigicixgyfctto:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -155,9 +155,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+root(fill)
 root(isDark, fill)
 	margin 32px 0
 	> .icon
@@ -167,7 +165,7 @@ root(isDark, fill)
 		width 24px
 		text-align center
 		line-height 32px
-		color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+		color var(--inputLabel)
 		&:not(:empty) + .input
 			margin-left 28px
@@ -183,7 +181,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 1px
-				background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+				background var(--inputBorder)
 			&:after
 				content ''
@@ -193,7 +191,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 2px
-				background $theme-color
+				background var(--primary)
 				opacity 0
 				transform scaleX(0.12)
 				transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@@ -242,7 +240,7 @@ root(isDark, fill)
 			transition-duration 0.3s
 			font-size 16px
 			line-height 32px
-			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none
 			//will-change transform
 			transform-origin top left
@@ -257,7 +255,7 @@ root(isDark, fill)
 			font-weight fill ? bold : normal
 			font-size 16px
 			line-height 32px
-			color isDark ? #fff : #000
+			color var(--inputText)
 			background transparent
 			border none
 			border-radius 0
@@ -280,7 +278,7 @@ root(isDark, fill)
 			top 0
 			font-size 16px
 			line-height fill ? 44px : 32px
-			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none
 			&:empty
@@ -325,7 +323,7 @@ root(isDark, fill)
 					transform scaleX(1)
 			> .label
-				color $theme-color
+				color var(--primary)
 	&.focused
 	&.filled
@@ -335,16 +333,10 @@ root(isDark, fill)
 				left 0 !important
 				transform scale(0.75)
-.ui-input[data-darkmode]
+.ui-input
 	&.fill
-		root(true, true)
+		root(true)
 	&:not(.fill)
-		root(true, false)
+		root(false)
 .ui-input:not([data-darkmode])
 	&.fill
 		root(false, true)
 	&:not(.fill)
 		root(false, false)
 </style>
--- a/src/client/app/common/views/components/ui/radio.vue
+++ b/src/client/app/common/views/components/ui/radio.vue
@@ -51,9 +51,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.ui-radio
 root(isDark)
 	display inline-block
 	margin 0 32px 0 0
 	cursor pointer
@@ -68,10 +66,10 @@ root(isDark)
 	&.checked
 		> .button
-			border-color $theme-color
+			border-color var(--primary)
 			&:after
-				background-color $theme-color
+				background-color var(--primary)
 				transform scale(1)
 				opacity 1
@@ -87,7 +85,7 @@ root(isDark)
 		width 20px
 		height 20px
 		background none
-		border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+		border solid 2px var(--inputLabel)
 		border-radius 100%
 		transition inherit
@@ -111,10 +109,4 @@ root(isDark)
 		line-height 20px
 		cursor pointer
 .ui-radio[data-darkmode]
 	root(true)
 .ui-radio:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/ui/select.vue
+++ b/src/client/app/common/views/components/ui/select.vue
@@ -70,9 +70,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+root(fill)
 root(isDark, fill)
 	margin 32px 0
 	> .icon
@@ -103,7 +101,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 1px
-				background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+				background var(--inputBorder)
 			&:after
 				content ''
@@ -113,7 +111,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 2px
-				background $theme-color
+				background var(--primary)
 				opacity 0
 				transform scaleX(0.12)
 				transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@@ -143,7 +141,7 @@ root(isDark, fill)
 			font-weight fill ? bold : normal
 			font-size 16px
 			height 32px
-			color isDark ? #fff : #000
+			color var(--inputText)
 			background transparent
 			border none
 			border-radius 0
@@ -190,7 +188,7 @@ root(isDark, fill)
 					transform scaleX(1)
 			> .label
-				color $theme-color
+				color var(--primary)
 	&.focused
 	&.filled
@@ -200,16 +198,10 @@ root(isDark, fill)
 				left 0 !important
 				transform scale(0.75)
-.ui-select[data-darkmode]
+.ui-select
 	&.fill
-		root(true, true)
+		root(true)
 	&:not(.fill)
-		root(true, false)
+		root(false)
 .ui-select:not([data-darkmode])
 	&.fill
 		root(false, true)
 	&:not(.fill)
 		root(false, false)
 </style>
--- a/src/client/app/common/views/components/ui/switch.vue
+++ b/src/client/app/common/views/components/ui/switch.vue
@@ -19,7 +19,7 @@
 	<span class="label">
 		<span :aria-hidden="!checked"><slot></slot></span>
 		<p :aria-hidden="!checked">
-			<slot name="text"></slot>
+			<slot name="desc"></slot>
 		</p>
 	</span>
 </div>
@@ -56,9 +56,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.ui-switch
 root(isDark)
 	display flex
 	margin 32px 0
 	cursor pointer
@@ -79,11 +77,11 @@ root(isDark)
 	&.checked
 		> .button
-			background-color rgba($theme-color, 0.4)
+			background-color var(--primaryAlpha04)
-			border-color rgba($theme-color, 0.4)
+			border-color var(--primaryAlpha04)
 			> *
-				background-color $theme-color
+				background-color var(--primary)
 				transform translateX(14px)
 	> input
@@ -99,7 +97,7 @@ root(isDark)
 		margin 3px 0 0 0
 		width 34px
 		height 14px
-		background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25)
+		background var(--switchTrack)
 		outline none
 		border-radius 14px
 		transition inherit
@@ -125,18 +123,11 @@ root(isDark)
 		> span
 			display block
 			line-height 20px
-			color isDark ? #c4ccd2 : rgba(#000, 0.75)
+			color currentColor
 			transition inherit
 		> p
 			margin 0
-			//font-size 90%
+			opacity 0.7
 			color isDark ? #78858e : #9daab3
 .ui-switch[data-darkmode]
 	root(true)
 .ui-switch:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/ui/textarea.vue
+++ b/src/client/app/common/views/components/ui/textarea.vue
@@ -63,9 +63,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+root(fill)
 root(isDark, fill)
 	margin 42px 0 32px 0
 	> .input
@@ -84,7 +82,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				background none
-				border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+				border solid 1px var(--inputBorder)
 				border-radius 3px
 				pointer-events none
@@ -97,7 +95,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				background none
-				border solid 2px $theme-color
+				border solid 2px var(--primary)
 				border-radius 3px
 				opacity 0
 				transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@@ -112,7 +110,7 @@ root(isDark, fill)
 			transition-duration 0.3s
 			font-size 16px
 			line-height 32px
-			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none
 			//will-change transform
 			transform-origin top left
@@ -126,7 +124,7 @@ root(isDark, fill)
 			font inherit
 			font-weight fill ? bold : normal
 			font-size 16px
-			color isDark ? #fff : #000
+			color var(--inputText)
 			background transparent
 			border none
 			border-radius 0
@@ -149,7 +147,7 @@ root(isDark, fill)
 					opacity 1
 			> .label
-				color $theme-color
+				color var(--primary)
 	&.focused
 	&.filled
@@ -159,16 +157,10 @@ root(isDark, fill)
 				left 0 !important
 				transform scale(0.75)
-.ui-textarea[data-darkmode]
+.ui-textarea.fill
-	&.fill
+	root(true)
 		root(true, true)
 	&:not(.fill)
 		root(true, false)
-.ui-textarea:not([data-darkmode])
+.ui-textarea:not(.fill)
-	&.fill
+	root(false)
 		root(false, true)
 	&:not(.fill)
 		root(false, false)
 </style>
--- a/src/client/app/common/views/components/uploader.vue
+++ b/src/client/app/common/views/components/uploader.vue
@@ -81,7 +81,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 .mk-uploader
 	overflow auto
@@ -100,7 +100,7 @@ export default Vue.extend({
 			margin 8px 0 0 0
 			padding 0
 			height 36px
-			box-shadow 0 -1px 0 rgba($theme-color, 0.1)
+			box-shadow 0 -1px 0 var(--primaryAlpha01)
 			border-top solid 8px transparent
 			&:first-child
@@ -127,7 +127,7 @@ export default Vue.extend({
 				padding 0
 				max-width 256px
 				font-size 0.8em
-				color rgba($theme-color, 0.7)
+				color var(--primaryAlpha07)
 				white-space nowrap
 				text-overflow ellipsis
 				overflow hidden
@@ -145,17 +145,17 @@ export default Vue.extend({
 				font-size 0.8em
 				> .initing
-					color rgba($theme-color, 0.5)
+					color var(--primaryAlpha05)
 				> .kb
-					color rgba($theme-color, 0.5)
+					color var(--primaryAlpha05)
 				> .percentage
 					display inline-block
 					width 48px
 					text-align right
-					color rgba($theme-color, 0.7)
+					color var(--primaryAlpha07)
 					&:after
 						content '%'
@@ -174,10 +174,10 @@ export default Vue.extend({
 				overflow hidden
 				&::-webkit-progress-value
-					background $theme-color
+					background var(--primary)
 				&::-webkit-progress-bar
-					background rgba($theme-color, 0.1)
+					background var(--primaryAlpha01)
 			> .progress
 				display block
@@ -191,13 +191,13 @@ export default Vue.extend({
 				border-radius 4px
 				background linear-gradient(
 					45deg,
-					lighten($theme-color, 30%) 25%,
+					var(--primaryLighten30) 25%,
-					$theme-color               25%,
+					var(--primary)               25%,
-					$theme-color               50%,
+					var(--primary)               50%,
-					lighten($theme-color, 30%) 50%,
+					var(--primaryLighten30) 50%,
-					lighten($theme-color, 30%) 75%,
+					var(--primaryLighten30) 75%,
-					$theme-color               75%,
+					var(--primary)               75%,
-					$theme-color
+					var(--primary)
 				)
 				background-size 32px 32px
 				animation bg 1.5s linear infinite
--- a/src/client/app/common/views/components/url-preview.vue
+++ b/src/client/app/common/views/components/url-preview.vue
@@ -200,17 +200,17 @@ export default Vue.extend({
 		top 0
 		width 100%
-root(isDark)
+.mk-url-preview
 	> a
 		display block
 		font-size 14px
-		border solid 1px isDark ? #191b1f : #eee
+		border solid 1px var(--urlPreviewBorder)
 		border-radius 4px
 		overflow hidden
 		&:hover
 			text-decoration none
-			border-color isDark ? #4f5561 : #ddd
+			border-color var(--urlPreviewBorderHover)
 			> article > header > h1
 				text-decoration underline
@@ -235,11 +235,11 @@ root(isDark)
 				> h1
 					margin 0
 					font-size 1em
-					color isDark ? #d6dae0 : #555
+					color var(--urlPreviewTitle)
 			> p
 				margin 0
-				color isDark ? #a4aab3 : #777
+				color var(--urlPreviewText)
 				font-size 0.8em
 			> footer
@@ -256,7 +256,7 @@ root(isDark)
 				> p
 					display inline-block
 					margin 0
-					color isDark ? #b0b4bf : #666
+					color var(--urlPreviewInfo)
 					font-size 0.8em
 					line-height 16px
 					vertical-align top
@@ -322,10 +322,4 @@ root(isDark)
 						width 12px
 						height 12px
 .mk-url-preview[data-darkmode]
 	root(true)
 .mk-url-preview:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/visibility-chooser.vue
+++ b/src/client/app/common/views/components/visibility-chooser.vue
@@ -127,11 +127,9 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
@import '~const.styl'
 $border-color = rgba(27, 31, 35, 0.15)
-root(isDark)
+.mk-visibility-chooser
 	position initial
 	> .backdrop
@@ -141,11 +139,11 @@ root(isDark)
 		z-index 10000
 		width 100%
 		height 100%
-		background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
+		background var(--modalBackdrop)
 		opacity 0
 	> .popover
-		$bgcolor = isDark ? #2c303c : #fff
+		$bgcolor = var(--popupBg)
 		position absolute
 		z-index 10001
 		width 240px
@@ -189,18 +187,18 @@ root(isDark)
 			display flex
 			padding 8px 14px
 			font-size 12px
-			color isDark ? #fff : #666
+			color var(--popupFg)
 			cursor pointer
 			&:hover
-				background isDark ? #252731 : #eee
+				background var(--faceClearButtonHover)
 			&:active
-				background isDark ? #21242b : #ddd
+				background var(--faceClearButtonActive)
 			&.active
-				color $theme-color-foreground
+				color var(--primaryForeground)
-				background $theme-color
+				background var(--primary)
 			> *
 				user-select none
@@ -222,11 +220,4 @@ root(isDark)
 				> span:last-child:not(:first-child)
 					opacity 0.6
 .mk-visibility-chooser[data-darkmode]
 	root(true)
 .mk-visibility-chooser:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -90,8 +90,8 @@ export default Vue.extend({
 	opacity 0
 	transform translateY(-30px)
-root(isDark)
+.mk-welcome-timeline
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	> div
 		> *
@@ -101,8 +101,8 @@ root(isDark)
 			padding 16px
 			overflow-wrap break-word
 			font-size .9em
-			color isDark ? #fff : #4C4C4C
+			color var(--noteText)
-			border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
+			border-bottom 1px solid var(--faceDivider)
 			&:after
 				content ""
@@ -137,26 +137,20 @@ root(isDark)
 						overflow hidden
 						font-weight bold
 						text-overflow ellipsis
-						color isDark ? #fff : #627079
+						color var(--noteHeaderName)
 					> .username
 						margin 0 .5em 0 0
-						color isDark ? #606984 : #ccc
+						color var(--noteHeaderAcct)
 					> .info
 						margin-left auto
 						font-size 0.9em
 						> .created-at
-							color isDark ? #606984 : #c0c0c0
+							color var(--noteHeaderInfo)
 				> .text
 					text-align left
 .mk-welcome-timeline[data-darkmode]
 	root(true)
 .mk-welcome-timeline:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
+<div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching">
 	<div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${myName}`)"></div>
 	<main>
@@ -107,16 +107,14 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.syxhndwprovvuqhmyvveewmbqayniwkv
 root(isDark)
 	padding 32px
 	max-width 500px
 	margin 0 auto
 	text-align center
-	color isDark ? #9baec8 : #868c8c
+	color var(--text)
-	$bg = isDark ? #282C37 : #fff
+	$bg = var(--face)
 	@media (max-width 400px)
 		padding 16px
@@ -124,7 +122,6 @@ root(isDark)
 	> .signed-in-as
 		margin-bottom 16px
 		font-size 14px
 		color isDark ? #9baec8 : #9daab3
 	> main
 		margin-bottom 16px
@@ -173,29 +170,29 @@ root(isDark)
 		min-width 150px
 		font-size 14px
 		font-weight bold
-		color $theme-color
+		color var(--primary)
 		background transparent
 		outline none
-		border solid 1px $theme-color
+		border solid 1px var(--primary)
 		border-radius 36px
 		&:hover
-			background rgba($theme-color, 0.1)
+			background var(--primaryAlpha01)
 		&:active
-			background rgba($theme-color, 0.2)
+			background var(--primaryAlpha02)
 		&.active
-			color $theme-color-foreground
+			color var(--primaryForeground)
-			background $theme-color
+			background var(--primary)
 			&:hover
-				background lighten($theme-color, 10%)
+				background var(--primaryLighten10)
-				border-color lighten($theme-color, 10%)
+				border-color var(--primaryLighten10)
 			&:active
-				background darken($theme-color, 10%)
+				background var(--primaryDarken10)
-				border-color darken($theme-color, 10%)
+				border-color var(--primaryDarken10)
 		&.wait
 			cursor wait !important
@@ -204,10 +201,4 @@ root(isDark)
 		*
 			pointer-events none
 .syxhndwprovvuqhmyvveewmbqayniwkv[data-darkmode]
 	root(true)
 .syxhndwprovvuqhmyvveewmbqayniwkv:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/widgets/analog-clock.vue
+++ b/src/client/app/common/views/widgets/analog-clock.vue
@@ -26,16 +26,8 @@ export default define({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mkw-analog-clock
 root(isDark)
 	.mkw-analog-clock--body
 		padding 8px
 .mkw-analog-clock[data-darkmode]
 	root(true)
 .mkw-analog-clock:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/widgets/broadcast.vue
+++ b/src/client/app/common/views/widgets/broadcast.vue
@@ -1,25 +1,29 @@
 <template>
-<div class="anltbovirfeutcigvwgmgxipejaeozxi"
+<div class="anltbovirfeutcigvwgmgxipejaeozxi">
-	:data-found="announcements && announcements.length != 0"
+	<mk-widget-container :show-header="false" :naked="props.design == 1">
-	:data-melt="props.design == 1"
+		<div class="anltbovirfeutcigvwgmgxipejaeozxi-body"
-	:data-mobile="platform == 'mobile'"
+			:data-found="announcements && announcements.length != 0"
->
+			:data-melt="props.design == 1"
-	<div class="icon">
+			:data-mobile="platform == 'mobile'"
-		<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
+		>
-			<path class="tower" d="M16.04,11.24c1.79,0,3.239-1.45,3.239-3.24S17.83,4.76,16.04,4.76c-1.79,0-3.24,1.45-3.24,3.24 C12.78,9.78,14.24,11.24,16.04,11.24z M16.04,13.84c-0.82,0-1.66-0.2-2.4-0.6L7.34,29.98h2.98l1.72-2h8l1.681,2H24.7L18.42,13.24 C17.66,13.64,16.859,13.84,16.04,13.84z M16.02,14.8l2.02,7.2h-4L16.02,14.8z M12.04,25.98l2-2h4l2,2H12.04z"></path>
+			<div class="icon">
-			<path class="wave a" d="M4.66,1.04c-0.508-0.508-1.332-0.508-1.84,0c-1.86,1.92-2.8,4.44-2.8,6.94c0,2.52,0.94,5.04,2.8,6.96 c0.5,0.52,1.32,0.52,1.82,0s0.5-1.36,0-1.88C3.28,11.66,2.6,9.82,2.6,7.98S3.28,4.3,4.64,2.9C5.157,2.391,5.166,1.56,4.66,1.04z"></path>
+				<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
-			<path class="wave b" d="M9.58,12.22c0.5-0.5,0.5-1.34,0-1.84C8.94,9.72,8.62,8.86,8.62,8s0.32-1.72,0.96-2.38c0.5-0.52,0.5-1.34,0-1.84 C9.346,3.534,9.02,3.396,8.68,3.4c-0.32,0-0.66,0.12-0.9,0.38C6.64,4.94,6.08,6.48,6.08,8s0.58,3.06,1.7,4.22 C8.28,12.72,9.1,12.72,9.58,12.22z"></path>
+					<path class="tower" d="M16.04,11.24c1.79,0,3.239-1.45,3.239-3.24S17.83,4.76,16.04,4.76c-1.79,0-3.24,1.45-3.24,3.24 C12.78,9.78,14.24,11.24,16.04,11.24z M16.04,13.84c-0.82,0-1.66-0.2-2.4-0.6L7.34,29.98h2.98l1.72-2h8l1.681,2H24.7L18.42,13.24 C17.66,13.64,16.859,13.84,16.04,13.84z M16.02,14.8l2.02,7.2h-4L16.02,14.8z M12.04,25.98l2-2h4l2,2H12.04z"></path>
-			<path class="wave c" d="M22.42,3.78c-0.5,0.5-0.5,1.34,0,1.84c0.641,0.66,0.96,1.52,0.96,2.38s-0.319,1.72-0.96,2.38c-0.5,0.52-0.5,1.34,0,1.84 c0.487,0.497,1.285,0.505,1.781,0.018c0.007-0.006,0.013-0.012,0.02-0.018c1.139-1.16,1.699-2.7,1.699-4.22s-0.561-3.06-1.699-4.22 c-0.494-0.497-1.297-0.5-1.794-0.007C22.424,3.775,22.422,3.778,22.42,3.78z"></path>
+					<path class="wave a" d="M4.66,1.04c-0.508-0.508-1.332-0.508-1.84,0c-1.86,1.92-2.8,4.44-2.8,6.94c0,2.52,0.94,5.04,2.8,6.96 c0.5,0.52,1.32,0.52,1.82,0s0.5-1.36,0-1.88C3.28,11.66,2.6,9.82,2.6,7.98S3.28,4.3,4.64,2.9C5.157,2.391,5.166,1.56,4.66,1.04z"></path>
-			<path class="wave d" d="M29.18,1.06c-0.479-0.502-1.273-0.522-1.775-0.044c-0.016,0.015-0.029,0.029-0.045,0.044c-0.5,0.52-0.5,1.36,0,1.88 c1.361,1.4,2.041,3.24,2.041,5.08s-0.68,3.66-2.041,5.08c-0.5,0.52-0.5,1.36,0,1.88c0.509,0.508,1.332,0.508,1.841,0 c1.86-1.92,2.8-4.44,2.8-6.96C31.99,5.424,30.98,2.931,29.18,1.06z"></path>
+					<path class="wave b" d="M9.58,12.22c0.5-0.5,0.5-1.34,0-1.84C8.94,9.72,8.62,8.86,8.62,8s0.32-1.72,0.96-2.38c0.5-0.52,0.5-1.34,0-1.84 C9.346,3.534,9.02,3.396,8.68,3.4c-0.32,0-0.66,0.12-0.9,0.38C6.64,4.94,6.08,6.48,6.08,8s0.58,3.06,1.7,4.22 C8.28,12.72,9.1,12.72,9.58,12.22z"></path>
-		</svg>
+					<path class="wave c" d="M22.42,3.78c-0.5,0.5-0.5,1.34,0,1.84c0.641,0.66,0.96,1.52,0.96,2.38s-0.319,1.72-0.96,2.38c-0.5,0.52-0.5,1.34,0,1.84 c0.487,0.497,1.285,0.505,1.781,0.018c0.007-0.006,0.013-0.012,0.02-0.018c1.139-1.16,1.699-2.7,1.699-4.22s-0.561-3.06-1.699-4.22 c-0.494-0.497-1.297-0.5-1.794-0.007C22.424,3.775,22.422,3.778,22.42,3.78z"></path>
-	</div>
+					<path class="wave d" d="M29.18,1.06c-0.479-0.502-1.273-0.522-1.775-0.044c-0.016,0.015-0.029,0.029-0.045,0.044c-0.5,0.52-0.5,1.36,0,1.88 c1.361,1.4,2.041,3.24,2.041,5.08s-0.68,3.66-2.041,5.08c-0.5,0.52-0.5,1.36,0,1.88c0.509,0.508,1.332,0.508,1.841,0 c1.86-1.92,2.8-4.44,2.8-6.96C31.99,5.424,30.98,2.931,29.18,1.06z"></path>
-	<p class="fetching" v-if="fetching">%i18n:@fetching%<mk-ellipsis/></p>
+				</svg>
-	<h1 v-if="!fetching">{{ announcements.length == 0 ? '%i18n:@no-broadcasts%' : announcements[i].title }}</h1>
+			</div>
-	<p v-if="!fetching">
+			<p class="fetching" v-if="fetching">%i18n:@fetching%<mk-ellipsis/></p>
-		<span v-if="announcements.length != 0" v-html="announcements[i].text"></span>
+			<h1 v-if="!fetching">{{ announcements.length == 0 ? '%i18n:@no-broadcasts%' : announcements[i].title }}</h1>
-		<template v-if="announcements.length == 0">%i18n:@have-a-nice-day%</template>
+			<p v-if="!fetching">
-	</p>
+				<span v-if="announcements.length != 0" v-html="announcements[i].text"></span>
-	<a v-if="announcements.length > 1" @click="next">%i18n:@next% &gt;&gt;</a>
+				<template v-if="announcements.length == 0">%i18n:@have-a-nice-day%</template>
 			</p>
 			<a v-if="announcements.length > 1" @click="next">%i18n:@next% &gt;&gt;</a>
 		</div>
 	</mk-widget-container>
 </div>
 </template>
@@ -66,13 +70,12 @@ export default define({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.anltbovirfeutcigvwgmgxipejaeozxi-body
 	padding 10px
-	border solid 1px #4078c0
+	background var(--announcementsBg)
 	border-radius 6px
 	&[data-melt]
-		border none
+		background transparent
 	&[data-found]
 		padding-left 50px
@@ -126,14 +129,14 @@ root(isDark)
 		margin 0
 		font-size 0.95em
 		font-weight normal
-		color isDark ? #539eff : #4078c0
+		color var(--announcementsTitle)
 	> p
 		display block
 		z-index 1
 		margin 0
 		font-size 0.7em
-		color isDark ? #fff : #555
+		color var(--announcementsText)
 		&.fetching
 			text-align center
@@ -146,10 +149,4 @@ root(isDark)
 		> p
 			color #fff
 .anltbovirfeutcigvwgmgxipejaeozxi[data-darkmode]
 	root(true)
 .anltbovirfeutcigvwgmgxipejaeozxi:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -116,15 +116,13 @@ export default define({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mkw-calendar
 root(isDark)
 	&[data-special='on-new-years-day']
 		border-color #ef95a0
 	.mkw-calendar--body
 		padding 16px 0
-		color isDark ? #c5ced6 : #777
+		color var(--calendarDay)
 		&:after
 			content ""
@@ -169,7 +167,8 @@ root(isDark)
 					margin 0 0 2px 0
 					font-size 12px
 					line-height 18px
-					color isDark ? #7a8692 : #888
+					color var(--text)
 					opacity 0.8
 					> b
 						margin-left 2px
@@ -177,12 +176,12 @@ root(isDark)
 				> .meter
 					width 100%
 					overflow hidden
-					background isDark ? #1c1f25 : #eee
+					background var(--materBg)
 					border-radius 8px
 					> .val
 						height 4px
-						background $theme-color
+						background var(--primary)
 						transition width .3s cubic-bezier(0.23, 1, 0.32, 1)
 				&:nth-child(1)
@@ -197,10 +196,4 @@ root(isDark)
 					> .meter > .val
 						background #41ddde
 .mkw-calendar[data-darkmode]
 	root(true)
 .mkw-calendar:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/widgets/donation.vue
+++ b/src/client/app/common/views/widgets/donation.vue
@@ -1,13 +1,15 @@
 <template>
-<div class="mkw-donation" :data-mobile="platform == 'mobile'">
+<div>
-	<article>
+	<mk-widget-container :show-header="false">
-		<h1>%fa:heart%%i18n:@title%</h1>
+		<article class="dolfvtibguprpxxhfndqaosjitixjohx">
-		<p v-if="meta">
+			<h1>%fa:heart%%i18n:@title%</h1>
-			{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
+			<p v-if="meta">
-			<a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a>
+				{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
-			{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
+				<a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a>
-		</p>
+				{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
-	</article>
+			</p>
 		</article>
 	</mk-widget-container>
 </div>
 </template>
@@ -30,46 +32,22 @@ export default define({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.dolfvtibguprpxxhfndqaosjitixjohx
-	background isDark ? #282c37 : #fff
+	padding 20px
-	border solid 1px isDark ? #c3831c : #ead8bb
+	background var(--donationBg)
-	border-radius 6px
+	color var(--donationFg)
-	> article
+	> h1
-		padding 20px
+		margin 0 0 5px 0
 		font-size 1em
-		> h1
+		> [data-fa]
-			margin 0 0 5px 0
+			margin-right 0.25em
 			font-size 1em
 			color isDark ? #b2bac1 : #888
-			> [data-fa]
+	> p
-				margin-right 0.25em
+		display block
-
+		z-index 1
-		> p
+		margin 0
-			display block
+		font-size 0.8em
 			z-index 1
 			margin 0
 			font-size 0.8em
 			color isDark ? #a1a6ab : #999
 	&[data-mobile]
 		border none
 		background #ead8bb
 		border-radius 8px
 		box-shadow 0 0 0 1px rgba(#000, 0.2)
 		> article
 			> h1
 				color #7b8871
 			> p
 				color #777d71
 .mkw-donation[data-darkmode]
 	root(true)
 .mkw-donation:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/widgets/memo.vue
+++ b/src/client/app/common/views/widgets/memo.vue
@@ -57,9 +57,7 @@ export default define({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mkw-memo
 root(isDark)
 	.mkw-memo--body
 		padding-bottom 28px + 16px
@@ -69,10 +67,10 @@ root(isDark)
 			max-width 100%
 			min-width 100%
 			padding 16px
-			color isDark ? #fff : #222
+			color var(--inputText)
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border none
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 			border-radius 0
 		> button
@@ -83,8 +81,8 @@ root(isDark)
 			margin 0
 			padding 0 10px
 			height 28px
-			color $theme-color-foreground
+			color var(--primaryForeground)
-			background $theme-color !important
+			background var(--primary) !important
 			outline none
 			border none
 			border-radius 4px
@@ -92,20 +90,14 @@ root(isDark)
 			cursor pointer
 			&:hover
-				background lighten($theme-color, 10%) !important
+				background var(--primaryLighten10) !important
 			&:active
-				background darken($theme-color, 10%) !important
+				background var(--primaryDarken10) !important
 				transition background 0s ease
 			&:disabled
 				opacity 0.7
 				cursor default
 .mkw-memo[data-darkmode]
 	root(true)
 .mkw-memo:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/widgets/nav.vue
+++ b/src/client/app/common/views/widgets/nav.vue
@@ -16,23 +16,17 @@ export default define({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.mkw-nav
 	.mkw-nav--body
 		padding 16px
 		font-size 12px
-		color isDark ? #9aa4b3 : #aaa
+		color var(--text)
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		a
-			color isDark ? #9aa4b3 : #999
+			color var(--text)
 		i
-			color isDark ? #9aa4b3 : #ccc
+			color var(--text)
 .mkw-nav[data-darkmode]
 	root(true)
 .mkw-nav:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/widgets/posts-monitor.vue
+++ b/src/client/app/common/views/widgets/posts-monitor.vue
@@ -4,7 +4,7 @@
 		<template slot="header">%fa:chart-line%%i18n:@title%</template>
 		<button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
-		<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }" :data-darkmode="$store.state.device.darkmode">
+		<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }">
 			<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2">
 				<defs>
 					<linearGradient :id="localGradientId" x1="0" x2="0" y1="1" y2="0">
@@ -173,7 +173,7 @@ export default define({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.qpdmibaztplkylerhdbllwcokyrfxeyj
 	&.dual
 		> svg
 			width 50%
@@ -192,7 +192,7 @@ root(isDark)
 		> text
 			font-size 5px
-			fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
+			fill var(--chartCaption)
 			> tspan
 				opacity 0.5
@@ -202,10 +202,4 @@ root(isDark)
 		display block
 		clear both
 .qpdmibaztplkylerhdbllwcokyrfxeyj[data-darkmode]
 	root(true)
 .qpdmibaztplkylerhdbllwcokyrfxeyj:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/widgets/rss.vue
+++ b/src/client/app/common/views/widgets/rss.vue
@@ -65,7 +65,7 @@ export default define({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.mkw-rss
 	.mkw-rss--body
 		.feed
 			padding 12px 16px
@@ -74,8 +74,8 @@ root(isDark)
 			> a
 				display block
 				padding 4px 0
-				color isDark ? #9aa4b3 : #666
+				color var(--text)
-				border-bottom dashed 1px isDark ? #1c2023 : #eee
+				border-bottom dashed 1px var(--faceDivider)
 				&:last-child
 					border-bottom none
@@ -90,7 +90,7 @@ root(isDark)
 				margin-right 4px
 		&[data-mobile]
-			background isDark ? #21242f : #f3f3f3
+			background var(--face)
 			.feed
 				padding 0
@@ -100,12 +100,6 @@ root(isDark)
 					border-bottom none
 					&:nth-child(even)
-						background isDark ? rgba(#000, 0.05) : rgba(#fff, 0.7)
+						background rgba(#000, 0.05)
 .mkw-rss[data-darkmode]
 	root(true)
 .mkw-rss:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/widgets/server.cpu-memory.vue
+++ b/src/client/app/common/views/widgets/server.cpu-memory.vue
@@ -129,7 +129,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.cpu-memory
 	> svg
 		display block
 		padding 10px
@@ -144,7 +144,7 @@ root(isDark)
 		> text
 			font-size 5px
-			fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
+			fill var(--chartCaption)
 			> tspan
 				opacity 0.5
@@ -154,10 +154,4 @@ root(isDark)
 		display block
 		clear both
 .cpu-memory[data-darkmode]
 	root(true)
 .cpu-memory:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/widgets/server.cpu.vue
+++ b/src/client/app/common/views/widgets/server.cpu.vue
@@ -38,7 +38,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.cpu
 	> .pie
 		padding 10px
 		height 100px
@@ -52,7 +52,7 @@ root(isDark)
 		> p
 			margin 0
 			font-size 12px
-			color isDark ? #a8b4bd : #505050
+			color var(--chartCaption)
 			&:first-child
 				font-weight bold
@@ -65,10 +65,4 @@ root(isDark)
 		display block
 		clear both
 .cpu[data-darkmode]
 	root(true)
 .cpu:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/widgets/server.disk.vue
+++ b/src/client/app/common/views/widgets/server.disk.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.disk
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ root(isDark)
 		> p
 			margin 0
 			font-size 12px
-			color isDark ? #a8b4bd : #505050
+			color var(--chartCaption)
 			&:first-child
 				font-weight bold
@@ -73,10 +73,4 @@ root(isDark)
 		display block
 		clear both
 .disk[data-darkmode]
 	root(true)
 .disk:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/widgets/server.memory.vue
+++ b/src/client/app/common/views/widgets/server.memory.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.memory
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ root(isDark)
 		> p
 			margin 0
 			font-size 12px
-			color isDark ? #a8b4bd : #505050
+			color var(--chartCaption)
 			&:first-child
 				font-weight bold
@@ -73,10 +73,4 @@ root(isDark)
 		display block
 		clear both
 .memory[data-darkmode]
 	root(true)
 .memory:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/common/views/widgets/server.pie.vue
+++ b/src/client/app/common/views/widgets/server.pie.vue
@@ -45,7 +45,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+svg
 	display block
 	height 100%
@@ -56,12 +56,6 @@ root(isDark)
 	> text
 		font-size 0.15px
-		fill isDark ? rgba(#fff, 0.6) : rgba(#000, 0.6)
+		fill var(--chartCaption)
 svg[data-darkmode]
 	root(true)
 svg:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/assets/header-icon.light.svg
+++ b/src/client/app/desktop/assets/header-icon.light.svg
@@ -1,150 +0,0 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="512"
   height="512"
   viewBox="0 0 135.46667 135.46667"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.1 r15371"
   sodipodi:docname="header-icon.light.svg"
   inkscape:export-filename="C:\Users\syuilo\projects\misskey\assets\favicon\32.png"
   inkscape:export-xdpi="6"
   inkscape:export-ydpi="6">
  <defs
     id="defs2">
    <inkscape:path-effect
       effect="simplify"
       id="path-effect5115"
       is_visible="true"
       steps="1"
       threshold="0.000408163"
       smooth_angles="360"
       helper_size="0"
       simplify_individual_paths="false"
       simplify_just_coalesce="false"
       simplifyindividualpaths="false"
       simplifyJustCoalesce="false" />
    <inkscape:path-effect
       effect="simplify"
       id="path-effect5111"
       is_visible="true"
       steps="1"
       threshold="0.000408163"
       smooth_angles="360"
       helper_size="0"
       simplify_individual_paths="false"
       simplify_just_coalesce="false"
       simplifyindividualpaths="false"
       simplifyJustCoalesce="false" />
    <inkscape:path-effect
       effect="simplify"
       id="path-effect5104"
       is_visible="true"
       steps="1"
       threshold="0.000408163"
       smooth_angles="360"
       helper_size="0"
       simplify_individual_paths="false"
       simplify_just_coalesce="false"
       simplifyindividualpaths="false"
       simplifyJustCoalesce="false" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.4142136"
     inkscape:cx="114.309"
     inkscape:cy="251.50613"
     inkscape:document-units="px"
     inkscape:current-layer="g4502"
     showgrid="true"
     units="px"
     inkscape:snap-bbox="true"
     inkscape:bbox-nodes="true"
     inkscape:snap-bbox-edge-midpoints="false"
     inkscape:snap-smooth-nodes="true"
     inkscape:snap-center="true"
     inkscape:snap-page="true"
     inkscape:window-width="1920"
     inkscape:window-height="1027"
     inkscape:window-x="-8"
     inkscape:window-y="1072"
     inkscape:window-maximized="1"
     inkscape:snap-object-midpoints="true"
     inkscape:snap-midpoints="true"
     inkscape:object-paths="true"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     objecttolerance="1"
     guidetolerance="1"
     inkscape:snap-nodes="false"
     inkscape:snap-others="false">
    <inkscape:grid
       type="xygrid"
       id="grid4504"
       spacingx="4.2333334"
       spacingy="4.2333334"
       empcolor="#ff3fff"
       empopacity="0.25098039"
       empspacing="4" />
  </sodipodi:namedview>
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="レイヤー 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-30.809093,-111.78601)">
    <g
       id="g4502"
       transform="matrix(1.096096,0,0,1.096096,-2.960633,-44.023579)">
      <g
         style="fill:#000000;fill-opacity:1"
         transform="translate(-1.3333333e-6,-1.3439941e-6)"
         id="g5125">
        <g
           transform="matrix(0.91391326,0,0,0.91391326,7.9719907,17.595761)"
           id="text4489"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           aria-label="Mi">
          <path
             sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
             inkscape:connector-curvature="0"
             id="path5210"
             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#000000;fill-opacity:1;stroke-width:0.28950602px"
             d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
          <path
             inkscape:connector-curvature="0"
             id="path5212"
             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#000000;fill-opacity:1;stroke-width:0.28950602px"
             d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
        </g>
      </g>
    </g>
  </g>
 </svg>
--- a/src/client/app/desktop/assets/header-icon.dark.svg
+++ b/src/client/app/desktop/assets/header-icon.dark.svg
@@ -124,24 +124,24 @@
       id="g4502"
       transform="matrix(1.096096,0,0,1.096096,-2.960633,-44.023579)">
      <g
-         style="fill:#ffffff;fill-opacity:1"
+         style="fill-opacity:1"
         transform="translate(-1.3333333e-6,-1.3439941e-6)"
         id="g5125">
        <g
           transform="matrix(0.91391326,0,0,0.91391326,7.9719907,17.595761)"
           id="text4489"
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           aria-label="Mi">
          <path
             sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
             inkscape:connector-curvature="0"
             id="path5210"
-             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#ffffff;fill-opacity:1;stroke-width:0.28950602px"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.28950602px"
             d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
          <path
             inkscape:connector-curvature="0"
             id="path5212"
-             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#ffffff;fill-opacity:1;stroke-width:0.28950602px"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.28950602px"
             d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
        </g>
      </g>
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -29,7 +29,6 @@ import MkUser from './views/pages/user/user.vue';
 import MkFavorites from './views/pages/favorites.vue';
 import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
 import MkUserList from './views/pages/user-list.vue';
 import MkHomeCustomize from './views/pages/home-customize.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
 import MkNote from './views/pages/note.vue';
@@ -63,7 +62,6 @@ init(async (launch) => {
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
 			{ path: '/i/lists/:list', component: MkUserList },
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ path: '/search', component: MkSearch },
 			{ path: '/tags/:tag', component: MkTag },
@@ -87,10 +85,12 @@ init(async (launch) => {
 		updateBanner: updateBanner(os)
 	}));
-	/**
+	if (os.store.getters.isSignedIn) {
-	 * Fuck AD Block
+		/**
-	 */
+		 * Fuck AD Block
-	fuckAdBlock(os);
+		 */
 		fuckAdBlock(os);
 	}
 	/**
 	 * Init Notification
--- a/src/client/app/desktop/style.styl
+++ b/src/client/app/desktop/style.styl
@@ -1,8 +1,6 @@
@import "../app"
@import "../reset"
@import "./ui"
 *::input-placeholder
 	color #D8CBC5
@@ -11,34 +9,21 @@
 html
 	height 100%
-	background #f7f7f7
+	background var(--bg)
 	&, *
 		&::-webkit-scrollbar
 			width 6px
 			height 6px
 		&::-webkit-scrollbar-track
 			background var(--scrollbarTrack)
 		&::-webkit-scrollbar-thumb
-			background rgba(0, 0, 0, 0.2)
+			background var(--scrollbarHandle)
 			&:hover
-				background rgba(0, 0, 0, 0.4)
+				background var(--scrollbarHandleHover)
 			&:active
-				background $theme-color
+				background var(--primary)
 	&[data-darkmode]
 		background #191B22
 		&, *
 			&::-webkit-scrollbar-track
 				background-color #282C37
 			&::-webkit-scrollbar-thumb
 				background-color #454954
 				&:hover
 					background-color #535660
 				&:active
 					background-color $theme-color
--- a/src/client/app/desktop/ui.styl
+++ b/src/client/app/desktop/ui.styl
@@ -1,181 +0,0 @@
@import "../../const"
 button
 	font-family sans-serif
 	*
 		pointer-events none
 button.ui
 .button.ui
 	display inline-block
 	cursor pointer
 	padding 0 14px
 	margin 0
 	min-width 100px
 	line-height 38px
 	font-size 14px
 	color #888
 	text-decoration none
 	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
 	border solid 1px #e2e2e2
 	border-radius 4px
 	outline none
 	&.block
 		display block
 	&:focus
 		&:after
 			content ""
 			pointer-events none
 			position absolute
 			top -5px
 			right -5px
 			bottom -5px
 			left -5px
 			border 2px solid rgba($theme-color, 0.3)
 			border-radius 8px
 	&:disabled
 		opacity 0.7
 		cursor default
 	&:hover
 		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
 		border-color #dcdcdc
 	&:active
 		background #ececec
 		border-color #dcdcdc
 	&.primary
 		color $theme-color-foreground
 		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
 		border solid 1px lighten($theme-color, 15%)
 		&:not(:disabled)
 			font-weight bold
 		&:hover:not(:disabled)
 			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
 			border-color $theme-color
 		&:active:not(:disabled)
 			background $theme-color
 			border-color $theme-color
 input:not([type]).ui
 input[type='text'].ui
 input[type='password'].ui
 input[type='email'].ui
 input[type='date'].ui
 input[type='number'].ui
 textarea.ui
 	display block
 	padding 10px
 	width 100%
 	height 40px
 	font-family sans-serif
 	font-size 16px
 	color #55595c
 	border solid 1px #dadada
 	border-radius 4px
 	&:hover
 		border-color #b0b0b0
 	&:focus
 		border-color $theme-color
 textarea.ui
 	min-width 100%
 	max-width 100%
 	min-height 64px
 .ui.info
 	display block
 	margin 1em 0
 	padding 0 1em
 	font-size 90%
 	color rgba(#000, 0.87)
 	background #f8f8f9
 	border solid 1px rgba(34, 36, 38, 0.22)
 	border-radius 4px
 	> p
 		opacity 0.8
 		> [data-fa]:first-child
 			margin-right 0.25em
 	&.warn
 		color #573a08
 		background #FFFAF3
 		border-color #C9BA9B
 .ui.from.group
 	display block
 	margin 16px 0
 	> p:first-child
 		margin 0 0 6px 0
 		font-size 90%
 		font-weight bold
 		color rgba(#373a3c, 0.9)
 html[data-darkmode]
 	button.ui
 	.button.ui
 		color #fff
 		background linear-gradient(to bottom, #313543 0%, #282c37 100%)
 		border-color #1c2023
 		&:hover
 			background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
 			border-color #151a1d
 		&:active
 			background #22262f
 			border-color #151a1d
 		&.primary
 			color $theme-color-foreground
 			background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
 			border solid 1px lighten($theme-color, 15%)
 			&:hover:not(:disabled)
 				background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
 				border-color $theme-color
 			&:active:not(:disabled)
 				background $theme-color
 				border-color $theme-color
 	input:not([type]).ui
 	input[type='text'].ui
 	input[type='password'].ui
 	input[type='email'].ui
 	input[type='date'].ui
 	input[type='number'].ui
 	textarea.ui
 		display block
 		padding 10px
 		width 100%
 		height 40px
 		font-family sans-serif
 		font-size 16px
 		color #dee4e8
 		background #191b22
 		border solid 1px #495156
 		border-radius 4px
 		&:hover
 			border-color #b0b0b0
 		&:focus
 			border-color $theme-color
 	.ui.from.group
 		> p:first-child
 			color #c0c7cc
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -128,13 +128,11 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-calendar
-
+	color var(--calendarDay)
-root(isDark)
+	background var(--face)
-	color isDark ? #c5ced6 : #777
+	box-shadow var(--shadow)
-	background isDark ? #282C37 : #fff
+	border-radius var(--round)
 	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 	overflow hidden
 	&[data-melt]
@@ -149,12 +147,10 @@ root(isDark)
 		line-height 42px
 		font-size 0.9em
 		font-weight bold
-		color isDark ? #c5ced6 : #888
+		color var(--faceHeaderText)
 		background var(--faceHeader)
 		box-shadow 0 1px rgba(#000, 0.07)
 		if isDark
 			background #313543
 		> [data-fa]
 			margin-right 4px
@@ -166,13 +162,13 @@ root(isDark)
 		width 42px
 		font-size 0.9em
 		line-height 42px
-		color isDark ? #9baec8 : #ccc
+		color var(--faceTextButton)
 		&:hover
-			color isDark ? #b2c1d5 : #aaa
+			color var(--faceTextButtonHover)
 		&:active
-			color isDark ? #b2c1d5 : #999
+			color var(--faceTextButtonActive)
 		&:first-of-type
 			left 0
@@ -195,65 +191,56 @@ root(isDark)
 			font-size 14px
 			&.weekday
-				color isDark ? #43d5dc : #19a2a9
+				color var(--calendarWeek)
 				&[data-is-donichi]
-					color isDark ? #ff6679 : #ef95a0
+					color var(--calendarSaturdayOrSunday)
 				&[data-today]
-					box-shadow 0 0 0 1px isDark ? #43d5dc : #19a2a9 inset
+					box-shadow 0 0 0 1px var(--calendarWeek) inset
 					border-radius 6px
 					&[data-is-donichi]
-						box-shadow 0 0 0 1px isDark ? #ff6679 : #ef95a0 inset
+						box-shadow 0 0 0 1px var(--calendarSaturdayOrSunday) inset
 			&.day
 				cursor pointer
-				color isDark ? #c5ced6 : #777
+				color var(--calendarDay)
 				> div
 					border-radius 6px
 				&:hover > div
-					background rgba(#000, isDark ? 0.1 : 0.025)
+					background var(--faceClearButtonHover)
 				&:active > div
-					background rgba(#000, isDark ? 0.2 : 0.05)
+					background var(--faceClearButtonActive)
 				&[data-is-donichi]
-					color isDark ? #ff6679 : #ef95a0
+					color var(--calendarSaturdayOrSunday)
 				&[data-is-out-of-range]
 					cursor default
-					color rgba(isDark ? #c5ced6 : #777, 0.5)
+					opacity 0.5
 					&[data-is-donichi]
 						color rgba(isDark ? #ff6679 : #ef95a0, 0.5)
 				&[data-selected]
 					font-weight bold
 					> div
-						background rgba(#000, isDark ? 0.1 : 0.025)
+						background var(--faceClearButtonHover)
 					&:active > div
-						background rgba(#000, isDark ? 0.2 : 0.05)
+						background var(--faceClearButtonActive)
 				&[data-today]
 					> div
-						color $theme-color-foreground
+						color var(--primaryForeground)
-						background $theme-color
+						background var(--primary)
 					&:hover > div
-						background lighten($theme-color, 10%)
+						background var(--primaryLighten10)
 					&:active > div
-						background darken($theme-color, 10%)
+						background var(--primaryDarken10)
 .mk-calendar[data-darkmode]
 	root(true)
 .mk-calendar:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/charts.vue
+++ b/src/client/app/desktop/views/components/charts.vue
@@ -649,7 +649,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 .gkgckalzgidaygcxnugepioremxvxvpt
 	padding 32px
@@ -675,7 +675,7 @@ export default Vue.extend({
 			*
 				&:not(.active)
-					color $theme-color
+					color var(--primary)
 					cursor pointer
 	> div
--- a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
@@ -59,7 +59,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" module>
-@import '~const.styl'
+
 .title
 	> [data-fa]
@@ -74,7 +74,7 @@ export default Vue.extend({
 .footer
 	height 72px
-	background lighten($theme-color, 95%)
+	background var(--primaryLighten95)
 .upload
 	display inline-block
@@ -87,7 +87,7 @@ export default Vue.extend({
 	width 40px
 	height 40px
 	font-size 1em
-	color rgba($theme-color, 0.5)
+	color var(--primaryAlpha05)
 	background transparent
 	outline none
 	border solid 1px transparent
@@ -95,13 +95,13 @@ export default Vue.extend({
 	&:hover
 		background transparent
-		border-color rgba($theme-color, 0.3)
+		border-color var(--primaryAlpha03)
 	&:active
-		color rgba($theme-color, 0.6)
+		color var(--primaryAlpha06)
 		background transparent
-		border-color rgba($theme-color, 0.5)
+		border-color var(--primaryAlpha05)
-		box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
+		//box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
 	&:focus
 		&:after
@@ -112,7 +112,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 .ok
@@ -138,7 +138,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 	&:disabled
@@ -147,20 +147,20 @@ export default Vue.extend({
 .ok
 	right 16px
-	color $theme-color-foreground
+	color var(--primaryForeground)
-	background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-	border solid 1px lighten($theme-color, 15%)
+	border solid 1px var(--primaryLighten15)
 	&:not(:disabled)
 		font-weight bold
 	&:hover:not(:disabled)
-		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-		border-color $theme-color
+		border-color var(--primary)
 	&:active:not(:disabled)
-		background $theme-color
+		background var(--primary)
-		border-color $theme-color
+		border-color var(--primary)
 .cancel
 	right 148px
--- a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" module>
-@import '~const.styl'
+
 .title
 	> [data-fa]
@@ -48,7 +48,7 @@ export default Vue.extend({
 .footer
 	height 72px
-	background lighten($theme-color, 95%)
+	background var(--primaryLighten95)
 .ok
 .cancel
@@ -73,7 +73,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 	&:disabled
@@ -82,20 +82,20 @@ export default Vue.extend({
 .ok
 	right 16px
-	color $theme-color-foreground
+	color var(--primaryForeground)
-	background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-	border solid 1px lighten($theme-color, 15%)
+	border solid 1px var(--primaryLighten15)
 	&:not(:disabled)
 		font-weight bold
 	&:hover:not(:disabled)
-		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-		border-color $theme-color
+		border-color var(--primary)
 	&:active:not(:disabled)
-		background $theme-color
+		background var(--primary)
-		border-color $theme-color
+		border-color var(--primary)
 .cancel
 	right 148px
--- a/src/client/app/desktop/views/components/context-menu.menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.menu.vue
@@ -31,9 +31,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.menu
 root(isDark)
 	$width = 240px
 	$item-height = 38px
 	$padding = 10px
@@ -48,7 +46,7 @@ root(isDark)
 		&.divider
 			margin-top $padding
 			padding-top $padding
-			border-top solid 1px isDark ? #1c2023 : #eee
+			border-top solid 1px var(--faceDivider)
 		&.nest
 			> p
@@ -69,7 +67,7 @@ root(isDark)
 			&:active
 				> p, a
-					background $theme-color
+					background var(--primary)
 		> p, a
 			display block
@@ -77,7 +75,7 @@ root(isDark)
 			margin 0
 			padding 0 32px 0 38px
 			line-height $item-height
-			color isDark ? #c8cece : #868C8C
+			color var(--text)
 			text-decoration none
 			cursor pointer
@@ -90,14 +88,14 @@ root(isDark)
 		&:hover
 			> p, a
 				text-decoration none
-				background $theme-color
+				background var(--primary)
-				color $theme-color-foreground
+				color var(--primaryForeground)
 		&:active
 			> p, a
 				text-decoration none
-				background darken($theme-color, 10%)
+				background var(--primaryDarken10)
-				color $theme-color-foreground
+				color var(--primaryForeground)
 	li > ul
 		visibility hidden
@@ -106,17 +104,11 @@ root(isDark)
 		left $width
 		margin-top -($padding)
 		width $width
-		background isDark ? #282c37 :#fff
+		background var(--popupBg)
 		border-radius 0 4px 4px 4px
 		box-shadow 2px 2px 8px rgba(#000, 0.2)
 		transition visibility 0s linear 0.2s
 .menu[data-darkmode]
 	root(true)
 .menu:not([data-darkmode])
 	root(false)
 </style>
 <style lang="stylus" module>
--- a/src/client/app/desktop/views/components/context-menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.vue
@@ -71,7 +71,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.context-menu
 	$width = 240px
 	$item-height = 38px
 	$padding = 10px
@@ -82,15 +82,9 @@ root(isDark)
 	z-index 4096
 	width $width
 	font-size 0.8em
-	background isDark ? #282c37 : #fff
+	background var(--popupBg)
 	border-radius 0 4px 4px 4px
 	box-shadow 2px 2px 8px rgba(#000, 0.2)
 	opacity 0
 .context-menu[data-darkmode]
 	root(true)
 .context-menu:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/crop-window.vue
+++ b/src/client/app/desktop/views/components/crop-window.vue
@@ -61,7 +61,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" module>
-@import '~const.styl'
+
 .header
 	> [data-fa]
@@ -73,7 +73,7 @@ export default Vue.extend({
 .actions
 	height 72px
-	background lighten($theme-color, 95%)
+	background var(--primaryLighten95)
 .ok
 .cancel
@@ -98,7 +98,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 	&:disabled
@@ -111,20 +111,20 @@ export default Vue.extend({
 .ok
 	right 16px
-	color $theme-color-foreground
+	color var(--primaryForeground)
-	background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-	border solid 1px lighten($theme-color, 15%)
+	border solid 1px var(--primaryLighten15)
 	&:not(:disabled)
 		font-weight bold
 	&:hover:not(:disabled)
-		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-		border-color $theme-color
+		border-color var(--primary)
 	&:active:not(:disabled)
-		background $theme-color
+		background var(--primary)
-		border-color $theme-color
+		border-color var(--primary)
 .cancel
 .skip
@@ -155,11 +155,11 @@ export default Vue.extend({
 }
 .cropper-view-box {
-	outline-color: $theme-color;
+	outline-color: var(--primary);
 }
 .cropper-line, .cropper-point {
-	background-color: $theme-color;
+	background-color: var(--primary);
 }
 .cropper-bg {
--- a/src/client/app/desktop/views/components/dialog.vue
+++ b/src/client/app/desktop/views/components/dialog.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 .mk-dialog
 	> .bg
@@ -144,20 +144,20 @@ export default Vue.extend({
 					margin 0 0.375em
 				&:hover
-					color $theme-color
+					color var(--primary)
 				&:active
-					color darken($theme-color, 10%)
+					color var(--primaryDarken10)
 					transition color 0s ease
 </style>
 <style lang="stylus" module>
-@import '~const.styl'
+
 .header
 	margin 1em 0
-	color $theme-color
+	color var(--primary)
 	// color #43A4EC
 	font-weight bold
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -200,9 +200,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.gvfdktuvdgwhmztnuekzkswkjygptfcv
 root(isDark)
 	padding 8px 0 0 0
 	height 180px
 	border-radius 4px
@@ -237,13 +235,13 @@ root(isDark)
 					background #ce2212
 	&[data-is-selected]
-		background $theme-color
+		background var(--primary)
 		&:hover
-			background lighten($theme-color, 10%)
+			background var(--primaryLighten10)
 		&:active
-			background darken($theme-color, 10%)
+			background var(--primaryDarken10)
 		> .label
 			&:before
@@ -251,7 +249,7 @@ root(isDark)
 				display none
 		> .name
-			color $theme-color-foreground
+			color var(--primaryForeground)
 	&[data-is-contextmenu-showing]
 		&:after
@@ -262,7 +260,7 @@ root(isDark)
 			right -4px
 			bottom -4px
 			left -4px
-			border 2px dashed rgba($theme-color, 0.3)
+			border 2px dashed var(--primaryAlpha03)
 			border-radius 4px
 	> .label
@@ -337,16 +335,10 @@ root(isDark)
 		font-size 0.8em
 		text-align center
 		word-break break-all
-		color isDark ? #fff : #444
+		color var(--text)
 		overflow hidden
 		> .ext
 			opacity 0.5
 .gvfdktuvdgwhmztnuekzkswkjygptfcv[data-darkmode]
 	root(true)
 .gvfdktuvdgwhmztnuekzkswkjygptfcv:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/drive.folder.vue
+++ b/src/client/app/desktop/views/components/drive.folder.vue
@@ -214,12 +214,10 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.ynntpczxvnusfwdyxsfuhvcmuypqopdd
 root(isDark)
 	padding 8px
 	height 64px
-	background isDark ? rgba($theme-color, 0.2) : lighten($theme-color, 95%)
+	background var(--desktopDriveFolderBg)
 	border-radius 4px
 	&, *
@@ -229,10 +227,10 @@ root(isDark)
 		pointer-events none
 	&:hover
-		background isDark ? rgba(lighten($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
+		background var(--desktopDriveFolderHoverBg)
 	&:active
-		background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 85%)
+		background var(--desktopDriveFolderActiveBg)
 	&[data-is-contextmenu-showing]
 	&[data-draghover]
@@ -244,26 +242,20 @@ root(isDark)
 			right -4px
 			bottom -4px
 			left -4px
-			border 2px dashed rgba($theme-color, 0.3)
+			border 2px dashed var(--primaryAlpha03)
 			border-radius 4px
 	&[data-draghover]
-		background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
+		background var(--desktopDriveFolderActiveBg)
 	> .name
 		margin 0
 		font-size 0.9em
-		color isDark ? #fff : darken($theme-color, 30%)
+		color var(--desktopDriveFolderFg)
 		> [data-fa]
 			margin-right 4px
 			margin-left 2px
 			text-align left
 .ynntpczxvnusfwdyxsfuhvcmuypqopdd[data-darkmode]
 	root(true)
 .ynntpczxvnusfwdyxsfuhvcmuypqopdd:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -585,18 +585,15 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-drive
 root(isDark)
 	> nav
 		display block
 		z-index 2
 		width 100%
 		overflow auto
 		font-size 0.9em
-		color isDark ? #d2d9dc : #555
+		color var(--text)
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		box-shadow 0 1px 0 rgba(#000, 0.05)
 		&, *
@@ -674,7 +671,7 @@ root(isDark)
 		padding 8px
 		height calc(100% - 38px)
 		overflow auto
-		background isDark ? #191b22 : #fff
+		background var(--desktopDriveBg)
 		&, *
 			user-select none
@@ -697,8 +694,8 @@ root(isDark)
 			z-index 128
 			top 0
 			left 0
-			border solid 1px $theme-color
+			border solid 1px var(--primary)
-			background rgba($theme-color, 0.5)
+			background var(--primaryAlpha05)
 			pointer-events none
 		> .contents
@@ -769,7 +766,7 @@ root(isDark)
 		top 38px
 		width 100%
 		height calc(100% - 38px)
-		border dashed 2px rgba($theme-color, 0.5)
+		border dashed 2px var(--primaryAlpha05)
 		pointer-events none
 	> .mk-uploader
@@ -780,10 +777,4 @@ root(isDark)
 	> input
 		display none
 .mk-drive[data-darkmode]
 	root(true)
 .mk-drive:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/follow-button.vue
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -101,9 +101,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-follow-button
 root(isDark)
 	display block
 	cursor pointer
 	padding 0
@@ -126,37 +124,34 @@ root(isDark)
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 	&:not(.active)
-		color isDark ? #fff : #888
+		color var(--primary)
-		background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+		border solid 1px var(--primary)
 		border solid 1px isDark ? #1c2023 : #e2e2e2
 		&:hover
-			background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+			background var(--primaryAlpha03)
 			border-color isDark ? #151a1d : #dcdcdc
 		&:active
-			background isDark ? #22262f : #ececec
+			background var(--primaryAlpha05)
 			border-color isDark ? #151a1d : #dcdcdc
 	&.active
-		color $theme-color-foreground
+		color var(--primaryForeground)
-		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+		background var(--primary)
-		border solid 1px lighten($theme-color, 15%)
+		border solid 1px var(--primary)
 		&:not(:disabled)
 			font-weight bold
 		&:hover:not(:disabled)
-			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+			background var(--primaryLighten5)
-			border-color $theme-color
+			border-color var(--primaryLighten5)
 		&:active:not(:disabled)
-			background $theme-color
+			background var(--primaryDarken5)
-			border-color $theme-color
+			border-color var(--primaryDarken5)
 	&.wait
 		cursor wait !important
@@ -167,10 +162,4 @@ root(isDark)
 		height 38px
 		line-height 38px
 .mk-follow-button[data-darkmode]
 	root(true)
 .mk-follow-button:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -247,9 +247,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-home
 root(isDark)
 	display block
 	&[data-customize]
@@ -279,8 +277,8 @@ root(isDark)
 		left 0
 		width 100%
 		height 48px
-		color isDark ? #fff : #000
+		color var(--text)
-		background isDark ? #313543 : #f7f7f7
+		background var(--desktopHeaderBg)
 		box-shadow 0 1px 1px rgba(#000, 0.075)
 		> a
@@ -292,15 +290,15 @@ root(isDark)
 			padding 0 16px
 			line-height 48px
 			text-decoration none
-			color $theme-color-foreground
+			color var(--primaryForeground)
-			background $theme-color
+			background var(--primary)
 			transition background 0.1s ease
 			&:hover
-				background lighten($theme-color, 10%)
+				background var(--primaryLighten10)
 			&:active
-				background darken($theme-color, 10%)
+				background var(--primaryDarken10)
 				transition background 0s ease
 			> [data-fa]
@@ -320,7 +318,7 @@ root(isDark)
 						line-height 48px
 				&.trash
-					border-left solid 1px isDark ? #1c2023 : #ddd
+					border-left solid 1px var(--faceDivider)
 					> div
 						width 100%
@@ -340,7 +338,7 @@ root(isDark)
 		display flex
 		justify-content center
 		margin 0 auto
-		max-width 1220px
+		max-width 1240px
 		> *
 			.customize-container
@@ -355,13 +353,13 @@ root(isDark)
 		> .main
 			padding 16px
-			width calc(100% - 275px * 2)
+			width calc(100% - 280px * 2)
 			order 2
 			> .form
 				margin-bottom 16px
-				border solid 1px rgba(#000, 0.075)
+				box-shadow var(--shadow)
-				border-radius 4px
+				border-radius var(--round)
 			@media (max-width 700px)
 				padding 0
@@ -371,7 +369,7 @@ root(isDark)
 					border-radius 0
 		> *:not(.main)
-			width 275px
+			width 280px
 			padding 16px 0 16px 0
 			> *:not(:last-child)
@@ -395,10 +393,4 @@ root(isDark)
 				max-width 700px
 				margin 0 auto
 .mk-home[data-darkmode]
 	root(true)
 .mk-home:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/input-dialog.vue
+++ b/src/client/app/desktop/views/components/input-dialog.vue
@@ -76,7 +76,7 @@ export default Vue.extend({
 <style lang="stylus" module>
-@import '~const.styl'
+
 .header
 	> [data-fa]
@@ -96,25 +96,25 @@ export default Vue.extend({
 		color #333
 		background #fff
 		outline none
-		border solid 1px rgba($theme-color, 0.1)
+		border solid 1px var(--primaryAlpha01)
 		border-radius 4px
 		transition border-color .3s ease
 		&:hover
-			border-color rgba($theme-color, 0.2)
+			border-color var(--primaryAlpha02)
 			transition border-color .1s ease
 		&:focus
-			color $theme-color
+			color var(--primary)
-			border-color rgba($theme-color, 0.5)
+			border-color var(--primaryAlpha05)
 			transition border-color 0s ease
 		&::-webkit-input-placeholder
-			color rgba($theme-color, 0.3)
+			color var(--primaryAlpha03)
 .actions
 	height 72px
-	background lighten($theme-color, 95%)
+	background var(--primaryLighten95)
 .ok
 .cancel
@@ -139,7 +139,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 	&:disabled
@@ -148,20 +148,20 @@ export default Vue.extend({
 .ok
 	right 16px
-	color $theme-color-foreground
+	color var(--primaryForeground)
-	background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-	border solid 1px lighten($theme-color, 15%)
+	border solid 1px var(--primaryLighten15)
 	&:not(:disabled)
 		font-weight bold
 	&:hover:not(:disabled)
-		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-		border-color $theme-color
+		border-color var(--primary)
 	&:active:not(:disabled)
-		background $theme-color
+		background var(--primary)
-		border-color $theme-color
+		border-color var(--primary)
 .cancel
 	right 148px
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -225,14 +225,12 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-note-detail
 root(isDark)
 	overflow hidden
 	text-align left
-	background isDark ? #282C37 : #fff
+	background var(--face)
-	border solid 1px rgba(#000, 0.1)
+	box-shadow var(--shadow)
-	border-radius 8px
+	border-radius var(--round)
 	> .read-more
 		display block
@@ -243,28 +241,28 @@ root(isDark)
 		text-align center
 		color #999
 		cursor pointer
-		background isDark ? #21242d : #fafafa
+		background var(--subNoteBg)
 		outline none
 		border none
-		border-bottom solid 1px isDark ? #1c2023 : #eef0f2
+		border-bottom solid 1px var(--faceDivider)
-		border-radius 6px 6px 0 0
+		border-radius var(--round) var(--round) 0 0
 		&:hover
-			background isDark ? #2e3440 : #f6f6f6
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 		&:active
-			background isDark ? #21242b : #f0f0f0
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 		&:disabled
-			color isDark ? #21242b : #ccc
+			cursor wait
 	> .conversation
 		> *
-			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+			border-bottom 1px solid var(--faceDivider)
 	> .renote
-		color #9dbb00
+		color var(--renoteText)
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 		> p
 			margin 0
@@ -287,7 +285,7 @@ root(isDark)
 			padding-top 8px
 	> .reply-to
-		border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+		border-bottom 1px solid var(--faceDivider)
 	> article
 		padding 28px 32px 18px 32px
@@ -299,7 +297,7 @@ root(isDark)
 		&:hover
 			> footer > button
-				color isDark ? #707b97 : #888
+				color var(--noteActionsHighlighted)
 		> .avatar
 			width 60px
@@ -316,7 +314,7 @@ root(isDark)
 				display inline-block
 				margin 0
 				line-height 24px
-				color isDark ? #fff : #627079
+				color var(--noteHeaderName)
 				font-size 18px
 				font-weight 700
 				text-align left
@@ -329,14 +327,14 @@ root(isDark)
 				display block
 				text-align left
 				margin 0
-				color isDark ? #606984 : #ccc
+				color var(--noteHeaderAcct)
 			> .time
 				position absolute
 				top 0
 				right 32px
 				font-size 1em
-				color isDark ? #606984 : #c0c0c0
+				color var(--noteHeaderInfo)
 		> .body
 			padding 8px 0
@@ -347,7 +345,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 				> .text
 					margin-right 8px
@@ -360,14 +358,14 @@ root(isDark)
 					padding 0
 					overflow-wrap break-word
 					font-size 1.5em
-					color isDark ? #fff : #717171
+					color var(--noteText)
 				> .renote
 					margin 8px 0
 					> *
 						padding 16px
-						border dashed 1px #c0dac6
+						border dashed 1px var(--quoteBorder)
 						border-radius 8px
 				> .location
@@ -394,20 +392,20 @@ root(isDark)
 				background transparent
 				border none
 				font-size 1em
-				color isDark ? #606984 : #ccc
+				color var(--noteActions)
 				cursor pointer
 				&:hover
-					color isDark ? #a1a8bf : #444
+					color var(--noteActionsHover)
 				&.replyButton:hover
-					color #0af
+					color var(--noteActionsReplyHover)
 				&.renoteButton:hover
-					color #8d0
+					color var(--noteActionsRenoteHover)
 				&.reactionButton:hover
-					color #fa0
+					color var(--noteActionsReactionHover)
 				> .count
 					display inline
@@ -415,16 +413,10 @@ root(isDark)
 					color #999
 				&.reacted, &.reacted:hover
-					color #fa0
+					color var(--noteActionsReactionHover)
 	> .replies
 		> *
-			border-top 1px solid isDark ? #1c2023 : #eef0f2
+			border-top 1px solid var(--faceDivider)
 .mk-note-detail[data-darkmode]
 	root(true)
 .mk-note-detail:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -47,7 +47,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.qiziqtywpuaucsgarwajitwaakggnisj
 	display flex
 	font-size 0.9em
@@ -71,7 +71,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 				> .text
 					margin-right 8px
@@ -81,12 +81,6 @@ root(isDark)
 					cursor default
 					margin 0
 					padding 0
-					color isDark ? #959ba7 : #717171
+					color var(--subNoteText)
 .qiziqtywpuaucsgarwajitwaakggnisj[data-darkmode]
 	root(true)
 .qiziqtywpuaucsgarwajitwaakggnisj:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -42,12 +42,12 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.tkfdzaxtkdeianobciwadajxzbddorql
 	display flex
 	margin 0
 	padding 16px 32px
 	font-size 0.9em
-	background isDark ? #21242d : #fcfcfc
+	background var(--subNoteBg)
 	> .avatar
 		flex-shrink 0
@@ -72,7 +72,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 				> .text
 					margin-right 8px
@@ -82,16 +82,10 @@ root(isDark)
 					cursor default
 					margin 0
 					padding 0
-					color isDark ? #959ba7 : #717171
+					color var(--subNoteText)
 					pre
 						max-height 120px
 						font-size 80%
 .tkfdzaxtkdeianobciwadajxzbddorql[data-darkmode]
 	root(true)
 .tkfdzaxtkdeianobciwadajxzbddorql:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -40,18 +40,18 @@
 			</div>
 			<footer>
 				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
-				<button class="replyButton" @click="reply" title="%i18n:@reply%">
+				<button class="replyButton" @click="reply()" title="%i18n:@reply%">
 					<template v-if="p.reply">%fa:reply-all%</template>
 					<template v-else>%fa:reply%</template>
 					<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
 				</button>
-				<button class="renoteButton" @click="renote" title="%i18n:@renote%">
+				<button class="renoteButton" @click="renote()" title="%i18n:@renote%">
 					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
 				</button>
 				<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react()" ref="reactButton" title="%i18n:@add-reaction%">
 					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
 				</button>
-				<button @click="menu" ref="menuButton">
+				<button @click="menu()" ref="menuButton">
 					%fa:ellipsis-h%
 				</button>
 				<!-- <button title="%i18n:@detail">
@@ -113,11 +113,25 @@ export default Vue.extend({
 	computed: {
 		keymap(): any {
 			return {
-				'r|left': this.reply,
+				'r|left': () => this.reply(true),
-				'a|plus': () => this.react(true),
+				'e|a|plus': () => this.react(true),
-				'n|right': this.renote,
+				'q|right': () => this.renote(true),
-				'up|shift+tab': this.focusBefore,
+				'ctrl+q|ctrl+right': this.renoteDirectly,
-				'down|tab': this.focusAfter,
+				'up|k|shift+tab': this.focusBefore,
 				'down|j|tab': this.focusAfter,
 				'esc': this.blur,
 				'm|o': () => this.menu(true),
 				's': this.toggleShowContent,
 				'1': () => this.reactDirectly('like'),
 				'2': () => this.reactDirectly('love'),
 				'3': () => this.reactDirectly('laugh'),
 				'4': () => this.reactDirectly('hmm'),
 				'5': () => this.reactDirectly('surprise'),
 				'6': () => this.reactDirectly('congrats'),
 				'7': () => this.reactDirectly('angry'),
 				'8': () => this.reactDirectly('confused'),
 				'9': () => this.reactDirectly('rip'),
 				'0': () => this.reactDirectly('pudding'),
 			};
 		},
@@ -199,10 +213,14 @@ export default Vue.extend({
 	methods: {
 		capture(withHandler = false) {
 			if (this.$store.getters.isSignedIn) {
-				this.connection.send({
+				const data = {
 					type: 'capture',
 					id: this.p.id
-				});
+				} as any;
 				if ((this.p.visibleUserIds || []).includes(this.$store.state.i.id) || (this.p.mentions || []).includes(this.$store.state.i.id)) {
 					data.read = true;
 				}
 				this.connection.send(data);
 				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
 			}
 		},
@@ -230,18 +248,26 @@ export default Vue.extend({
 			}
 		},
-		reply() {
+		reply(viaKeyboard = false) {
 			(this as any).os.new(MkPostFormWindow, {
-				reply: this.p
+				reply: this.p,
 				animation: !viaKeyboard
 			}).$once('closed', this.focus);
 		},
-		renote() {
+		renote(viaKeyboard = false) {
 			(this as any).os.new(MkRenoteFormWindow, {
-				note: this.p
+				note: this.p,
 				animation: !viaKeyboard
 			}).$once('closed', this.focus);
 		},
 		renoteDirectly() {
 			(this as any).api('notes/create', {
 				renoteId: this.p.id
 			});
 		},
 		react(viaKeyboard = false) {
 			this.blur();
 			(this as any).os.new(MkReactionPicker, {
@@ -252,13 +278,25 @@ export default Vue.extend({
 			}).$once('closed', this.focus);
 		},
-		menu() {
+		reactDirectly(reaction) {
 			(this as any).api('notes/reactions/create', {
 				noteId: this.p.id,
 				reaction: reaction
 			});
 		},
 		menu(viaKeyboard = false) {
 			(this as any).os.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
-				note: this.p
+				note: this.p,
 				animation: !viaKeyboard
 			}).$once('closed', this.focus);
 		},
 		toggleShowContent() {
 			this.showContent = !this.showContent;
 		},
 		focus() {
 			this.$el.focus();
 		},
@@ -279,13 +317,11 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.note
 root(isDark)
 	margin 0
 	padding 0
-	background isDark ? #282C37 : #fff
+	background var(--face)
-	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+	border-bottom solid 1px var(--faceDivider)
 	&[data-round]
 		&:first-child
@@ -310,7 +346,7 @@ root(isDark)
 			right 2px
 			bottom 2px
 			left 2px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 4px
 	> .renote
@@ -319,8 +355,8 @@ root(isDark)
 		padding 16px 32px 8px 32px
 		line-height 28px
 		white-space pre
-		color #9dbb00
+		color var(--renoteText)
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 		.avatar
 			display inline-block
@@ -360,7 +396,7 @@ root(isDark)
 		&:hover
 			> .main > footer > button
-				color isDark ? #707b97 : #888
+				color var(--noteActionsHighlighted)
 		> .avatar
 			flex-shrink 0
@@ -388,7 +424,7 @@ root(isDark)
 					margin 0
 					padding 0
 					overflow-wrap break-word
-					color isDark ? #fff : #717171
+					color var(--noteText)
 					> .text
 						margin-right 8px
@@ -401,7 +437,7 @@ root(isDark)
 						margin 0
 						padding 0
 						overflow-wrap break-word
-						color isDark ? #fff : #717171
+						color var(--noteText)
 						>>> .title
 							display block
@@ -409,7 +445,7 @@ root(isDark)
 							padding 4px
 							font-size 90%
 							text-align center
-							background isDark ? #2f3944 : #eef1f3
+							background var(--mfmTitleBg)
 							border-radius 4px
 						>>> .code
@@ -418,17 +454,17 @@ root(isDark)
 						>>> .quote
 							margin 8px
 							padding 6px 12px
-							color isDark ? #6f808e : #aaa
+							color var(--mfmQuote)
-							border-left solid 3px isDark ? #637182 : #eee
+							border-left solid 3px var(--mfmQuoteLine)
 						> .reply
 							margin-right 8px
-							color isDark ? #99abbf : #717171
+							color var(--text)
 						> .rp
 							margin-left 4px
 							font-style oblique
-							color #a0bf46
+							color var(--renoteText)
 					> .location
 						margin 4px 0
@@ -453,7 +489,7 @@ root(isDark)
 						> *
 							padding 16px
-							border dashed 1px isDark ? #4e945e : #c0dac6
+							border dashed 1px var(--quoteBorder)
 							border-radius 8px
 			> footer
@@ -462,22 +498,22 @@ root(isDark)
 					padding 0 8px
 					line-height 32px
 					font-size 1em
-					color isDark ? #606984 : #ddd
+					color var(--noteActions)
 					background transparent
 					border none
 					cursor pointer
 					&:hover
-						color isDark ? #a1a8bf : #444
+						color var(--noteActionsHover)
 					&.replyButton:hover
-						color #0af
+						color var(--noteActionsReplyHover)
 					&.renoteButton:hover
-						color #8d0
+						color var(--noteActionsRenoteHover)
 					&.reactionButton:hover
-						color #fa0
+						color var(--noteActionsReactionHover)
 					> .count
 						display inline
@@ -485,18 +521,12 @@ root(isDark)
 						color #999
 					&.reacted, &.reacted:hover
-						color #fa0
+						color var(--noteActionsReactionHover)
 	> .detail
 		padding-top 4px
 		background rgba(#000, 0.0125)
 .note[data-darkmode]
 	root(true)
 .note:not([data-darkmode])
 	root(false)
 </style>
 <style lang="stylus" module>
@@ -519,7 +549,7 @@ root(isDark)
 		padding 0 4px
 		margin-left 4px
 		font-size 80%
-		color $theme-color-foreground
+		color var(--primaryForeground)
-		background $theme-color
+		background var(--primary)
 		border-radius 4px
 </style>
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -10,7 +10,7 @@
 	</div>
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div">
+	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div" ref="notes">
 		<template v-for="(note, i) in _notes">
 			<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" ref="note"/>
 			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
@@ -89,7 +89,7 @@ export default Vue.extend({
 		},
 		focus() {
-			(this.$refs.note as any)[0].focus();
+			(this.$refs.notes as any).children[0].focus ? (this.$refs.notes as any).children[0].focus() : (this.$refs.notes as any).$el.children[0].focus();
 		},
 		onNoteUpdated(i, note) {
@@ -216,9 +216,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-notes
 root(isDark)
 	.transition
 		.mk-notes-enter
 		.mk-notes-leave-to
@@ -235,9 +233,9 @@ root(isDark)
 			line-height 32px
 			font-size 14px
 			text-align center
-			color isDark ? #666b79 : #aaa
+			color var(--dateDividerFg)
-			background isDark ? #242731 : #fdfdfd
+			background var(--dateDividerBg)
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 			span
 				margin 0 16px
@@ -250,7 +248,7 @@ root(isDark)
 		position sticky
 		z-index 100
 		height 3px
-		background $theme-color
+		background var(--primary)
 	> footer
 		> button
@@ -260,21 +258,15 @@ root(isDark)
 			width 100%
 			text-align center
 			color #ccc
-			background isDark ? #282C37 : #fff
+			background var(--face)
-			border-top solid 1px isDark ? #1c2023 : #eaeaea
+			border-top solid 1px var(--faceDivider)
 			border-bottom-left-radius 6px
 			border-bottom-right-radius 6px
 			&:hover
-				background isDark ? #2e3440 : #f5f5f5
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 			&:active
-				background isDark ? #21242b : #eee
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 .mk-notes[data-darkmode]
 	root(true)
 .mk-notes:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -191,7 +191,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.mk-notifications
 	.transition
 		.mk-notifications-enter
 		.mk-notifications-leave-to
@@ -208,7 +208,7 @@ root(isDark)
 				padding 16px
 				overflow-wrap break-word
 				font-size 13px
-				border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
+				border-bottom solid 1px var(--faceDivider)
 				&:last-child
 					border-bottom none
@@ -219,7 +219,7 @@ root(isDark)
 					top 16px
 					right 12px
 					vertical-align top
-					color isDark ? #606984 : rgba(#000, 0.6)
+					color var(--noteHeaderInfo)
 					font-size small
 				&:after
@@ -249,10 +249,10 @@ root(isDark)
 							margin-right 4px
 				.note-preview
-					color isDark ? #c2cad4 : rgba(#000, 0.7)
+					color var(--noteText)
 				.note-ref
-					color isDark ? #c2cad4 : rgba(#000, 0.7)
+					color var(--noteText)
 					[data-fa]
 						font-size 1em
@@ -283,9 +283,9 @@ root(isDark)
 				line-height 32px
 				text-align center
 				font-size 0.8em
-				color isDark ? #666b79 : #aaa
+				color var(--dateDividerFg)
-				background isDark ? #242731 : #fdfdfd
+				background var(--dateDividerBg)
-				border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
+				border-bottom solid 1px var(--faceDivider)
 				span
 					margin 0 16px
@@ -327,10 +327,4 @@ root(isDark)
 		> [data-fa]
 			margin-right 4px
 .mk-notifications[data-darkmode]
 	root(true)
 .mk-notifications:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/post-form-window.vue
+++ b/src/client/app/desktop/views/components/post-form-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window class="mk-post-form-window" ref="window" is-modal @closed="onWindowClosed">
+<mk-window class="mk-post-form-window" ref="window" is-modal @closed="onWindowClosed" :animation="animation">
 	<span slot="header" class="mk-post-form-window--header">
 		<span class="icon" v-if="geo">%fa:map-marker-alt%</span>
 		<span v-if="!reply">%i18n:@note%</span>
@@ -25,7 +25,19 @@
 import Vue from 'vue';
 export default Vue.extend({
-	props: ['reply'],
+	props: {
 		reply: {
 			type: Object,
 			required: false
 		},
 		animation: {
 			type: Boolean,
 			required: false,
 			default: true
 		}
 	},
 	data() {
 		return {
 			uploadings: [],
@@ -33,11 +45,13 @@ export default Vue.extend({
 			geo: null
 		};
 	},
 	mounted() {
 		this.$nextTick(() => {
 			(this.$refs.form as any).focus();
 		});
 	},
 	methods: {
 		onChangeUploadings(files) {
 			this.uploadings = files;
@@ -63,7 +77,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-root(isDark)
+.mk-post-form-window
 	.mk-post-form-window--header
 		.icon
 			margin-right 8px
@@ -80,15 +94,6 @@ root(isDark)
 	.mk-post-form-window--body
 		.notePreview
 			if isDark
 				margin 16px 22px 0 22px
 			else
 				margin 16px 22px
 .mk-post-form-window[data-darkmode]
 	root(true)
 .mk-post-form-window:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -178,6 +178,18 @@ export default Vue.extend({
 			});
 		}
 		// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
 		if (this.reply && ['home', 'followers', 'specified', 'private'].includes(this.reply.visibility)) {
 			this.visibility = this.reply.visibility;
 		}
 		// ダイレクトへのリプライはリプライ先ユーザーを初期設定
 		if (this.reply && this.reply.visibility === 'specified') {
 			(this as any).api('users/show', {	userId: this.reply.userId }).then(user => {
 				this.visibleUsers.push(user);
 			});
 		}
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
 			if (!this.instant) {
@@ -434,12 +446,10 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-post-form
 root(isDark)
 	display block
 	padding 16px
-	background isDark ? #282C37 : lighten($theme-color, 95%)
+	background var(--desktopPostFormBg)
 	&:after
 		content ""
@@ -453,26 +463,26 @@ root(isDark)
 			width 100%
 			padding 12px
 			font-size 16px
-			color isDark ? #fff : #333
+			color var(--desktopPostFormTextareaFg)
-			background isDark ? #191d23 : #fff
+			background var(--desktopPostFormTextareaBg)
 			outline none
-			border solid 1px rgba($theme-color, 0.1)
+			border solid 1px var(--primaryAlpha01)
 			border-radius 4px
 			transition border-color .2s ease
 			&:hover
-				border-color rgba($theme-color, 0.2)
+				border-color var(--primaryAlpha02)
 				transition border-color .1s ease
 			&:focus
-				border-color rgba($theme-color, 0.5)
+				border-color var(--primaryAlpha05)
 				transition border-color 0s ease
 			&:disabled
 				opacity 0.5
 			&::-webkit-input-placeholder
-				color rgba($theme-color, 0.3)
+				color var(--primaryAlpha03)
 		> input
 			margin-bottom 8px
@@ -486,17 +496,17 @@ root(isDark)
 			&:hover
 				& + *
 				& + * + *
-					border-color rgba($theme-color, 0.2)
+					border-color var(--primaryAlpha02)
 					transition border-color .1s ease
 			&:focus
 				& + *
 				& + * + *
-					border-color rgba($theme-color, 0.5)
+					border-color var(--primaryAlpha05)
 					transition border-color 0s ease
 			&.with
-				border-bottom solid 1px rgba($theme-color, 0.1) !important
+				border-bottom solid 1px var(--primaryAlpha01) !important
 				border-radius 4px 4px 0 0
 		> .visibleUsers
@@ -505,7 +515,7 @@ root(isDark)
 			> span
 				margin-right 16px
-				color isDark ? #fff : #666
+				color var(--primary)
 		> .hashtags
 			margin 0 0 8px 0
@@ -514,7 +524,7 @@ root(isDark)
 			font-size 14px
 			> b
-				color isDark ? #9baec8 : darken($theme-color, 20%)
+				color var(--primary)
 			> *
 				margin-right 8px
@@ -523,14 +533,14 @@ root(isDark)
 		> .files
 			margin 0
 			padding 0
-			background isDark ? #181b23 : lighten($theme-color, 98%)
+			background var(--desktopPostFormTextareaBg)
-			border solid 1px rgba($theme-color, 0.1)
+			border solid 1px var(--primaryAlpha01)
 			border-top none
 			border-radius 0 0 4px 4px
 			transition border-color .3s ease
 			&.with
-				border-bottom solid 1px rgba($theme-color, 0.1) !important
+				border-bottom solid 1px var(--primaryAlpha01) !important
 				border-radius 0
 			> .remain
@@ -540,7 +550,7 @@ root(isDark)
 				right 8px
 				margin 0
 				padding 0
-				color rgba($theme-color, 0.4)
+				color var(--primaryAlpha04)
 			> div
 				padding 4px
@@ -574,8 +584,8 @@ root(isDark)
 						cursor pointer
 		> .mk-poll-editor
-			background isDark ? #181b23 : lighten($theme-color, 98%)
+			background var(--desktopPostFormTextareaBg)
-			border solid 1px rgba($theme-color, 0.1)
+			border solid 1px var(--primaryAlpha01)
 			border-top none
 			border-radius 0 0 4px 4px
 			transition border-color .3s ease
@@ -583,7 +593,7 @@ root(isDark)
 	> .mk-uploader
 		margin 8px 0 0 0
 		padding 8px
-		border solid 1px rgba($theme-color, 0.2)
+		border solid 1px var(--primaryAlpha02)
 		border-radius 4px
 	input[type='file']
@@ -600,22 +610,20 @@ root(isDark)
 		width 110px
 		height 40px
 		font-size 1em
-		color $theme-color-foreground
+		color var(--primaryForeground)
-		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+		background var(--primary)
 		outline none
-		border solid 1px lighten($theme-color, 15%)
+		border none
 		border-radius 4px
 		&:not(:disabled)
 			font-weight bold
 		&:hover:not(:disabled)
-			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+			background var(--primaryLighten5)
 			border-color $theme-color
 		&:active:not(:disabled)
-			background $theme-color
+			background var(--primaryDarken5)
 			border-color $theme-color
 		&:focus
 			&:after
@@ -626,7 +634,7 @@ root(isDark)
 				right -5px
 				bottom -5px
 				left -5px
-				border 2px solid rgba($theme-color, 0.3)
+				border 2px solid var(--primaryAlpha03)
 				border-radius 8px
 		&:disabled
@@ -636,13 +644,13 @@ root(isDark)
 		&.wait
 			background linear-gradient(
 				45deg,
-				darken($theme-color, 10%) 25%,
+				var(--primaryDarken10) 25%,
-				$theme-color              25%,
+				var(--primary)              25%,
-				$theme-color              50%,
+				var(--primary)              50%,
-				darken($theme-color, 10%) 50%,
+				var(--primaryDarken10) 50%,
-				darken($theme-color, 10%) 75%,
+				var(--primaryDarken10) 75%,
-				$theme-color              75%,
+				var(--primary)              75%,
-				$theme-color
+				var(--primary)
 			)
 			background-size 32px 32px
 			animation stripe-bg 1.5s linear infinite
@@ -661,7 +669,7 @@ root(isDark)
 		right 138px
 		margin 0
 		line-height 40px
-		color rgba($theme-color, 0.5)
+		color var(--primaryAlpha05)
 		&.over
 			color #ec3828
@@ -679,7 +687,7 @@ root(isDark)
 		width 40px
 		height 40px
 		font-size 1em
-		color isDark ? $theme-color : rgba($theme-color, 0.5)
+		color var(--desktopPostFormTransparentButtonFg)
 		background transparent
 		outline none
 		border solid 1px transparent
@@ -687,12 +695,12 @@ root(isDark)
 		&:hover
 			background transparent
-			border-color isDark ? rgba($theme-color, 0.5) : rgba($theme-color, 0.3)
+			border-color var(--primaryAlpha03)
 		&:active
-			color rgba($theme-color, 0.6)
+			color var(--primaryAlpha06)
-			background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
+			background linear-gradient(to bottom, var(--desktopPostFormTransparentButtonActiveGradientStart) 0%, var(--desktopPostFormTransparentButtonActiveGradientEnd) 100%)
-			border-color rgba($theme-color, 0.5)
+			border-color var(--primaryAlpha05)
 			box-shadow 0 2px 4px rgba(#000, 0.15) inset
 		&:focus
@@ -704,7 +712,7 @@ root(isDark)
 				right -5px
 				bottom -5px
 				left -5px
-				border 2px solid rgba($theme-color, 0.3)
+				border 2px solid var(--primaryAlpha03)
 				border-radius 8px
 	> .dropzone
@@ -713,13 +721,7 @@ root(isDark)
 		top 0
 		width 100%
 		height 100%
-		border dashed 2px rgba($theme-color, 0.5)
+		border dashed 2px var(--primaryAlpha05)
 		pointer-events none
 .mk-post-form[data-darkmode]
 	root(true)
 .mk-post-form:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/progress-dialog.vue
+++ b/src/client/app/desktop/views/components/progress-dialog.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" module>
-@import '~const.styl'
+
 .body
 	padding 18px 24px 24px 24px
@@ -53,7 +53,7 @@ export default Vue.extend({
 	margin 0 0 4px 0
 	text-align center
 	line-height 16px
-	color rgba($theme-color, 0.7)
+	color var(--primaryAlpha07)
 	&:after
 		content '%'
@@ -69,21 +69,21 @@ export default Vue.extend({
 	overflow hidden
 	&::-webkit-progress-value
-		background $theme-color
+		background var(--primary)
 	&::-webkit-progress-bar
-		background rgba($theme-color, 0.1)
+		background var(--primaryAlpha01)
 .waiting
 	background linear-gradient(
 		45deg,
-		lighten($theme-color, 30%) 25%,
+		var(--primaryLighten30) 25%,
-		$theme-color               25%,
+		var(--primary)               25%,
-		$theme-color               50%,
+		var(--primary)               50%,
-		lighten($theme-color, 30%) 50%,
+		var(--primaryLighten30) 50%,
-		lighten($theme-color, 30%) 75%,
+		var(--primaryLighten30) 75%,
-		$theme-color               75%,
+		var(--primary)               75%,
-		$theme-color
+		var(--primary)
 	)
 	background-size 32px 32px
 	animation progress-dialog-tag-progress-waiting 1.5s linear infinite
--- a/src/client/app/desktop/views/components/received-follow-requests-window.vue
+++ b/src/client/app/desktop/views/components/received-follow-requests-window.vue
@@ -2,7 +2,7 @@
 <mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
 	<span slot="header">%fa:envelope R% %i18n:@title%</span>
-	<div class="slpqaxdoxhvglersgjukmvizkqbmbokc" :data-darkmode="$store.state.device.darkmode">
+	<div class="slpqaxdoxhvglersgjukmvizkqbmbokc">
 		<div v-for="req in requests">
 			<router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link>
 			<span>
@@ -47,8 +47,7 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-
+.slpqaxdoxhvglersgjukmvizkqbmbokc
 root(isDark)
 	padding 16px
 	> button
@@ -57,16 +56,10 @@ root(isDark)
 	> div
 		display flex
 		padding 16px
-		border solid 1px isDark ? #1c2023 : #eee
+		border solid 1px var(--faceDivider)
 		border-radius 4px
 		> span
 			margin 0 0 0 auto
 .slpqaxdoxhvglersgjukmvizkqbmbokc[data-darkmode]
 	root(true)
 .slpqaxdoxhvglersgjukmvizkqbmbokc:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/renote-form-window.vue
+++ b/src/client/app/desktop/views/components/renote-form-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" is-modal @closed="onWindowClosed">
+<mk-window ref="window" is-modal @closed="onWindowClosed" :animation="animation">
 	<span slot="header" :class="$style.header">%fa:retweet%%i18n:@title%</span>
 	<mk-renote-form ref="form" :note="note" @posted="onPosted" @canceled="onCanceled" v-hotkey.global="keymap"/>
 </mk-window>
@@ -9,13 +9,25 @@
 import Vue from 'vue';
 export default Vue.extend({
-	props: ['note'],
+	props: {
 		note: {
 			type: Object,
 			required: true
 		},
 		animation: {
 			type: Boolean,
 			required: false,
 			default: true
 		}
 	},
 	computed: {
 		keymap(): any {
 			return {
 				'esc': this.close,
-				'ctrl+enter': this.post
+				'enter': this.post,
 				'q': this.quote,
 			};
 		}
 	},
@@ -24,6 +36,9 @@ export default Vue.extend({
 		post() {
 			(this.$refs.form as any).ok();
 		},
 		quote() {
 			(this.$refs.form as any).onQuote();
 		},
 		close() {
 			(this.$refs.window as any).close();
 		},
--- a/src/client/app/desktop/views/components/renote-form.vue
+++ b/src/client/app/desktop/views/components/renote-form.vue
@@ -4,8 +4,8 @@
 	<template v-if="!quote">
 		<footer>
 			<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
-			<button class="ui cancel" @click="cancel">%i18n:@cancel%</button>
+			<ui-button class="button cancel" inline @click="cancel">%i18n:@cancel%</ui-button>
-			<button class="ui primary ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</button>
+			<ui-button class="button ok" inline primary @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</ui-button>
 		</footer>
 	</template>
 	<template v-if="quote">
@@ -57,16 +57,13 @@ export default Vue.extend({
 </script>
 <style lang="stylus" scoped>
-@import '~const.styl'
+.mk-renote-form
 root(isDark)
 	> .preview
 		margin 16px 22px
 	> footer
 		height 72px
-		background isDark ? #313543 : lighten($theme-color, 95%)
+		background var(--desktopRenoteFormFooter)
 		> .quote
 			position absolute
@@ -74,7 +71,7 @@ root(isDark)
 			left 28px
 			line-height 40px
-		button
+		> .button
 			display block
 			position absolute
 			bottom 16px
@@ -87,10 +84,4 @@ root(isDark)
 			&.ok
 				right 16px
 .mk-renote-form[data-darkmode]
 	root(true)
 .mk-renote-form:not([data-darkmode])
 	root(false)
 </style>
--- a/src/client/app/desktop/views/components/settings.profile.vue
+++ b/src/client/app/desktop/views/components/settings.profile.vue
@@ -6,31 +6,28 @@
 		<button class="ui" @click="updateAvatar">%i18n:@choice-avatar%</button>
 	</label>
 	<label class="ui from group">
-		<p>%i18n:@name%</p>
+		<ui-input v-model="name" type="text">%i18n:@name%</ui-input>
 		<input v-model="name" type="text" class="ui"/>
 	</label>
 	<label class="ui from group">
-		<p>%i18n:@location%</p>
+		<ui-input v-model="location" type="text">%i18n:@location%</ui-input>
 		<input v-model="location" type="text" class="ui"/>
 	</label>
 	<label class="ui from group">
-		<p>%i18n:@description%</p>
+		<ui-textarea v-model="description">%i18n:@description%</ui-textarea>
 		<textarea v-model="description" class="ui"></textarea>
 	</label>
 	<label class="ui from group">
 		<p>%i18n:@birthday%</p>
 		<input type="date" v-model="birthday"/>
 	</label>
-	<button class="ui primary" @click="save">%i18n:@save%</button>
+	<ui-button primary @click="save">%i18n:@save%</ui-button>
 	<section>
 		<h2>%i18n:@locked-account%</h2>
-		<mk-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked" text="%i18n:@is-locked%"/>
+		<ui-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked">%i18n:@is-locked%</ui-switch>
 	</section>
 	<section>
 		<h2>%i18n:@other%</h2>
-		<mk-switch v-model="$store.state.i.isBot" @change="onChangeIsBot" text="%i18n:@is-bot%"/>
+		<ui-switch v-model="$store.state.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</ui-switch>
-		<mk-switch v-model="$store.state.i.isCat" @change="onChangeIsCat" text="%i18n:@is-cat%"/>
+		<ui-switch v-model="$store.state.i.isCat" @change="onChangeIsCat">%i18n:@is-cat%</ui-switch>
-		<mk-switch v-model="alwaysMarkNsfw" text="%i18n:common.always-mark-nsfw%"/>
+		<ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
 	</section>
 </div>
 </template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
syuilo	b8b4991a46	8.63.0	2018-09-29 00:51:13 +09:00
syuilo	8b68c5da37	Merge pull request #2781 from syuilo/theme Theme	2018-09-29 00:48:56 +09:00
syuilo	f26e641905	wip	2018-09-29 00:48:02 +09:00
syuilo	57669c9c03	wip	2018-09-29 00:44:23 +09:00
syuilo	094d873f2e	wip	2018-09-29 00:20:49 +09:00
syuilo	7b42653271	wip	2018-09-29 00:03:28 +09:00
syuilo	6a82e94c54	wip	2018-09-29 00:01:11 +09:00
syuilo	1fa4d0d3f8	wip	2018-09-28 21:48:53 +09:00
MeiMei	d5818214f3	Fix 'URL is not defined' in MFM (#2782 )	2018-09-28 20:54:14 +09:00
syuilo	0c63ec8157	wip	2018-09-28 20:39:32 +09:00
syuilo	8317a219a5	wip	2018-09-28 20:11:11 +09:00
syuilo	ec652dd0ac	wip	2018-09-28 20:03:14 +09:00
syuilo	8e3dd75c85	wip	2018-09-28 19:59:19 +09:00
syuilo	3f4de3b1cc	wip	2018-09-28 17:49:37 +09:00
syuilo	e0d3fd17ce	wio	2018-09-28 16:13:47 +09:00
syuilo	671c7cf06b	wip	2018-09-28 16:08:09 +09:00
syuilo	99a2c5b3fa	wip	2018-09-28 15:58:23 +09:00
syuilo	0343de95b8	wip	2018-09-28 15:56:50 +09:00
syuilo	13f258308e	wip	2018-09-28 15:34:34 +09:00
syuilo	c627288bde	wip	2018-09-28 14:26:20 +09:00
syuilo	1eef90f6cb	wip	2018-09-28 14:03:55 +09:00
syuilo	29476ea3da	wip	2018-09-28 12:20:22 +09:00
syuilo	7609741680	wip	2018-09-28 12:13:08 +09:00
syuilo	5df85b5feb	wip	2018-09-28 12:10:15 +09:00
syuilo	b4a4d784c3	wip	2018-09-28 12:07:28 +09:00
syuilo	d715af0620	wip	2018-09-28 11:49:32 +09:00
syuilo	fe8c384618	wip	2018-09-28 11:45:34 +09:00
syuilo	47d4de75da	wip	2018-09-28 11:44:23 +09:00
syuilo	016c7fd2c4	wip	2018-09-28 11:43:15 +09:00
syuilo	7ca5e33a3a	wip	2018-09-28 11:40:47 +09:00
syuilo	436773837b	wip	2018-09-28 11:23:30 +09:00
syuilo	fccfe19e13	wip	2018-09-28 11:18:56 +09:00
syuilo	18be0d36f3	wip	2018-09-28 10:50:59 +09:00
syuilo	9ea7de3564	wip	2018-09-28 10:14:58 +09:00
syuilo	d1dce76e28	wip	2018-09-28 01:05:09 +09:00
syuilo	f4bf824e79	wip	2018-09-28 00:51:17 +09:00
syuilo	cbf5d4b71d	wip	2018-09-28 00:48:17 +09:00
syuilo	61e5cb2041	wip	2018-09-27 23:55:05 +09:00
syuilo	38a6aa26bc	wip	2018-09-27 23:17:33 +09:00
syuilo	32942709bf	wip	2018-09-27 23:09:23 +09:00
syuilo	a0305c4c04	wip	2018-09-27 23:02:59 +09:00
syuilo	74be1c81b1	wip	2018-09-27 22:59:56 +09:00
syuilo	e82a44c03d	wip	2018-09-27 22:55:17 +09:00
syuilo	1e9eeeb980	wip	2018-09-27 22:50:34 +09:00
syuilo	0c7111b438	wip	2018-09-27 22:30:52 +09:00
syuilo	ef74653a4b	wip	2018-09-27 22:25:10 +09:00
syuilo	b032f78769	wip	2018-09-27 21:43:11 +09:00
syuilo	7a0a8b5d2b	wip	2018-09-27 19:32:06 +09:00
syuilo	459b374d61	wip	2018-09-27 19:14:35 +09:00
syuilo	cc6af402be	wip	2018-09-27 18:01:23 +09:00
syuilo	f3eeadcd8f	wip	2018-09-27 17:42:51 +09:00
syuilo	5b0b83faa7	wip	2018-09-27 17:29:57 +09:00
syuilo	5f289e4767	wip	2018-09-27 16:58:00 +09:00
syuilo	a36d73cb52	wip	2018-09-27 16:49:18 +09:00
syuilo	9e319006f3	wip	2018-09-27 15:19:11 +09:00
syuilo	7b8a2aef0f	wip	2018-09-27 14:52:10 +09:00
syuilo	4fe2f29478	wip	2018-09-27 14:32:48 +09:00
syuilo	76a25917c0	wip	2018-09-27 13:54:53 +09:00
syuilo	df6c9b1a1c	wip	2018-09-27 12:55:10 +09:00
syuilo	0ef64a6d0b	wip	2018-09-27 11:55:17 +09:00
syuilo	1eb6ad58d5	wip	2018-09-27 02:46:53 +09:00
syuilo	49f8cfb0db	wip	2018-09-27 02:35:13 +09:00
syuilo	15a8b4c6e5	wip	2018-09-27 02:18:54 +09:00
syuilo	97d68d7b31	example commit	2018-09-27 02:02:07 +09:00
syuilo	4dde54e344	Clean up	2018-09-27 01:58:37 +09:00
syuilo	3304cc106e	wip	2018-09-27 01:54:10 +09:00
syuilo	dabda21eb7	wip	2018-09-27 01:44:05 +09:00
syuilo	0a64f638c6	wip	2018-09-27 01:32:04 +09:00
syuilo	3cbdfcb43d	wip	2018-09-27 00:54:37 +09:00
syuilo	b6e33e93de	wip	2018-09-26 20:47:11 +09:00
MeiMei	77b441f14c	リプライで元の公開範囲を引き継ぐ (#2775 ) * ホーム/フォロワー限定へのリプライは公開範囲を引き継ぐように * ダイレクトへのリプライはダイレクトでリプライ先ユーザーを初期設定するように * 非公開へのリプライでも元の公開範囲を引き継ぐ	2018-09-26 20:39:59 +09:00
syuilo	297019c22c	example commit	2018-09-26 20:38:16 +09:00
syuilo	f5f2215b47	wip	2018-09-26 20:28:13 +09:00
syuilo	904114740b	wip	2018-09-26 20:19:35 +09:00
syuilo	d2d3f7810e	wip	2018-09-26 19:14:11 +09:00
syuilo	2b07b3a873	wip	2018-09-26 18:59:37 +09:00
syuilo	f6e4a1770e	8.62.0	2018-09-25 21:38:31 +09:00
syuilo	31006507c0	ビルドごとにバージョンを変えるのを廃止	2018-09-25 21:28:06 +09:00
syuilo	9ca6a6bf06	サーバーへの接続が不安定な時にサインアウトしないように	2018-09-25 21:23:26 +09:00
syuilo	afdacf14b7	Add excludeNsfw option	2018-09-25 21:09:38 +09:00
syuilo	5da18ba535	Fix #2766	2018-09-25 20:44:26 +09:00
syuilo	e6cc937ac2	Check meta key	2018-09-24 20:57:32 +09:00
syuilo	87091a2e03	8.61.0	2018-09-24 16:32:51 +09:00
syuilo	59d67d3140	ピン留めを解除することができるようにしたり	2018-09-24 16:26:12 +09:00
syuilo	7b4c307c46	🎨	2018-09-24 16:07:23 +09:00
syuilo	92484be87f	Resolve #2762	2018-09-24 16:02:01 +09:00
syuilo	56b8f8b07d	8.60.0	2018-09-24 08:04:45 +09:00
syuilo	722de35037	Add stats link	2018-09-24 08:02:07 +09:00
syuilo	d93f76c1af	ブロッカーへの警告はログイン時のみ表示するように	2018-09-24 08:00:10 +09:00
MeiMei	cba0dd5e17	Fix AP request error message is to long (#2760 )	2018-09-24 07:35:39 +09:00
syuilo	a2e2d5ba77	非ログイン時のユーザーページにインスタンスの紹介を表示するように	2018-09-23 19:55:15 +09:00
syuilo	61e05cb50e	8.59.0	2018-09-23 16:13:33 +09:00
syuilo	49e82adc6c	mentionsを読み込むときも既読にするように	2018-09-23 16:05:46 +09:00
syuilo	e4e668b327	Improve performance	2018-09-23 16:05:26 +09:00
syuilo	8028c85c67	ダークモードのキーボードショートカット追加	2018-09-23 07:59:48 +09:00
syuilo	28cb9cae51	8.58.0	2018-09-22 20:44:05 +09:00
greenkeeper[bot]	7f2eb64131	fix(package): update @types/node to version 10.10.3 (#2753 )	2018-09-22 20:42:05 +09:00
syuilo	3e5330a92b	🎨	2018-09-22 20:39:12 +09:00
syuilo	93e5e4afc0	🎨	2018-09-22 20:11:13 +09:00
syuilo	aa5528d11e	🎨	2018-09-22 19:59:37 +09:00
syuilo	251629ab61	🎨	2018-09-22 15:58:11 +09:00
syuilo	82d94b5963	Fix #2747	2018-09-22 08:49:14 +09:00
syuilo	8240901332	Merge pull request #2749 from syuilo/l10n_develop New Crowdin translations	2018-09-22 05:12:06 +09:00
greenkeeper[bot]	0a870b8e7e	fix(package): update @types/node to version 10.10.2 (#2750 )	2018-09-22 05:11:53 +09:00
syuilo	88dd653fa5	New translations ja-JP.yml (Japanese, Kansai)	2018-09-22 03:31:27 +09:00
syuilo	b712b70330	New translations ja-JP.yml (Japanese, Kansai)	2018-09-22 03:22:07 +09:00
syuilo	a018c2f09f	New translations ja-JP.yml (Japanese, Kansai)	2018-09-22 03:12:07 +09:00
syuilo	04c16e53a5	New translations ja-JP.yml (Japanese, Kansai)	2018-09-22 03:01:43 +09:00
syuilo	5e89e73f76	New translations ja-JP.yml (Japanese, Kansai)	2018-09-22 02:51:52 +09:00
syuilo	2c9432d7a9	New translations ja-JP.yml (Japanese, Kansai)	2018-09-22 02:41:58 +09:00
syuilo	19d1775b36	New translations ja-JP.yml (Japanese, Kansai)	2018-09-22 02:31:58 +09:00
syuilo	ecc235c545	Fix bug	2018-09-21 16:43:46 +09:00
syuilo	382b1d2250	8.57.1	2018-09-21 08:40:12 +09:00
syuilo	629693355a	Merge branch 'develop' of https://github.com/syuilo/misskey into develop	2018-09-21 08:37:39 +09:00
syuilo	00a3f8d392	Fix #2741	2018-09-21 08:37:26 +09:00
greenkeeper[bot]	80b6e8090e	fix(package): update @types/bcryptjs to version 2.4.2 (#2742 )	2018-09-21 08:35:06 +09:00
syuilo	a5f817d896	Fix #2744	2018-09-21 08:33:24 +09:00
syuilo	51b0244cf2	fix(package): update websocket to version 1.0.28 (#2746 ) Closes #2743	2018-09-21 04:30:29 +09:00
syuilo	01131e2606	8.57.0	2018-09-20 17:23:55 +09:00
greenkeeper[bot]	6283b7668e	fix(package): update @types/koa-router to version 7.0.32 (#2740 )	2018-09-20 17:23:26 +09:00
syuilo	d058ecc4ea	Resolve #2698	2018-09-20 17:21:16 +09:00
syuilo	77a0450b5d	🎨	2018-09-20 16:21:51 +09:00
syuilo	1dd1b9084f	Merge branch 'develop' of https://github.com/syuilo/misskey into develop	2018-09-20 16:16:08 +09:00
syuilo	6341807d02	🎨	2018-09-20 16:16:01 +09:00
greenkeeper[bot]	51a1f30225	fix(package): update @types/webpack to version 4.4.12 (#2739 )	2018-09-20 06:29:03 +09:00
syuilo	5422482696	Resolve #1153	2018-09-20 06:27:41 +09:00
syuilo	cd7f8b080e	Fix #2738	2018-09-20 04:56:24 +09:00
syuilo	faf29b768f	Make admin can delete any note	2018-09-19 17:29:03 +09:00
syuilo	7576569dc9	8.56.0	2018-09-19 14:24:40 +09:00
syuilo	ea3bcbbc37	キャッシュの設定を調整	2018-09-19 14:22:46 +09:00
syuilo	d9f0e158a3	Implement #2736	2018-09-19 14:18:34 +09:00
syuilo	195f676500	8.55.0	2018-09-19 08:38:18 +09:00
syuilo	a9a2f4820b	Add keyboard shortcut doc	2018-09-19 08:36:06 +09:00
MeiMei	8414db57f0	Specify AP Cache-Control (#2735 )	2018-09-19 07:17:19 +09:00
syuilo	609d68933e	Add new shortcut	2018-09-19 02:51:06 +09:00
syuilo	a23b8cebbc	8.54.0	2018-09-19 02:41:09 +09:00
greenkeeper[bot]	89f6b03cd6	fix(package): update web-push to version 3.3.3 (#2733 )	2018-09-19 02:39:57 +09:00
greenkeeper[bot]	7bc9de03a6	fix(package): update webpack to version 4.19.1 (#2732 )	2018-09-19 02:39:15 +09:00
syuilo	3c865d6054	Add new shortcut	2018-09-19 02:35:32 +09:00
syuilo	fd770b008e	Add new shortcut	2018-09-19 02:32:44 +09:00
syuilo	b0d60ef2c2	Add new shortcut	2018-09-19 02:27:19 +09:00
syuilo	7b9cea06ef	Fix	2018-09-19 02:26:06 +09:00
syuilo	30608d3e22	8.53.0	2018-09-18 16:45:55 +09:00
syuilo	8bf4e55338	Improve keyboard shortcuts	2018-09-18 16:45:20 +09:00
syuilo	6ead1de383	Improve readability	2018-09-18 15:02:26 +09:00
syuilo	3b628ec3c4	将来的にバグに繋がりかねない挙動を修正	2018-09-18 15:02:15 +09:00
syuilo	0ed704d173	8.52.0	2018-09-18 14:54:01 +09:00
syuilo	87b6ef0ec5	Improve keyboard shortcut	2018-09-18 14:53:17 +09:00
syuilo	5184a07cf2	Improve usability	2018-09-18 14:50:13 +09:00
syuilo	dba04cc59c	Improve keyboard shortcuts	2018-09-18 14:43:54 +09:00
syuilo	f4045fb5b3	Improve keyboard shortcuts	2018-09-18 14:39:18 +09:00
syuilo	16c36163b4	Fix bug	2018-09-18 14:35:46 +09:00
syuilo	1ac033ff18	Improve keyboard shortcut	2018-09-18 14:30:50 +09:00
syuilo	ccfd48232a	8.51.0	2018-09-18 13:14:42 +09:00
syuilo	429bf179dc	Refactor: Better type annotations	2018-09-18 13:14:17 +09:00
syuilo	8ba3fb13eb	Fix bug	2018-09-18 13:12:41 +09:00
MeiMei	11496d887e	Publish pinned notes (#2731 )	2018-09-18 13:08:27 +09:00