bump

fix
TheDesk 21.2.1 (Mayu)
2020-09-09 20:54:31 +09:00 · 2020-09-09 20:54:07 +09:00 · 2020-09-09 20:46:52 +09:00 · 2020-09-09 17:15:19 +09:00 · 2020-09-09 16:59:18 +09:00 · 2020-09-09 16:58:41 +09:00
44 changed files with 1077 additions and 897 deletions
--- a/.travis.yml
+++ b/.travis.yml
@@ -15,6 +15,20 @@ before_deploy:
  - cd app
  - VERSION=$(cat package.json | grep version | head -1 | awk -F= "{ print $2 }" | sed 's/[version:,\",]//g' | tr -d '[[:space:]]')
  - yarn install --no-lockfile --prod
+  - yarn construct:store
+  - if [ "$TRAVIS_OS_NAME" = "osx" ];then electron-builder --mac -p never;else :;fi
+  - if [ "$TRAVIS_OS_NAME" = "osx" ];then cd ../build;else :;fi
+  - if [ "$TRAVIS_OS_NAME" = "osx" ];then mv *.dmg TheDesk-$VERSION-store.dmg;else :;fi
+  - if [ "$TRAVIS_OS_NAME" = "osx" ];then cd ../app;else :;fi
+  - if [ "$TRAVIS_OS_NAME" = "linux" ];then electron-builder --linux snap:x64 -p never;else :;fi
+  - if [ "$TRAVIS_OS_NAME" = "linux" ];then cd ../build;else :;fi
+  - if [ "$TRAVIS_OS_NAME" = "linux" ];then mv *.snap TheDesk-$VERSION-store.snap;else :;fi
+  - if [ "$TRAVIS_OS_NAME" = "linux" ];then cd ../app;else :;fi
+  - if [ "$TRAVIS_OS_NAME" = "windows" ];then yarn add electron-builder;else :;fi
+  - if [ "$TRAVIS_OS_NAME" = "windows" ];then electron-builder --win appx:x64 -p never ;else :;fi
+  - if [ "$TRAVIS_OS_NAME" = "windows" ];then cd ../build;else :;fi
+  - if [ "$TRAVIS_OS_NAME" = "windows" ];then mv *.appx TheDesk-$VERSION-store.appx;else :;fi
+  - if [ "$TRAVIS_OS_NAME" = "windows" ];then cd ../app;else :;fi
  - yarn construct
  - if [ "$TRAVIS_OS_NAME" = "osx" ];then electron-builder --mac -p never;else :;fi
  - if [ "$TRAVIS_OS_NAME" = "linux" ];then electron-builder --linux --x64 -p never;else :;fi
@@ -22,7 +36,6 @@ before_deploy:
  - if [ "$TRAVIS_OS_NAME" = "linux" ];then ls;else :;fi
  - if [ "$TRAVIS_OS_NAME" = "linux" ];then mv thedesk-*.zip thedesk.zip;else :;fi
  - if [ "$TRAVIS_OS_NAME" = "linux" ];then cd ../app;else :;fi
-  - if [ "$TRAVIS_OS_NAME" = "windows" ];then yarn add electron-builder;else :;fi
  - if [ "$TRAVIS_OS_NAME" = "windows" ];then electron-builder --win --ia32 -p never;else :;fi
  - if [ "$TRAVIS_OS_NAME" = "windows" ];then cd ../build;else :;fi
  - if [ "$TRAVIS_OS_NAME" = "windows" ];then ls;else :;fi
--- a/README.md
+++ b/README.md
@@ -11,7 +11,10 @@
 Mastodon/Misskey client for PC(Windows/Linux/macOS)  
 オープンソースSNSマストドン/MisskeyのPC向けクライアント[日本語はこちら](README_ja.md)  
  
-Download:[TheDesk](https://thedesk.top) [![check](https://status.cutls.com/badge/?site=thedesk.top)](https://status.cutls.com)    
+Download:[TheDesk](https://thedesk.top) [![check](https://status.cutls.com/badge/?site=thedesk.top)](https://status.cutls.com)
+
+On GitHub Releases, `-store.*` assets are made for some application store or manager(Snapcraft, Homebrew, Microsoft Store). 
+They do not check the latest version(Which you can get the latest ver or not depends on the store)

 <a href="https://www.patreon.com/cutls"><img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" alt="Become a Patron!" width="160"></a>  
 <a href="https://liberapay.com/cutls/donate"><img alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg"></a>
--- a/README_ja.md
+++ b/README_ja.md
@@ -14,6 +14,8 @@ Download:[TheDesk](https://thedesk.top) [![check](https://status.cutls.com/badge

 [Pixiv FANBOX](https://www.pixiv.net/fanbox/creator/28105985)

+`-store.*`とあるアセットはストアやパッケージマネージャ向けのもので、アップデートの確認をソフト本体で行いません。
+
 ![Screenshots1](https://thedesk.top/img/scr1.png)  

 ## ライセンス
--- a/app/css/master.css
+++ b/app/css/master.css
@@ -6,7 +6,7 @@ body {
 	user-select: none;
 	cursor: default;
 	height: 100vh;
-	color: var(--color);
+	color: var(--text);
 }
 html {
 	font-size: 13px;
@@ -14,9 +14,9 @@ html {
 .titlebar,
 .menubar-menu-container,
 .action-menu-item {
-	background-color: var(--notfbox) !important;
+	background-color: var(--subcolor) !important;
 	filter: brightness(110%) !important;
-	color: var(--color) !important;
+	color: var(--text) !important;
 }
 .action-menu-item:hover {
 	filter: brightness(80%) !important;
@@ -232,7 +232,7 @@ blockquote:before,
 	height: calc(100vh - 3rem);
 	background-color: var(--bg);
 	filter: brightness(50%);
-	color: var(--color);
+	color: var(--text);
 	z-index: 99999;
 	justify-content: center;
 	align-items: center;
@@ -243,7 +243,7 @@ blockquote:before,
 	width: 100vw;
 	height: 100vh;
 	background-color: var(--bg);
-	color: var(--color);
+	color: var(--text);
 	z-index: 99999;
 	justify-content: center;
 	align-items: center;
@@ -254,7 +254,7 @@ blockquote:before,
 #pip {
 	z-index: 504;
 	width: 418px;
-	background-color: var(--subcolor);
+	background-color: var(--thirdColor);
 	position: absolute;
 }
 .pip-bottom {
@@ -315,10 +315,10 @@ blockquote:before,
 }
 .collapsible-header,
 .tabs {
-	background-color: var(--subcolor);
+	background-color: var(--thirdColor);
 }
 .collapsible-header:focus {
-	background-color: var(--subcolor) !important;
+	background-color: var(--thirdColor) !important;
 }
 .modal-footer {
 	background-color: var(--modalfooter) !important;
@@ -332,12 +332,25 @@ blockquote:before,
 }
 .release-do {
 	border: solid 2px;
-	border-color: var(--color);
+	border-color: var(--text);
 	padding: 5px;
 }
 #pickers {
 	display: flex;
 	flex-wrap: wrap;
+	flex-direction: column;
+}
+input[type="color"] {
+	-webkit-appearance: none;
+	border: none;
+	width: 32px;
+	height: 32px;
+}
+input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+input[type="color"]::-webkit-color-swatch {
+	border: none;
 }
 #menu {
 	position: fixed;
@@ -367,7 +380,7 @@ blockquote:before,
 	display: flex;
 	align-items: center;
 	cursor: pointer;
-	color: var(--color);
+	color: var(--text);
 }
 #left-menu a:hover {
 	background-color: var(--beforehover);
@@ -398,7 +411,7 @@ blockquote:before,
 	width: 13rem;
 	height: 3.1rem;
 	cursor: pointer;
-	color: var(--color);
+	color: var(--text);
 }
 #tltype .type span {
 	width: calc(100% - 2.3rem);
@@ -425,7 +438,7 @@ blockquote:before,
 	text-align: center;
 	width: calc(100% + 0.8rem);
 	border-radius: 5px;
-	background-color: var(--box);
+	background-color: var(--subcolor);
 	filter: brightness(80%);
 	margin-left: -0.4rem;
 	margin-right: -0.4rem;
@@ -446,7 +459,7 @@ blockquote:before,
 	position: fixed;
 	bottom: -300px;
 	width: 100vw;
-	background-color: var(--box);
+	background-color: var(--subcolor);
 	z-index: 9999;
 	padding: 0.8rem;
 	display: grid;
@@ -472,16 +485,16 @@ blockquote:before,
 }
 input,
 textarea {
-	color: var(--color);
+	color: var(--text);
 	font-size: 1rem !important;
 	font-family: inherit;
 }
 .swal2-popup {
-	background-color: var(--notfbox) !important;
+	background-color: var(--subcolor) !important;
 }
 .swal2-title,
 .swal2-content {
-	color: var(--color) !important;
+	color: var(--text) !important;
 }
 #src-contents svg {
 	margin-right: 0.4rem;
@@ -530,7 +543,7 @@ textarea {
 	left: calc(50vw - 11.53rem);
 	width: 23rem;
 	max-width: 100%;
-	background-color: var(--box);
+	background-color: var(--subcolor);
 	z-index: 501;
 	padding: 0.4rem;
 }
@@ -612,4 +625,12 @@ textarea {
 }
 .dropdown-content.header:hover {
 	background-color: white;
+}
+button {
+	font-family: inherit !important;
+}
+.via-dropdown {
+	text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: hidden;
 }
--- a/app/css/post.css
+++ b/app/css/post.css
@@ -86,7 +86,7 @@ textarea {
 	max-height: 7.7rem;
 }
 #default-emoji a {
-	color: var(--color);
+	color: var(--text);
 	margin-right: 0.15rem;
 }
 .character-counter {
@@ -126,8 +126,8 @@ textarea {
 }
 #posttgl,
 #toot-post-btn {
-	background-color: var(--accentbtn);
-	color: var(--color);
+	background-color: var(--active);
+	color: var(--text);
 }
 /*mini*/
 .mini-post .mize {
--- a/app/css/sort.css
+++ b/app/css/sort.css
@@ -5,7 +5,7 @@
  background-color: var(--modalfooter);
  margin: 0.4rem;
  border-radius: 0.4rem;
-  color: var(--color);
+  color: var(--text);
  padding: 3px;
  display: grid;
  grid-template-columns: 3.3rem 1fr 4.6rem;
--- a/app/css/themes.css
+++ b/app/css/themes.css
@@ -1,192 +1,22 @@
 :root {
-  --bg: white;
-  --drag: rgba(255, 255, 255, 0.8);
-  --color: black;
-  --beforehover: #757575;
-  --modal: white;
-  --subcolor: #e0e0e0;
-  --box: white;
-  --sidebar: #eeeeee;
-  --shared: #cfd8dc;
-  --notfbox: white;
-  --emphasized: #81c784;
-  --his-data: rgba(255, 255, 255, 0.9);
-  --active: #e6ee9c;
-  --postbox: white;
-  --modalfooter: #fafafa;
-  --accentbtn: #009688;
-  --selected: #c0c0c0;
-  --selectedWithShare: #b2babd;
-  --gray: #757575;
-}
-#imagemodal {
-  background: url("../img/pixel.white.svg");
-}
-.blacktheme {
  --bg: #212121;
  --drag: rgba(0, 0, 0, 0.8);
-  --color: white;
+  --text: white;
  --beforehover: #9e9e9e;
  --modal: black;
-  --subcolor: #212121;
-  --box: #424242;
-  --sidebar: #424242;
-  --shared: #004d40;
-  --notfbox: #333333;
+  --thirdColor: #212121;
+  --bottom: #424242;
+  --accent: #004d40;
+  --subcolor: #333333;
  --emphasized: #4e342e;
  --his-data: rgba(0, 0, 0, 0.8);
-  --active: #757575;
  --postbox: #424242;
  --modalfooter: #212121;
-  --accentbtn: #3f51b5;
+  --active: #3f51b5;
  --selected: #3f3f3f;
  --selectedWithShare: #003a30;
  --gray: #cccccc;
 }
-.blacktheme #imagemodal {
+#imagemodal {
  background: url("../img/pixel.svg");
-}
-.indigotheme {
-  --bg: #031833;
-  --drag: rgba(0, 0, 0, 0.8);
-  --color: white;
-  --beforehover: #9e9e9e;
-  --modal: #0d1351;
-  --subcolor: #0d1351;
-  --shared: #004d40;
-  --box: #0d1351;
-  --sidebar: #0d1351;
-  --notfbox: #0d47a1;
-  --emphasized: #4e342e;
-  --his-data: rgba(13, 19, 81, 0.8);
-  --active: #757575;
-  --postbox: #1a237e;
-  --modalfooter: #031833;
-  --accentbtn: #00acc1;
-  --selected: #214f8a;
-  --selectedWithShare: #003a30;
-  --gray: #cccccc ;
-}
-.indigotheme #imagemodal {
-  background: url("../img/pixel.svg");
-}
-.browntheme {
-  --bg: #261411;
-  --drag: rgba(0, 0, 0, 0.8);
-  --color: white;
-  --beforehover: #9e9e9e;
-  --modal: #261411;
-  --subcolor: #4e342e;
-  --shared: #004d40;
-  --box: #4e342e;
-  --sidebar: #4e342e;
-  --notfbox: #4e342e;
-  --emphasized: #0d47a1;
-  --his-data: rgba(62, 39, 35, 0.8);
-  --active: #757575;
-  --postbox: #4e342e;
-  --modalfooter: #261411;
-  --accentbtn: #827717;
-  --selected: #6d352b;
-  --selectedWithShare: #003a30;
-  --gray: #cccccc;
-}
-.browntheme #imagemodal {
-  background: url("../img/pixel.svg");
-}
-.greentheme {
-  --bg: #c8e6c9;
-  --drag: rgba(255, 255, 255, 0.8);
-  --color: black;
-  --beforehover: #757575;
-  --modal: #81c784;
-  --subcolor: #a5d6a7;
-  --box: #81c784;
-  --sidebar: #c5e1a5;
-  --shared: #ffcc80;
-  --notfbox: #a5d6a7;
-  --emphasized: #9e9d24;
-  --his-data: rgba(255, 255, 255, 0.9);
-  --active: #e6ee9c;
-  --postbox: #a5d6a7;
-  --modalfooter: #81c784;
-  --accentbtn: #33691e;
-  --selected: #78c17a;
-  --selectedWithShare: #caa266;
-  --gray: #757575;
-}
-.greentheme #imagemodal {
-  background: url("../img/pixel.white.svg");
-}
-.bluetheme {
-  --bg: #c9e1ec;
-  --drag: rgba(255, 255, 255, 0.8);
-  --color: black;
-  --beforehover: #757575;
-  --modal: #b2ebf2;
-  --subcolor: #90caf9;
-  --box: #90caf9;
-  --sidebar: #b6e6f5;
-  --shared: #e0ffe4;
-  --notfbox: #90caf9;
-  --emphasized: #c5e1a5;
-  --his-data: rgba(255, 255, 255, 0.9);
-  --active: #b39ddb;
-  --postbox: #dff1ff;
-  --modalfooter: #2196f3;
-  --accentbtn: #2f7bb7;
-  --selected: #9dcade;
-  --selectedWithShare: #c1dac4;
-  --gray: #757575;
-}
-.bluetheme #imagemodal {
-  background: url("../img/pixel.white.svg");
-}
-.polartheme {
-  --bg: #2e3440;
-  --drag: rgba(0, 0, 0, 0.8);
-  --color: white;
-  --beforehover: #8d94a0;
-  --modal: #3b4252;
-  --subcolor: #434c5e;
-  --box: #4c566a;
-  --sidebar: #3b4252;
-  --shared: #2d3b58;
-  --notfbox: #2a3857;
-  --emphasized: #2f4b86;
-  --his-data: rgba(0, 0, 0, 0.8);
-  --active: #2a3857;
-  --postbox: #434c5e;
-  --modalfooter: #485166;
-  --accentbtn: #2f4b86;
-  --selected: #464f61;
-  --selectedWithShare: #3e527e;
-  --gray: #cccccc;
-}
-.polartheme #imagemodal {
-  background: url("../img/pixel.svg");
-}
-.snowtheme {
-  --bg: #eceff4;
-  --drag: rgba(255, 255, 255, 0.8);
-  --color: #36425a;
-  --beforehover: #344058;
-  --modal: #e5e9f0;
-  --subcolor: #d8dee9;
-  --box: #c0c8d6;
-  --sidebar: #eeeeee;
-  --shared: #c3d4e6;
-  --notfbox: #d8dee9;
-  --emphasized: #88c0d0;
-  --his-data: rgba(255, 255, 255, 0.9);
-  --active: #8fbcbb;
-  --postbox: #d8dee9;
-  --modalfooter: #b2bed4;
-  --accentbtn: #81a1c1;
-  --selected: #b4bdd0;
-  --selectedWithShare: #a3afbb;
-  --gray: #5c6c8c;
-}
-.snowtheme #imagemodal {
-  background: url("../img/pixel.white.svg");
 }
--- a/app/css/tl.css
+++ b/app/css/tl.css
@@ -18,7 +18,7 @@
 	padding: 0.23rem;
 	padding-right: 0;
 	padding-left: 3rem;
-	background-color: var(--sidebar);
+	background-color: var(--bottom);
 	display: flex;
 	justify-content: space-between;
 	flex-wrap: wrap;
@@ -62,7 +62,7 @@
 }
 #bottom a,
 #demogroup a {
-	color: var(--color);
+	color: var(--text);
 }
 #bottom i {
 	font-size: 2.3rem;
@@ -436,7 +436,7 @@ iframe,
 }

 .btn-flat {
-	color: var(--color);
+	color: var(--text);
 }
 .area-side i {
 	margin-left: 0.75rem;
@@ -455,44 +455,15 @@ iframe,
 	color: var(--beforehover);
 }
 .actct:hover {
-	color: var(--color);
+	color: var(--text);
 	transition: 0.5s;
 }
-#contextWrap {
-	position: fixed;
-	width: 199vw;
-	height: 100vh;
-	z-index: 100;
+.contextMenu.dropdown-content {
+	padding-top: 5px;
+	overflow-y: hidden;
+	left: calc(100% - 200px) !important;
+	width: 200px !important;
 }
-.contextMenu {
-	position: fixed;
-	background-color: var(--box);
-	z-index: 9999;
-	border-radius: 0.4rem;
-	padding: 0.4rem;
-}
-.contextMenu.bottom:before {
-	content: '';
-	position: absolute;
-	top: 100%;
-	right: 2rem;
-	border: 1.2rem solid transparent;
-	border-top: 1.2rem solid var(--box);
-}
-.contextMenu.top:before {
-	content: '';
-	position: absolute;
-	top: -2.3rem;
-	right: 2rem;
-	border: 1.5rem solid transparent;
-	border-bottom: 1.5rem solid var(--box);
-}
-.contextMenu .btn-flat {
-	text-transform: none !important;
-	width: 100%;
-	text-align: left;
-}
-
 .gray {
 	color: var(--gray);
 }
@@ -531,7 +502,7 @@ iframe,
 	user-select: none;
 }
 .cbadge-hover {
-	color: var(--color);
+	color: var(--text);
 	background-color: transparent;
 }
 .cbadge-hover:hover {
@@ -547,7 +518,7 @@ p:not(:last-child) {
 	margin-bottom: 0.76rem;
 }
 .shared {
-	background-color: var(--shared);
+	background-color: var(--accent);
 }
 .emphasized {
 	background-color: var(--emphasized);
@@ -557,7 +528,7 @@ p:not(:last-child) {
 }
 .notice-box {
 	top: 0;
-	background-color: var(--notfbox);
+	background-color: var(--subcolor);
 	filter: brightness(110%);
 	position: relative;
 	margin-right: 0.7rem;
@@ -626,7 +597,7 @@ p:not(:last-child) {
 .notf-box {
 	position: fixed;
 	right: 5.4rem;
-	background-color: var(--box);
+	background-color: var(--subcolor);
 	border: thin solid gray;
 	z-index: 501;
 	width: 30rem;
@@ -663,14 +634,29 @@ p:not(:last-child) {
 	box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
 		0 5px 5px -3px rgba(0, 0, 0, 0.3), 0px -10px 10px 0px rgba(0, 0, 0, 0.3) inset;
 }
+.notf-indv-box label span {
+	padding-left: 23px !important;
+	margin-right: 5px;
+}
+.notf-indv-box .setting {
+	font-size: 1rem;
+	width: calc(25% - 3px);
+	text-align: left;
+	padding: 5px;
+	height: 70px;
+}
+.notf-exclude-btn:hover {
+	background-color: inherit !important;
+	border: 1px solid;
+}
 .type-b {
 	display: none;
 }
 .modal-footer {
-	background-color: var(--box);
+	background-color: var(--subcolor);
 }
 .ballons {
-	background-color: var(--box);
+	background-color: var(--subcolor);
 	position: absolute;
 	bottom: 0px;
 	right: 0px;
@@ -728,11 +714,11 @@ p:not(:last-child) {
 	transition-duration: 0.5s;
 }
 .votebtn:hover {
-	background-color: var(--color);
+	background-color: var(--text);
 }
 .leadPoll {
 	position: absolute;
-	background-color: var(--box);
+	background-color: var(--subcolor);
 	height: 1.5rem;
 	border-radius: 0.23rem;
 }
@@ -794,11 +780,11 @@ audio {
 .cw_btn {
 	margin: 0.23rem;
 	background-color: var(--emphasized);
-	color: var(--color);
+	color: var(--text);
 	padding-left: 0.23rem;
 	padding-right: 0.23rem;
 	border-radius: 0.23rem;
-	border: 1px solid var(--color);
+	border: 1px solid var(--text);
 	user-select: none;
 }
 .vis-data {
@@ -888,7 +874,7 @@ audio {
 	cursor: pointer;
 	border: solid 1px;
 	padding-left: 0.15rem;
-	background-color: var(--notfbox);
+	background-color: var(--subcolor);
 	border-radius: 0.15rem;
 }
 .announReaction img {
--- a/app/js/common/version.js
+++ b/app/js/common/version.js
@@ -1,5 +1,6 @@
 //バージョンチェッカー
 function verck(ver, jp) {
+	if (store) return false
 	console.log('%c Welcome😊 ' + ver, 'color: red;font-size:200%;')
 	$('body').addClass(localStorage.getItem('platform'))
 	var date = new Date()
@@ -327,82 +328,8 @@ function closeSupport() {
 		}
 	)
 }
-function storeDialog(platform, ver) {
-	if($('body').hasClass('accessibility')) return false
-	if (platform == 'win32') {
-		var mes = lang.lang_version_platform
-	} else if (platform == 'linux') {
-		var mes = lang.lang_version_platform_linux
-	} else if (platform == 'darwin') {
-		var mes = lang.lang_version_platform_mac
-	} else {
-		var mes = false
-	}
-	if (mes) {
-		Swal.fire({
-			title: 'Select your platform',
-			text: mes,
-			type: 'info',
-			showCancelButton: true,
-			confirmButtonColor: '#3085d6',
-			cancelButtonColor: '#3085d6',
-			confirmButtonText: lang.lang_no,
-			cancelButtonText: lang.lang_yesno
-		}).then(result => {
-			//逆にしてる
-			if (!result.value) {
-				localStorage.setItem('winstore', 'winstore')
-			} else {
-				localStorage.setItem('winstore', 'localinstall')
-			}
-			localStorage.setItem('ver', ver)
-			showVer = true
-			if(pwa) return false
-			console.log('%c Thank you for your update🎉', 'color: red;font-size:200%;')
-			$(document).ready(function() {
-				$('#releasenote').modal('open')
-				verp = ver.replace('(', '')
-				verp = verp.replace('.', '-')
-				verp = verp.replace('.', '-')
-				verp = verp.replace('[', '-')
-				verp = verp.replace(']', '')
-				verp = verp.replace(')', '')
-				verp = verp.replace(' ', '_')
-				console.log('%c ' + verp, 'color: red;font-size:200%;')
-				if (lang.language == 'ja') {
-					$('#release-' + verp).show()
-				} else {
-					$('#release-en').show()
-				}
-			})
-		})
-	} else {
-		localStorage.setItem('ver', ver)
-			showVer = true
-			console.log('%c Thank you for your update🎉', 'color: red;font-size:200%;')
-			$(document).ready(function() {
-				if(pwa) return false
-				$('#releasenote').modal('open')
-				verp = ver.replace('(', '')
-				verp = verp.replace('.', '-')
-				verp = verp.replace('.', '-')
-				verp = verp.replace('[', '-')
-				verp = verp.replace(']', '')
-				verp = verp.replace(')', '')
-				verp = verp.replace(' ', '_')
-				console.log('%c ' + verp, 'color: red;font-size:200%;')
-				if (lang.language == 'ja') {
-					$('#release-' + verp).show()
-				} else {
-					$('#release-en').show()
-				}
-			})
-	}
-	
-}
 function closeStart() {
 	$('#start').css('display', 'none')
 	var platform = localStorage.getItem('platform')
 	var ver = localStorage.getItem('ver')
-	storeDialog(platform, ver)
 }
--- a/app/js/platform/first.js
+++ b/app/js/platform/first.js
@@ -1,11 +1,11 @@
-$.strip_tags = function(str, allowed) {
+$.strip_tags = function (str, allowed) {
 	if (!str) {
 		return ''
 	}
 	allowed = (((allowed || '') + '').toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join('')
 	var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>?/gi,
 		commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi
-	return str.replace(commentsAndPhpTags, '').replace(tags, function($0, $1) {
+	return str.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
 		return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : ''
 	})
 }
@@ -88,17 +88,18 @@ function formattimeutc(date) {
 }
 postMessage(['sendSinmpleIpc', 'custom-css-request'], '*')
 function makeCID() {
-	return (
-		randomStr(8) +
-		'-' +
-		randomStr(4) +
-		'-' +
-		randomStr(4) +
-		'-' +
-		randomStr(4) +
-		'-' +
-		randomStr(12)
-	)
+	let chars = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".split("")
+	for (let i = 0, len = chars.length; i < len; i++) {
+		switch (chars[i]) {
+			case "x":
+				chars[i] = Math.floor(Math.random() * 16).toString(16)
+				break
+			case "y":
+				chars[i] = (Math.floor(Math.random() * 4) + 8).toString(16)
+				break
+		}
+	}
+	return chars.join("")
 }
 function randomStr(l) {
 	// 生成する文字列に含める文字セット
@@ -147,15 +148,15 @@ function rgbToHex(color) {
 	console.error(color + ':第1引数はRGB形式で入力')
 }
 /*マルチバイト用切り出し*/
-$.isSurrogatePear = function(upper, lower) {
+$.isSurrogatePear = function (upper, lower) {
 	return 0xd800 <= upper && upper <= 0xdbff && 0xdc00 <= lower && lower <= 0xdfff
 }
-$.mb_strlen = function(str) {
+$.mb_strlen = function (str) {
 	var splitter = new GraphemeSplitter()
 	var arr = splitter.splitGraphemes(str)
 	return arr.length
 }
-$.mb_substr = function(str, begin, end) {
+$.mb_substr = function (str, begin, end) {
 	//配列にする
 	var splitter = new GraphemeSplitter()
 	var arr = splitter.splitGraphemes(str)
@@ -175,7 +176,7 @@ function object_array_sort(data, key, order, fn) {
 		num_a = 1
 		num_b = -1
 	}
-	data = data.sort(function(a, b) {
+	data = data.sort(function (a, b) {
 		var x = a[key]
 		var y = b[key]
 		if (x > y) return num_a
--- a/app/js/platform/preload.js
+++ b/app/js/platform/preload.js
@@ -207,6 +207,7 @@ ipc.on('theme-json-response', function(event, args) {
 	postMessage(['customConnect', args], '*')
 })
 ipc.on('theme-json-create-complete', function(event, args) {
+	if(args != '') alert(args)
 	postMessage(['clearCustomImport', ''], '*')
 	postMessage(['ctLoad', ''], '*')
 })
--- a/app/js/post/status.js
+++ b/app/js/post/status.js
@@ -680,7 +680,11 @@ function staEx(mode) {
 		})
 	return
 }
-function toggleAction(elem, ct) {
+function toggleAction(id) {
+	console.log(document.getElementById(id))
+	var instance = M.Dropdown.init(document.getElementById(id));
+	instance.open()
+	return
 	var height = ct * 39 + 6
 	var cont = elem.parents('.cvo').find('.contextMenu')
 	if (cont.hasClass('hide')) {
--- a/app/js/tl/mix.js
+++ b/app/js/tl/mix.js
@@ -19,11 +19,11 @@ async function mixtl(acct_id, tlid, type, delc, voice) {
 	additional(acct_id, tlid)
 	jQuery('time.timeago').timeago()
 	todc()
-	if(mastodonBaseWsStatus[domain] == 'cannnotopen') {
+	if(mastodonBaseWsStatus[domain] == 'cannotuse') {
 		mixre(acct_id, tlid, 'mix', mute, voice, '')
-	} else if(mastodonBaseWs[domain] == 'undetected') {
+	} else if (mastodonBaseWsStatus[domain] == 'undetected' || mastodonBaseWsStatus[domain] == 'connecting') {
 		const mbws = setInterval(function () {
-			if(mastodonBaseWsStatus[domain] == 'cannnotopen') {
+			if(mastodonBaseWsStatus[domain] == 'cannotuse') {
 				mixre(acct_id, tlid, 'mix', mute, voice, '')
 				clearInterval(mbws)
 			} else if(mastodonBaseWsStatus[domain] == 'available') {
--- a/app/js/tl/notification.js
+++ b/app/js/tl/notification.js
@@ -116,7 +116,7 @@ function notfColumn(acct_id, tlid, sys) {
 		var start = 'wss://' + domain + '/?i=' + at
 	}
 }
-function notfCommon(acct_id, tlid, sys) {
+function notfCommon(acct_id, tlid, sys, stream) {
 	todo('Notifications Loading...')
 	var native = localStorage.getItem('nativenotf')
 	var at = localStorage.getItem('acct_' + acct_id + '_at')
@@ -147,6 +147,10 @@ function notfCommon(acct_id, tlid, sys) {
 			}
 		}
 	}
+	if(stream == 'only') {
+		notfWS(misskey, acct_id, tlid, domain, at)
+		return false
+	}
 	fetch(start, i)
 		.then(function(response) {
 			console.log('header to get param:' + response.headers.get('link'))
@@ -203,7 +207,7 @@ function notfCommon(acct_id, tlid, sys) {
 			}
 			$('#notf-box').addClass('fetched')
 			todc()
-			notfWS(misskey, acct_id, tlid, domain, at)
+			if(stream != 'no') notfWS(misskey, acct_id, tlid, domain, at)
 		})
 }
 function notfWS(misskey, acct_id, tlid, domain, at) {
--- a/app/js/tl/parse.js
+++ b/app/js/tl/parse.js
@@ -901,12 +901,10 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			}
 			//日本語じゃない
 			if (toot.language != lang.language && toot.language) {
-				var trans = `<div class="">
-						<a onclick="trans('${toot.language}','${lang.language}', $(this))" 
-							class="waves-effect waves-dark btn-flat actct" style="padding:0">
+				var trans = `<li onclick="trans('${toot.language}','${lang.language}', $(this))" 
+							 style="padding:0">
 								<i class="material-icons" aria-hidden="true">g_translate</i>${lang.lang_parse_trans}
-						</a>
-					</div>`
+					</li>`
 			} else {
 				var trans = ''
 			}
@@ -1132,8 +1130,8 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 				</div>
 				<div class="area-side">
 					<div class="action ${noauth}">
-						<a onclick="toggleAction($(this), ${menuct})" 
-							class="ctxMenu waves-effect waves-dark btn-flat" style="padding:0">
+						<a onclick="toggleAction('trigger_${tlid}_${uniqueid}')" data-target="dropdown_${tlid}_${uniqueid}"
+							class="ctxMenu waves-effect waves-dark btn-flat" style="padding:0" id="trigger_${tlid}_${uniqueid}">
 							<i class="text-darken-3 material-icons act-icon" aria-hidden="true">expand_more</i>
 							<span class="voice">Other actions</span>
 						</a>
@@ -1146,45 +1144,32 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 						<span class="voice">${lang.lang_parse_detail}</span>
 					</div>
 				</div>
-				<div class="contextMenu hide z-depth-4">
-					<div class="${viashow}">
-						via ${escapeHTML(via)}<br>
-						<a onclick="client('${$.strip_tags(via)}')" class="pointer">${lang.lang_parse_clientop}</a>
-					</div>
+				<ul class="dropdown-content contextMenu" id="dropdown_${tlid}_${uniqueid}">
+					<li class="${viashow} via-dropdown" onclick="client('${$.strip_tags(via)}')" title="${lang.lang_parse_clientop}">
+						via ${escapeHTML(via)}</a>
+					</li>
 					<div>
-					<button onclick="bkm('${uniqueid}','${acct_id}','${tlid}')"
-						class="waves-effect waves-dark btn-flat actct bkm-btn" style="padding:0">
-						<i class="fas text-darken-3 fa-bookmark bkm_${toot.id} ${if_bkm}"></i>
-						<span class="bkmStr_${uniqueid}">${bkmStr}</span>
-					</button>
-					</div>
-					<div class="${if_mine}">
-						<button onclick="del('${uniqueid}','${acct_id}')" class="waves-effect waves-dark btn-flat actct"
+					<li onclick="bkm('${uniqueid}','${acct_id}','${tlid}')"
+						class="bkm-btn bkmStr_${uniqueid}" style="padding:0">
+						<i class="fas text-darken-3 fa-bookmark bkm_${toot.id} ${if_bkm}"></i>${bkmStr}
+					</li>
+					<li class="${if_mine}" onclick="del('${uniqueid}','${acct_id}')"
 							style="padding:0">
 							<i class="fas fa-trash"></i>${lang.lang_parse_del}
-						</button>
-					</div>
-					<div class="${if_mine}">
-						<button onclick="pin('${uniqueid}','${acct_id}')" class="waves-effect waves-dark btn-flat actct" style="padding:0">
-							<i class="fas fa-map-pin pin_${uniqueid} ${if_pin}"></i>
-							<span class="pinStr_${uniqueid}">${pinStr}</span>
-						</button>
-					</div>
-					<div class="${if_mine}">
-						<button onclick="redraft('${uniqueid}','${acct_id}')" class="waves-effect waves-dark btn-flat actct"
+					</li>
+					<li class="${if_mine}" onclick="pin('${uniqueid}','${acct_id}')" style="padding:0" class="pinStr_${uniqueid}">
+							<i class="fas fa-map-pin pin_${uniqueid} ${if_pin}"></i>${pinStr}
+					</li>
+					<li class="${if_mine}"  onclick="redraft('${uniqueid}','${acct_id}')"
 							style="padding:0">
 							<i class="material-icons" aria-hidden="true">redo</i>${lang.lang_parse_redraft}
-						</button>
-					</div>
+					</li>
 					${trans}
-					<div>
-					<button onclick="postMessage(['openUrl', '${toot.url}'], '*')"
-						class="waves-effect waves-dark btn-flat actct" style="padding:0">
-						<i class="fas text-darken-3 fa-globe"></i>
-						${lang.lang_parse_link}
-					</button>
-					</div>
-				</div>
+					<li onclick="postMessage(['openUrl', '${toot.url}'], '*')"
+						 style="padding:0">
+						<i class="fas text-darken-3 fa-globe"></i>${lang.lang_parse_link}
+					</li>
+				</ul>
 			</div>
 			`
 		}
@@ -1371,7 +1356,6 @@ function userparse(obj, auth, acct_id, tlid, popup) {
 }
 //クライアントダイアログ
 function client(name) {
-	$('#contextWrap').addClass('hide')
 	if (name != 'Unknown') {
 		//聞く
 		Swal.fire({
@@ -1564,11 +1548,16 @@ function pollParse(poll, acct_id, emojis) {
 var mastodonBaseWs = {}
 var mastodonBaseWsStatus = {}
 function mastodonBaseStreaming(acct_id) {
+	notfCommon(acct_id, 0, null, 'no')
 	const domain = localStorage.getItem(`domain_${acct_id}`)
-	if(mastodonBaseWsStatus[domain]) return
+	if (mastodonBaseWsStatus[domain]) return
 	mastodonBaseWsStatus[domain] = 'undetected'
 	const at = localStorage.getItem(`acct_${acct_id}_at`)
-	const start = `wss://${domain}/api/v1/streaming/?access_token=${at}`
+	let wss = 'wss://' + domain
+	if (localStorage.getItem('streaming_' + acct_id)) {
+		wss = localStorage.getItem('streaming_' + acct_id)
+	}
+	const start = `${wss}/api/v1/streaming/?access_token=${at}`
 	mastodonBaseWs[domain] = new WebSocket(start)
 	mastodonBaseWs[domain].onopen = function () {
 		mastodonBaseWsStatus[domain] = 'connecting'
@@ -1618,10 +1607,19 @@ function mastodonBaseStreaming(acct_id) {
 		}
 	}
 	mastodonBaseWs[domain].onerror = function (error) {
-		notf(acct_id, 0) //fallback
+		notfCommon(acct_id, 0, null, 'only') //fallback
 		console.error("Error closing " + domain)
 		console.error(error)
-		if (mastodonBaseWsStatus[domain] == 'available') alert(domain)
+		if (mastodonBaseWsStatus[domain] == 'available') {
+			M.toast({
+				html:
+					`${lang.lang_parse_disconnected}<button class="btn-flat toast-action" onclick="location.reload()">${lang.lang_layout_reconnect}</button>`,
+				completeCallback: function () {
+					mastodonBaseWs[domain] = new WebSocket(start)
+				},
+				displayLength: 3000
+			})
+		}
 		mastodonBaseWsStatus[domain] = 'cannotuse'
 		setTimeout(function () {
 			mastodonBaseWsStatus[domain] = 'cannotuse'
@@ -1630,9 +1628,18 @@ function mastodonBaseStreaming(acct_id) {
 		return false
 	}
 	mastodonBaseWs[domain].onclose = function () {
-		notf(acct_id, 0) //fallback
+		notfCommon(acct_id, 0, null, 'only') //fallback
 		console.warn("Closing " + domain)
-		if (mastodonBaseWsStatus[domain] == 'available') alert(domain)
+		if (mastodonBaseWsStatus[domain] == 'available') {
+			M.toast({
+				html:
+					`${lang.lang_parse_disconnected}<button class="btn-flat toast-action" onclick="location.reload()">${lang.lang_layout_reconnect}</button>`,
+				completeCallback: function () {
+					mastodonBaseWs[domain] = new WebSocket(start)
+				},
+				displayLength: 3000
+			})
+		}
 		mastodonBaseWs[domain] = false
 		mastodonBaseWsStatus[domain] = 'cannotuse'
 		setTimeout(function () {
--- a/app/js/tl/src.js
+++ b/app/js/tl/src.js
@@ -219,9 +219,9 @@ function moreTs(tlid, q) {
 function graphDraw(tag, acct_id) {
 	var tags = ''
 	var his = tag.history
-	return graphDrawCore(his, tag)
+	return graphDrawCore(his, tag, acct_id)
 }
-function graphDrawCore(his, tag) {
+function graphDrawCore(his, tag, acct_id) {
 	var max = Math.max.apply(null, [
 		his[0].uses,
 		his[1].uses,
@@ -307,7 +307,7 @@ function trend() {
 			Object.keys(json).forEach(function(keye) {
 				var tag = json[keye]
 				var his = tag.history
-				tags = graphDrawCore(his, tag)
+				tags = graphDrawCore(his, tag, acct_id)

 				$('#src-contents').append(tags)
 			})
--- a/app/js/ui/layout.js
+++ b/app/js/ui/layout.js
@@ -149,7 +149,6 @@ function parseColumn(target, dontclose) {
 				icnsert = ' style="color: #' + ichex + '" '
 			}
 		}
-		console.log(acct)
 		if (acctlist[acct.domain]) {
 			if (acctlist[acct.domain].background != 'def') {
 				insert = insert + ' border-bottom:medium solid #' + acctlist[acct.domain].background + ';'
@@ -229,65 +228,63 @@ function parseColumn(target, dontclose) {
 				var animecss = ''
 			}
 			var unread = `<a id="unread_${key}" onclick="showUnread('${key}','${acct.type}','${acct.domain}')"
-					 class="setting nex" title="${lang.lang_layout_unread}">
-					<i class="material-icons waves-effect nex">more</i>
-				</a>${lang.lang_layout_unread}<br>`
+					 class="setting nex waves-effect" title="${lang.lang_layout_unread}">
+					<i class="material-icons waves-effect nex">more</i><br />${lang.lang_layout_unread}
+				</a>`
 			var notfDomain = acct.domain
 			var notfKey = key
 			var if_tag = ''
 			var if_tag_btn = ''
 			if (acct.type == 'notf') {
 				var exclude =
-					lang.lang_excluded +
-					`:<br>
+					`<div style="border: 1px solid; padding: 5px; margin-top: 5px; margin-bottom: 5px;">${lang.lang_layout_excluded}:<br>
 					<label>
 						<input type="checkbox" class="filled-in" id="exc-reply-${key}" ${excludeCk(key, 'mention')} />
 						<span>
-							<i class="fas fa-share exc-icons"></i>
+							${lang.lang_layout_mention}
 						</span>
 					</label>
 					<label>
 						<input type="checkbox" class="filled-in" id="exc-fav-${key}" ${excludeCk(key, 'favourite')} />
 						<span>
-							<i class="fas fa-star exc-icons"></i>
+						${lang.lang_layout_fav}
 						</span>
 					</label> 
 					<label>
 						<input type="checkbox" class="filled-in" id="exc-bt-${key}" ${excludeCk(key, 'reblog')} />
 						<span>
-							<i class="fas fa-retweet exc-icons"></i>
+						${lang.lang_layout_bt}
 						</span>
-					</label> 
+					</label>
 					<label>
 						<input type="checkbox" class="filled-in" id="exc-follow-${key}" ${excludeCk(key, 'follow')} />
 						<span>
-							<i class="fas fa-users exc-icons"></i>
+						${lang.lang_status_follow}
 						</span>
 					</label> 
 					<label>
 						<input type="checkbox" class="filled-in" id="exc-poll-${key}" ${excludeCk(key, 'poll')} />
 						<span>
-							<i class="fas fa-tasks exc-icons"></i>
+						${lang.lang_layout_poll}
 						</span>
-					</label> 
-					<button class="btn waves-effect" style="width:60px; padding:0;" onclick="exclude('${key}')">Filter</button>`
+					</label> <br />
+					<button class="btn btn-flat waves-effect notf-exclude-btn waves-light" style="width:calc(50% - 11px); padding:0;" onclick="exclude('${key}')">Filter</button>`
 				if (checkNotfFilter(key)) {
 					exclude =
 						exclude +
-						`<button class="btn red waves-effect" style="width:60px; padding:0;" onclick="resetNotfFilter('${key}')">
+						`<button class="btn btn-flat red-text waves-effect notf-exclude-btn waves-light" style="width:calc(50% - 11px); padding:0;" onclick="resetNotfFilter('${key}')">
 							Clear all
 						</button>`
 				}
-				exclude = exclude + '<br>'
+				exclude = exclude + '</div>'
 				notfDomain = 'dummy'
 				notfKey = 'dummy'
 			} else if (acct.type == 'home') {
-				var exclude = `<a onclick="ebtToggle('${key}')" class="setting nex">
-						<i class="fas fa-retweet waves-effect nex" title="${lang.lang_layout_excludingbt}" style="font-size:24px"></i>
-						<span id="sta-bt-${key}">Off</span>
-					</a>
+				var exclude = `<a onclick="ebtToggle('${key}')" class="setting nex waves-effect">
+						<i class="fas fa-retweet nex" title="${lang.lang_layout_excludingbt}" style="font-size: 24px"></i>
+						<span id="sta-bt-${key}">Off</span><br />
 					${lang.lang_layout_excludingbt}
-					<br>`
+					</a>`
 			} else if (acct.type == 'tag') {
 				if (acct.data.name) {
 					var name = acct.data.name
@@ -336,15 +333,13 @@ function parseColumn(target, dontclose) {
 					var basehtml = `<div style="${css}" class="box ${animecss}" id="timeline_box_${basekey}_parentBox"></div>`
 					$('#timeline-container').append(basehtml)
 				}
-				var left_hold = `<a onclick="leftFoldSet('${key}')" class="setting nex">
-						<i class="material-icons waves-effect nex" title="${lang.lang_layout_leftFold}">view_agenda</i>
-					</a>
-					${lang.lang_layout_leftFold}<br>`
+				var left_hold = `<a onclick="leftFoldSet('${key}')" class="setting nex waves-effect">
+						<i class="material-icons waves-effect nex" title="${lang.lang_layout_leftFold}">view_agenda</i><br />
+					${lang.lang_layout_leftFold}</a>`
 			} else {
-				var left_hold = `<a onclick="leftFoldRemove('${key}')" class="setting nex">
-						<i class="material-icons waves-effect nex" title="${lang.lang_layout_leftUnfold}">view_column</i>
-					</a>
-					${lang.lang_layout_leftUnfold}<br>`
+				var left_hold = `<a onclick="leftFoldRemove('${key}')" class="setting nex waves-effect">
+						<i class="material-icons waves-effect nex" title="${lang.lang_layout_leftUnfold}">view_column</i><br />
+					${lang.lang_layout_leftUnfold}</a>`
 			}
 			if (key === 0) {
 				left_hold = ''
@@ -363,16 +358,15 @@ function parseColumn(target, dontclose) {
 				var addHeight = ''
 			}
 			if (acct.type != 'pub' && acct.type != 'pub-media') {
-				console.log(acct.type, key)
-				var mediaFil = `<a onclick="mediaToggle('${key}')" class="setting nex">
-					<i class="material-icons waves-effect nex" title="${lang.lang_layout_mediafil}">perm_media</i>
-					<span id="sta-media-${key}">On</span>
-				</a>${lang.lang_layout_mediafil}`
+				var mediaFil = `<a onclick="mediaToggle('${key}')" class="setting nex waves-effect">
+					<i class="material-icons nex" title="${lang.lang_layout_mediafil}">perm_media</i>
+					<span id="sta-media-${key}">On</span><br />
+				${lang.lang_layout_mediafil}</a>`
 			} else {
-				var mediaFil = `<a onclick="remoteOnly('${key}','${acct.type}')" class="setting nex">
-					<i class="material-icons waves-effect nex" title="${lang.lang_layout_remoteOnly}">perm_media</i>
+				var mediaFil = `<a onclick="remoteOnly('${key}','${acct.type}')" class="setting nex waves-effect">
+					<i class="material-icons nex" title="${lang.lang_layout_remoteOnly}">perm_media</i><br />
 					<span id="sta-remote-${key}">Off</span>
-				</a>${lang.lang_layout_remoteOnly}`
+				${lang.lang_layout_remoteOnly}</a>`
 			}
 			var html = `
 				<div class="boxIn" id="timeline_box_${key}_box" tlid="${key}" data-acct="${acct.domain}" style="${addHeight}">
@@ -426,28 +420,25 @@ function parseColumn(target, dontclose) {
 					</div>
 				</div>
 				<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:5px;">
+					${exclude}
 					${unread}
-					${exclude}${left_hold}
-					${mediaFil}<br>
-					<a onclick="cardToggle('${key}')" class="setting nex">
-						<i class="material-icons waves-effect nex" title="${lang.lang_layout_linkanades}">link</i>
-						<span id="sta-card-${key}">On</span>
-					</a>
+					${left_hold}
+					${mediaFil}
+					<a onclick="cardToggle('${key}')" class="setting nex waves-effect">
+						<i class="material-icons nex" title="${lang.lang_layout_linkanades}">link</i>
+						<span id="sta-card-${key}">On</span><br />
 					${lang.lang_layout_linkana}
-					<br>
-					<a onclick="voiceToggle('${key}')" class="setting nex">
-						<i class="material-icons waves-effect nex" title="${lang.lang_layout_tts}">hearing</i>
-						<span id="sta-voice-${key}">On</span>
 					</a>
+					<a onclick="voiceToggle('${key}')" class="setting nex waves-effect">
+						<i class="material-icons nex" title="${lang.lang_layout_tts}">hearing</i>
+						<span id="sta-voice-${key}">On</span><br />
 					${lang.lang_layout_tts}
-					TL<br>
-					<a onclick="columnReload('${key}','${acct.type}')" class="setting nex ${if_misskey_hide}">
-						<i class="material-icons waves-effect nex" title="${lang.lang_layout_reconnect}">refresh</i>
-					</a>
-					<span>
+					TL</a>
+					<a onclick="columnReload('${key}','${acct.type}')" class="setting nex ${if_misskey_hide} waves-effect">
+						<i class="material-icons nex" title="${lang.lang_layout_reconnect}">refresh</i>
+					<br />
 						${lang.lang_layout_reconnect}
-					</span>
-					<br>
+					</a><br />
 					${lang.lang_layout_headercolor}
 					<br>
 					<div id="picker_${key}" class="color-picker"></div>
--- a/app/js/ui/post-box.js
+++ b/app/js/ui/post-box.js
@@ -126,11 +126,6 @@ function initPostbox() {
 		localStorage.removeItem('nohide')
 		srcBox('close')
 	})
-	$('#contextWrap').click(function (e) {
-		$('#contextWrap').addClass('hide')
-		$('.contextMenu').addClass('hide')
-		$('.act-icon').text('expand_more')
-	})
 	$('#textarea,#cw-text').focusout(function (e) {
 		localStorage.setItem('nohide', true)
 		var countup = function () {
--- a/app/js/ui/settings.js
+++ b/app/js/ui/settings.js
@@ -80,22 +80,6 @@ var postView = new Vue({
 })
 //設定ボタン押した。
 function settings() {
-	var cd = $('[name=theme]:checked').val()
-	var ct = $('[data-ct=' + cd + ']').html()
-	if (cd == 'custom' && !$('#custom-sel-sel').val()) {
-		var theme = localStorage.getItem('theme')
-		if (!theme) {
-			var theme = 'white'
-		}
-		$('#' + theme).prop('checked', true)
-	} else {
-		if (cd != localStorage.getItem('theme')) {
-			M.toast({ html: lang.lang_setting_theme.replace('{{set}}', ct), displayLength: 3000 })
-		}
-		//テーマはこの場で設定
-		themes(cd)
-		localStorage.setItem('theme', cd)
-	}
 	var fontd = $('#font').val()
 	if (fontd) {
 		if (fontd != localStorage.getItem('font')) {
@@ -167,10 +151,10 @@ function load() {
 		var font = ''
 	}
 	$('#font').val(font)
-	$('#c1-file').text(localStorage.getItem('custom1'))
-	$('#c2-file').text(localStorage.getItem('custom2'))
-	$('#c3-file').text(localStorage.getItem('custom3'))
-	$('#c4-file').text(localStorage.getItem('custom4'))
+	$('#c1-file').text(localStorage.getItem('custom1') != 'null' ? localStorage.getItem('custom1') : '')
+	$('#c2-file').text(localStorage.getItem('custom2') != 'null' ? localStorage.getItem('custom2') : '')
+	$('#c3-file').text(localStorage.getItem('custom3') != 'null' ? localStorage.getItem('custom3') : '')
+	$('#c4-file').text(localStorage.getItem('custom4') != 'null' ? localStorage.getItem('custom4') : '')
 	var cvol = localStorage.getItem('customVol')
 	if (cvol) {
 		$('#soundvol').val(cvol * 100)
@@ -508,35 +492,39 @@ function fontList(arg) {
 function insertFont(name) {
 	$('#font').val(name)
 }
-$('.color-picker').each(function (i, elem) {
-	pickerDefine(i, 'fff')
-})
-function pickerDefine(i, color) {
-	var pickr = new Pickr({
-		el: '#color-picker' + i,
-		default: color,
-		showAlways: true,
-		appendToBody: true,
-		closeWithKey: 'Escape',
-		comparison: false,
-		components: {
-			preview: true, // Left side color comparison
-			opacity: false, // Opacity slider
-			hue: true, // Hue slider
-			interaction: {
-				rgba: false, // rgba option (red green blue and alpha)
-				input: true, // input / output element
-			},
-		},
-		strings: {
-			save: 'Save', // Default for save button
-			clear: 'Clear', // Default for clear button
-		},
-	})
-	pickr.on('change', (...args) => {
-		var rgb = 'rgb(' + args[0].toRGBA()[0] + ',' + args[0].toRGBA()[1] + ',' + args[0].toRGBA()[2] + ')'
-		$('#color-picker' + i + '_value').val(rgb)
-	})
+function copyColor(from, to) {
+	let props = [
+		'background', 'subcolor', 'text', 'accent',
+		'modal', 'modalFooter', 'third', 'forth',
+		'bottom', 'emphasized', 'postbox', 'active',
+		'selected', 'selectedWithShared'
+	]
+	let i = 0
+	let color
+	for (tag of props) {
+		if(tag == from) {
+			let used = $(`#use-color_${i}`).prop('checked')
+			if(!used) {
+				Swal.fire({
+					type: 'error',
+					title: 'Not checked',
+				})
+				break
+			}
+			color = $(`#color-picker${i}_value`).val()
+			break
+		}
+		i++
+	}
+	if(!color) return false
+	for (tag of props) {
+		if(tag == to) {
+			$(`#color-picker${i}_value`).val(color)
+			$(`#use-color_${i}`).prop('checked', true)
+			break
+		}
+		i++
+	}
 }
 function customComp() {
 	var nameC = $('#custom_name').val()
@@ -544,59 +532,32 @@ function customComp() {
 		return false
 	}
 	var descC = $('#custom_desc').val()
-	var primaryC = $('#color-picker0_value').val()
-	if (!primaryC) {
-		primaryC = 'rgb(255,255,255)'
-	}
-	var secondaryC = $('#color-picker1_value').val()
-	if (!secondaryC) {
-		secondaryC = 'rgb(255,255,255)'
-	}
-	var textC = $('#color-picker2_value').val()
-	if (!textC) {
-		textC = 'rgb(255,255,255)'
-	}
+	var bgC = $('#color-picker0_value').val()
+	var subcolorC = $('#color-picker2_value').val()
+	var textC = $('#color-picker1_value').val()
+	var accentC = $('#color-picker3_value').val()
 	var multi = localStorage.getItem('multi')
-	if ($('#pickers').hasClass('advanceTheme')) {
-		var accentC = $('#color-picker3_value').val()
-		if (!accentC) {
-			accentC = null
+	let advanced = [
+		'modal', 'modalFooter', 'third', 'forth',
+		'bottom', 'emphasized', 'postbox', 'active',
+		'selected', 'selectedWithShared'
+	]
+	var advanceTheme = {}
+	let i = 4
+	for (tag of advanced) {
+		let used = $(`#use-color_${i}`).prop('checked')
+		if (used) {
+			advanceTheme[tag] = $(`#color-picker${i}_value`).val()
 		}
-		var activeC = $('#color-picker4_value').val()
-		if (!activeC) {
-			activeC = null
-		}
-		var modalC = $('#color-picker5_value').val()
-		if (!modalC) {
-			modalC = null
-		}
-		var bottomC = $('#color-picker6_value').val()
-		if (!bottomC) {
-			bottomC = null
-		}
-		var postboxC = $('#color-picker7_value').val()
-		if (!postboxC) {
-			postboxC = null
-		}
-		var subcolorC = $('#color-picker8_value').val()
-		if (!subcolorC) {
-			subcolorC = null
-		}
-		var advanceTheme = {
-			TheDeskAccent: accentC,
-			TheDeskActive: activeC,
-			TheDeskModal: modalC,
-			TheDeskBottom: bottomC,
-			TheDeskPostbox: postboxC,
-			TheDeskSubcolor: subcolorC,
-		}
-	} else {
-		var advanceTheme = {}
+		i++
 	}

 	var my = JSON.parse(multi)[0].name
 	var id = $('#custom-edit-sel').val()
-	if (id == 'add_new') {
+	const defaults = [
+		'black','blue','brown','green','indigo','polar','snow','white'
+	]
+	if (id == 'add_new' || defaults.includes(id)) {
 		id = makeCID()
 	}
 	localStorage.setItem('customtheme-id', id)
@@ -605,26 +566,48 @@ function customComp() {
 		author: my,
 		desc: descC,
 		base: $('[name=direction]:checked').val(),
-		vars: {
-			primary: primaryC,
-			secondary: secondaryC,
+		primary: {
+			background: bgC,
+			subcolor: subcolorC,
 			text: textC,
+			accent: accentC
 		},
-		props: advanceTheme,
+		advanced: advanceTheme,
 		id: id,
+		version: '2'
 	}
 	$('#custom_json').val(JSON.stringify(json))
-	themes('custom')
-	$('#custom').prop('checked', true)
-	$('#custom_name').val('')
-	$('#custom_desc').val('')
-	$('#dark').prop('checked', true)
-	$('#custom_json').val('')
-	for (var i = 0; i <= 8; i++) {
-		$('#color-picker' + i + '-wrap').html('<div class="color-picker" id="color-picker' + i + '"></div>')
-		$('#color-picker' + i + '_value').val('')
-		pickerDefine(i, 'fff')
-	}
+	let timerInterval
+	Swal.fire({
+		title: 'Saving...',
+		html: '',
+		timer: 1000,
+		timerProgressBar: true,
+		onBeforeOpen: () => {
+			Swal.showLoading()
+		},
+		onClose: () => {
+			clearInterval(timerInterval)
+		}
+	}).then((result) => {
+		themes()
+		ctLoad()
+		Swal.fire({
+			title: 'Refreshing...',
+			html: '',
+			timer: 1000,
+			timerProgressBar: true,
+			onBeforeOpen: () => {
+				Swal.showLoading()
+			},
+			onClose: () => {
+				clearInterval(timerInterval)
+			}
+		}).then((result) => {
+			$('#custom-edit-sel').val(id)
+			$('select').formSelect()
+		})
+	})
 	postMessage(['themeJsonCreate', JSON.stringify(json)], '*')
 }
 function deleteIt() {
@@ -633,34 +616,34 @@ function deleteIt() {
 	$('#custom_desc').val('')
 	$('#dark').prop('checked', true)
 	$('#custom_json').val('')
-	for (var i = 0; i <= 8; i++) {
-		$('#color-picker' + i + '-wrap').html('<div class="color-picker" id="color-picker' + i + '"></div>')
+	for (var i = 0; i <= 13; i++) {
+		if (i >= 4) $(`#use-color_${i}`).prop('checked', false)
 		$('#color-picker' + i + '_value').val('')
-		pickerDefine(i, 'fff')
 	}
-	postMessage(['themeJsonDelete', id], '*')
+	postMessage(['themeJsonDelete', id + '.thedesktheme'], '*')
 }
 function ctLoad() {
 	postMessage(['sendSinmpleIpc', 'theme-json-list'], '*')
 }
 function ctLoadCore(args) {
-	var templete = ''
+	var template = ''
+	var editTemplate = ''
 	Object.keys(args).forEach(function (key) {
 		var theme = args[key]
 		var themeid = theme.id
-		templete = templete + '<option value="' + themeid + '">' + theme.name + '</option>'
+		template = template + `<option value="${themeid}">${theme.name}${theme.compatible ? `(${lang.lang_setting_compat})` : ''}</option>`
+		if (!theme.compatible) editTemplate = editTemplate + `<option value="${themeid}">${theme.name}</option>`
 	})
-	if (args[0]) {
-		localStorage.setItem('customtheme-id', args[0].id)
-	}
-	$('#custom-sel-sel').html(templete)
-	templete = '<option value="add_new">' + $('#edit-selector').attr('data-add') + '</option>' + templete
-	$('#custom-edit-sel').html(templete)
+	$('#custom-sel-sel').html(template)
+	editTemplate = '<option value="add_new">' + $('#edit-selector').attr('data-add') + '</option>' + editTemplate
+	$('#custom-edit-sel').html(editTemplate)
+	$('#custom-sel-sel').val(localStorage.getItem('customtheme-id'))
 	$('select').formSelect()
 }
 function customSel() {
 	var id = $('#custom-sel-sel').val()
 	localStorage.setItem('customtheme-id', id)
+	themes(id)
 }
 function custom() {
 	var id = $('#custom-edit-sel').val()
@@ -669,58 +652,47 @@ function custom() {
 		$('#custom_desc').val('')
 		$('#dark').prop('checked', true)
 		$('#custom_json').val('')
-		for (var i = 0; i <= 8; i++) {
-			$('#color-picker' + i + '-wrap').html('<div class="color-picker" id="color-picker' + i + '"></div>')
+		for (var i = 0; i <= 13; i++) {
+			if (i >= 4) $(`#use-color_${i}`).prop('checked', false)
 			$('#color-picker' + i + '_value').val('')
-			pickerDefine(i, 'fff')
 		}
 		$('#delTheme').addClass('disabled')
 	} else {
 		$('#delTheme').removeClass('disabled')
-		postMessage(['themeJsonRequest', id], '*')
+		postMessage(['themeJsonRequest', id + '.thedesktheme'], '*')
 	}
 }
 function customConnect(raw) {
 	var args = raw[0]
-	$('#custom_name').val(args.name)
-	$('#custom_desc').val(args.desc)
+	$('#custom_name').val(`${args.name} ${args.default ? 'Customed' : ''}`)
+	$('#custom_desc').val(args.default ? 'TheDesk default theme with some changes by user' : args.desc)
 	$('#' + args.base).prop('checked', true)
-	//Primary
-	$('#color-picker0-wrap').html('<div class="color-picker" id="color-picker0"></div>')
-	pickerDefine(0, rgbToHex(args.vars.primary))
-	$('#color-picker0_value').val(args.vars.primary)
-	//Secondary
-	$('#color-picker1-wrap').html('<div class="color-picker" id="color-picker1"></div>')
-	pickerDefine(1, rgbToHex(args.vars.secondary))
-	$('#color-picker1_value').val(args.vars.secondary)
+	//Background
+	$('#color-picker0_value').val(args.primary.background)
 	//Text
-	$('#color-picker2-wrap').html('<div class="color-picker" id="color-picker2"></div>')
-	$('#color-picker2_value').val(args.vars.text)
-	pickerDefine(2, rgbToHex(args.vars.text))
-	//TheDesk Only
-	advancedConncet(args, 'TheDeskAccent', 'secondary', 3)
-	advancedConncet(args, 'TheDeskActive', 'primary', 4)
-	advancedConncet(args, 'TheDeskModal', 'secondary', 5)
-	advancedConncet(args, 'TheDeskBottom', 'primary', 6)
-	advancedConncet(args, 'TheDeskPostbox', 'primary', 7)
-	advancedConncet(args, 'TheDeskSubcolor', 'primary', 8)
-	$('#custom_json').val(raw[1])
-}
-function advancedConncet(args, tar, sub, i) {
-	if (args.props) {
-		if (args.props[tar]) {
-			var color = args.props[tar]
-			$('#pickers').addClass('advanceTheme')
-			$('.advanced').removeClass('hide')
-		} else {
-			var color = args.vars[sub]
+	$('#color-picker1_value').val(args.primary.text)
+	//Subcolor
+	$('#color-picker2_value').val(args.primary.subcolor)
+	//Accent
+	$('#color-picker3_value').val(args.primary.accent)
+	let advanced = [
+		'modal', 'modalFooter', 'third', 'forth',
+		'bottom', 'emphasized', 'postbox', 'active',
+		'selected', 'selectedWithShared'
+	]
+	let i = 4
+	for (tag of advanced) {
+		if (args.advanced[tag]) {
+			$(`#color-picker${i}_value`).val(args.advanced[tag])
+
 		}
-	} else {
-		var color = args.vars[sub]
+		$(`#use-color_${i}`).prop('checked', true)
+		i++
+	}
+	$('#custom_json').val(raw[1])
+	if(args.default) {
+		$('#delTheme').addClass('disabled')
 	}
-	$('#color-picker' + i + '-wrap').html('<div class="color-picker" id="color-picker' + i + '"></div>')
-	$('#color-picker' + i + '_value').val(color)
-	pickerDefine(i, rgbToHex(color))
 }
 function customImp() {
 	var json = $('#custom_import').val()
@@ -754,7 +726,7 @@ function customSound(key) {
 }
 function customSoundSave(key, file) {
 	localStorage.setItem('custom' + key, file)
-	$('#c1-file').text(file)
+	$(`#c${key}-file`).text(file)
 }
 window.onload = function () {
 	//最初に読む
@@ -832,3 +804,5 @@ function lastFmSet() {
 	}
 	M.toast({ html: 'Complete: last.fm', displayLength: 3000 })
 }
+
+function stopVideo() { return false }
--- a/app/js/ui/theme.js
+++ b/app/js/ui/theme.js
@@ -1,35 +1,20 @@
 //テーマ適用
 function themes(theme) {
 	if (!theme) {
-		var theme = localStorage.getItem('theme')
+		var theme = localStorage.getItem('customtheme-id')
 		if (!theme) {
-			var theme = 'black'
-			localStorage.setItem('theme', 'black')
+			localStorage.setItem('customtheme-id', 'black')
+			theme = 'black'
 		}
 	}
+	postMessage(['themeCSSRequest', theme + '.thedesktheme'], '*')
 	var el = document.getElementsByTagName('html')[0]
-
-	el.classList.remove('indigotheme')
-	el.classList.remove('greentheme')
-	el.classList.remove('browntheme')
-	el.classList.remove('blacktheme')
-	el.classList.remove('bluetheme')
-	el.classList.remove('polartheme')
-	el.classList.remove('snowtheme')
-	el.classList.remove('customtheme')
-	el.classList.add(theme + 'theme')
+	el.style.backgroundColor = 'var(--bg)'
 	var font = localStorage.getItem('font')
-	if (font) {
-		font = font.replace(/"(.+)"/, '$1')
-		el.style.fontFamily = '"' + font + '"'
+	if(font) {
+		el.style.fontFamily = font
 	} else {
 		el.style.fontFamily = ''
 	}
-	if (theme == 'custom') {
-		if (localStorage.getItem('customtheme-id')) {
-			postMessage(['themeCSSRequest', localStorage.getItem('customtheme-id')], '*')
-		}
-	}
-	el.style.backgroundColor = 'var(--bg)'
 }
 themes()
--- a/app/js/userdata/his-data.js
+++ b/app/js/userdata/his-data.js
@@ -204,7 +204,7 @@ function flw(user, more, acct_id) {
 				let link
 				if (linkHeader) {
 					console.log(linkHeader)
-					link = linkHeader.match(/[?&]{1}max_id=([0-9]+)/)[1]
+					try {link = linkHeader.match(/[?&]{1}max_id=([0-9]+)/)[1] }catch{}
 					console.log(link)
 				}
 				$("#his-follow-list-contents").attr('max-id', link)
@@ -313,7 +313,7 @@ function fer(user, more, acct_id) {
 				let link
 				if (linkHeader) {
 					console.log(linkHeader)
-					link = linkHeader.match(/[?&]{1}max_id=([0-9]+)/)[1]
+					try {link = linkHeader.match(/[?&]{1}max_id=([0-9]+)/)[1] }catch{}
 					console.log(link)
 				}
 				$("#his-follower-list-contents").attr('max-id', link)
@@ -354,7 +354,7 @@ function fer(user, more, acct_id) {
 			let link
 			if (linkHeader) {
 				console.log(linkHeader)
-				link = linkHeader.match(/[?&]{1}max_id=([0-9]+)/)[1]
+				try {link = linkHeader.match(/[?&]{1}max_id=([0-9]+)/)[1] }catch{}
 				console.log(link)
 			}
 			$("#his-follower-list-contents").attr('max-id', link)
@@ -403,7 +403,7 @@ function showFav(more, acct_id) {
 				let link
 				if (linkHeader) {
 					console.log(linkHeader)
-					link = linkHeader.match(/[?&]{1}max_id=([0-9]+)/)[1]
+					try {link = linkHeader.match(/[?&]{1}max_id=([0-9]+)/)[1] }catch{}
 					console.log(link)
 				}
 				var template = parse(json, "", acct_id, "user")
--- a/app/main/css.js
+++ b/app/main/css.js
@@ -31,119 +31,246 @@ function css(mainWindow) {
 		}
 	})
 	ipc.on('theme-json-delete', function (e, arg) {
-		var themecss = join(app.getPath("userData"), arg + ".thedesktheme");
-		console.log(themecss);
-		fs.unlink(themecss, function (err) {
-			e.sender.webContents.send('theme-json-delete-complete', "");
-		});
+		try{
+			var themecss = join(app.getPath("userData"), arg);
+			console.log(themecss);
+			fs.unlink(themecss, function (err) {
+				e.sender.webContents.send('theme-json-delete-complete', "");
+			});
+		} catch {
+			e.sender.webContents.send('theme-json-delete-complete', 'cannot delete');
+		}
+		
 	})
 	ipc.on('theme-json-request', function (e, arg) {
-		var themecss = join(app.getPath("userData"), arg + ".thedesktheme");
-		var raw = fs.readFileSync(themecss, 'utf8')
-		var json = JSON5.parse(raw);
+		try {
+			var themecss = join('./source/themes', arg)
+			var raw = fs.readFileSync(themecss, 'utf8')
+			var json = JSON5.parse(raw)
+		} catch {
+			var themecss = join(app.getPath("userData"), arg)
+			var raw = fs.readFileSync(themecss, 'utf8')
+			var json = JSON5.parse(raw)
+		}
 		e.sender.webContents.send('theme-json-response', [json, raw]);
 	})
 	ipc.on('theme-css-request', function (e, arg) {
-		var themecss = join(app.getPath("userData"), arg + ".thedesktheme");
 		try {
-			var json = JSON5.parse(fs.readFileSync(themecss, 'utf8'));
+			var themecss = join('./source/themes', arg)
+			var json = JSON5.parse(fs.readFileSync(themecss, 'utf8'))
+		} catch {
+			var themecss = join(app.getPath("userData"), arg)
+			var json = JSON5.parse(fs.readFileSync(themecss, 'utf8'))
+		}

-			var primary = json.vars.primary;
-			var secondary = json.vars.secondary;
-			var text = json.vars.text;
-			if (json.base == "light") {
-				var drag = "rgba(255, 255, 255, 0.8)";
-				var beforehover = "#757575";
-				var selected = "#3f3f3f"
-				var selectedWithShare = "#b2babd"
-				var gray = "#757575"
-			} else {
-				var drag = "rgba(0, 0, 0, 0.8)";
-				var beforehover = "#9e9e9e";
-				var selected = "#c0c0c0"
-				var selectedWithShare = "#003a30"
-				var gray = "#cccccc"
-			}
-			if (json.props) {
-				if (json.props.TheDeskAccent) {
-					var emphasized = json.props.TheDeskAccent
+		try {
+			var css
+			if (json.version) {
+				var bg = json.primary.background
+				var subcolor = json.primary.subcolor
+				var text = json.primary.text
+				var accent = json.primary.accent
+				if (json.base == "light") {
+					var drag = "rgba(255, 255, 255, 0.8)";
+					var beforehover = "#757575";
+					var selected = "#3f3f3f"
+					var selectedWithShare = "#b2babd"
+					var gray = "#757575"
+					var hisData = 'rgba(255, 255, 255, 0.9)'
 				} else {
-					var emphasized = secondary
+					var drag = "rgba(0, 0, 0, 0.8)";
+					var beforehover = "#9e9e9e";
+					var selected = "#c0c0c0"
+					var selectedWithShare = "#003a30"
+					var gray = "#cccccc"
+					var hisData = 'rgba(0, 0, 0, 0.8)'
 				}
-				if (json.props.TheDeskActive) {
-					var active = json.props.TheDeskActive
+				if (!json.advanced) {
+					json.advanced = {}
+				}
+				if (json.advanced.modal) {
+					var modal = json.advanced.modal
 				} else {
-					var active = primary
+					var modal = bg
 				}
-				if (json.props.TheDeskModal) {
-					var modal = json.props.TheDeskModal
+				if (json.advanced.modalFooter) {
+					var modalFooter = json.advanced.modalFooter
 				} else {
-					var modal = secondary
+					var modalFooter = bg
+					if (modal != bg) modalFooter = modal
 				}
-				if (json.props.TheDeskBottom) {
-					var bottom = json.props.TheDeskBottom
+				if (json.advanced.thirdColor) {
+					var thirdColor = json.advanced.thirdColor
 				} else {
-					var bottom = primary
+					var thirdColor = subcolor
 				}
-				if (json.props.TheDeskPostbox) {
-					var postbox = json.props.TheDeskPostbox
+				if (json.advanced.forthColor) {
+					var forthColor = json.advanced.forthColor
 				} else {
-					var postbox = primary
+					var forthColor = subcolor
+					if (thirdColor != subcolor) forthColor = thirdColor
 				}
-				if (json.props.TheDeskSubcolor) {
-					var subcolor = json.props.TheDeskSubcolor
+				if (json.advanced.bottom) {
+					var bottom = json.advanced.bottom
 				} else {
-					var subcolor = primary
+					var bottom = subcolor
+				}
+				if (json.advanced.emphasized) {
+					var emphasized = json.advanced.emphasized
+				} else {
+					var emphasized = accent
+				}
+				if (json.advanced.postbox) {
+					var postbox = json.advanced.postbox
+				} else {
+					var postbox = subcolor
+				}
+				if (json.advanced.active) {
+					var active = json.advanced.active
+				} else {
+					var active = accent
+				}
+				if (json.advanced.selected) {
+					var selected = json.advanced.selected
+				}
+				if (json.advanced.selectedWithShare) {
+					var selectedWithShare = json.advanced.selectedWithShare
 				}
-			} else {
-				var emphasized = primary
-				var acs = secondary
-				var active = primary
-				var modal = secondary
-				var bottom = primary
-				var postbox = primary
-				var subcolor = primary
-			}

-			var css = ".customtheme {--bg:" + secondary + ";--drag:" + drag + ";" +
-				"--color:" + text + ";--beforehover:" + beforehover + ";--modal:" +
-				modal + ";--subcolor:" + subcolor + ";--box:" + subcolor +
-				";--sidebar:" + bottom + ";--shared:" + emphasized + ";" +
-				"--notfbox:" + secondary + ";--emphasized:" + active + ";--his-data:" +
-				secondary +
-				";--active:" + active + ";--postbox:" + postbox + ";--modalfooter:" +
-				primary +
-				";--accentbtn:" + subcolor + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}"+
-				"--gray:" + gray + ";"+
-				".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}";
+				var css = ":root {--bg:" + bg + ";--drag:" + drag + ";" +
+					"--text:" + text + ";--beforehover:" + beforehover + ";--modal:" +
+					modal + ";--thirdColor:" + thirdColor + ";--subcolor:" + forthColor +
+					";--bottom:" + bottom + ";--accent:" + accent + ";" + ";--emphasized:" + emphasized + ";--his-data:" +
+					hisData +
+					";--active:" + active + ";--postbox:" + postbox + ";--modalfooter:" +
+					modalFooter + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare +
+					"--gray:" + gray + ";}" +
+					".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}";
+			} else {
+				var css = compatibleTheme(json)
+			}
 			e.sender.webContents.send('theme-css-response', css);
 		} catch (e) {
 			var css = "";
 		}

 	})
-	ipc.on('theme-json-list', function (e, arg) {
-		fs.readdir(app.getPath("userData"), function (err, files) {
-			if (err || !files) throw err;
-			var fileList = files.filter(function (file) {
-				if(file.match(/\.thedesktheme$/)){
-					var tfile = join(app.getPath("userData"), file)
-					return fs.statSync(tfile).isFile() && /.*\.thedesktheme$/.test(tfile)
-				}else{
-					return null
-				}
-			})
-			var themes = [];
-			for (var i = 0; i < fileList.length; i++) {
-				var themecss = join(app.getPath("userData"), fileList[i]);
-				var json = JSON5.parse(fs.readFileSync(themecss, 'utf8'));
-				themes.push({
-					name: json.name,
-					id: json.id
-				})
+	function compatibleTheme(json) {
+		var primary = json.vars.primary;
+		var secondary = json.vars.secondary;
+		var text = json.vars.text;
+		if (json.base == "light") {
+			var drag = "rgba(255, 255, 255, 0.8)";
+			var beforehover = "#757575";
+			var selected = "#3f3f3f"
+			var selectedWithShare = "#b2babd"
+			var gray = "#757575"
+		} else {
+			var drag = "rgba(0, 0, 0, 0.8)";
+			var beforehover = "#9e9e9e";
+			var selected = "#c0c0c0"
+			var selectedWithShare = "#003a30"
+			var gray = "#cccccc"
+		}
+		if (json.advanced) {
+			if (json.advanced.TheDeskAccent) {
+				var emphasized = json.advanced.TheDeskAccent
+			} else {
+				var emphasized = secondary
 			}
-			e.sender.webContents.send('theme-json-list-response', themes);
-		});
+			if (json.advanced.TheDeskActive) {
+				var active = json.advanced.TheDeskActive
+			} else {
+				var active = primary
+			}
+			if (json.advanced.TheDeskModal) {
+				var modal = json.advanced.TheDeskModal
+			} else {
+				var modal = secondary
+			}
+			if (json.advanced.TheDeskBottom) {
+				var bottom = json.advanced.TheDeskBottom
+			} else {
+				var bottom = primary
+			}
+			if (json.advanced.TheDeskPostbox) {
+				var postbox = json.advanced.TheDeskPostbox
+			} else {
+				var postbox = primary
+			}
+			if (json.advanced.TheDeskSubcolor) {
+				var subcolor = json.advanced.TheDeskSubcolor
+			} else {
+				var subcolor = primary
+			}
+		} else {
+			var emphasized = primary
+			var acs = secondary
+			var active = primary
+			var modal = secondary
+			var bottom = primary
+			var postbox = primary
+			var subcolor = primary
+		}
+
+		var css = ".customtheme {--bg:" + secondary + ";--drag:" + drag + ";" +
+			"--text:" + text + ";--beforehover:" + beforehover + ";--modal:" +
+			modal + ";--thirdColor:" + subcolor + ";--subcolor:" + subcolor +
+			";--bottom:" + bottom + ";--accent:" + emphasized + ";" +
+			"--subcolor:" + secondary + ";--emphasized:" + active + ";--his-data:" +
+			secondary +
+			";--active:" + active + ";--postbox:" + postbox + ";--modalfooter:" +
+			primary +
+			";--active:" + subcolor + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}" +
+			"--gray:" + gray + ";" +
+			".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}";
+		return css
+	}
+	ipc.on('theme-json-list', function (e, arg) {
+		var files1 = fs.readdirSync('./source/themes')
+		var file1List = files1.filter(function (file) {
+			if (file.match(/\.thedesktheme$/)) {
+				var tfile = join('./source/themes', file)
+				return fs.statSync(tfile).isFile() && /.*\.thedesktheme$/.test(tfile)
+			} else {
+				return null
+			}
+		})
+		var themes = [];
+		for (var i = 0; i < file1List.length; i++) {
+			var themecss = join('./source/themes', file1List[i]);
+			var json = JSON5.parse(fs.readFileSync(themecss, 'utf8'));
+			let compat = true
+			if (json.version) compat = false
+			themes.push({
+				name: json.name,
+				id: json.id,
+				compatible: compat,
+				default: true
+			})
+		}
+		var files2 = fs.readdirSync(app.getPath("userData"))
+		var file2List = files2.filter(function (file) {
+			if (file.match(/\.thedesktheme$/)) {
+				var tfile = join(app.getPath("userData"), file)
+				return fs.statSync(tfile).isFile() && /.*\.thedesktheme$/.test(tfile)
+			} else {
+				return null
+			}
+		})
+		for (var i = 0; i < file2List.length; i++) {
+			var themecss = join(app.getPath("userData"), file2List[i]);
+			var json = JSON5.parse(fs.readFileSync(themecss, 'utf8'));
+			let compat = true
+			if (json.version) compat = false
+			themes.push({
+				name: json.name,
+				id: json.id,
+				compatible: compat,
+				default: false
+			})
+		}
+		e.sender.webContents.send('theme-json-list-response', themes);
 	})
 }
 exports.css = css;
--- a/app/maxim.ja.json
+++ b/app/maxim.ja.json
@@ -51,5 +51,9 @@
    "トゥートした後ボックスを閉じるとかそのままにしておくとかは、設定で変えられます。",
    "OpenStickerへの登録データ募集中",
    "Microsoft Store版のアップデートは向こうに止められてます",
+    "いのちの輝き版ロゴ",
+    "いのちの輝き版ロゴ",
+    "いのちの輝き版ロゴ",
+    "いのちの輝き版ロゴ",
    "いのちの輝き版ロゴ"
-    ]
+]
--- a/app/nano.html
+++ b/app/nano.html
@@ -16,7 +16,7 @@
 				height: 100vh;
 				overflow: hidden;
 				font-family: sans-serif;
-				color: var(--color) !important;
+				color: var(--text) !important;
 			}

 			body {
@@ -45,7 +45,7 @@

 			textarea {
 				-webkit-app-region: no-drag;
-				color: var(--color) !important;
+				color: var(--text) !important;
 			}

 			::-webkit-scrollbar {
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
    "name": "thedesk",
-    "version": "21.1.0",
+    "version": "21.2.1",
    "codename": "Mayu",
    "description": "TheDesk is a Mastodon client for PC.",
    "repository": "https://github.com/cutls/TheDesk",
@@ -8,14 +8,19 @@
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "construct": "cd view/make && node make --automatic && cd ../../",
+        "construct:store": "cd view/make && node make --automatic --store && cd ../../",
        "dev": "npx electron ./ --dev",
        "dist": "build --linux snap",
        "watchview": "node view/make/make.js --automatic --watch",
        "build:js": "node build.js",
        "build": "node view/make/make.js --automatic && npx electron-builder",
-        "build:all": "npx electron-builder --win --linux",
-        "build:win": "npx electron-builder --win",
        "build:pwa": "node view/make/make.js --automatic --pwa",
+        "build:win:web": "node view/make/make.js --automatic && npx electron-builder --win",
+        "build:win:msstore": "node view/make/make.js --automatic --store && npx electron-builder --win appx",
+        "build:linux:web": "node view/make/make.js --automatic && npx electron-builder --linux",
+        "build:linux:snapstore": "node view/make/make.js --automatic --store && npx electron-builder --linux",
+        "build:mac:web": "node view/make/make.js --automatic && npx electron-builder --mac",
+        "build:mac:homebrew": "node view/make/make.js --automatic --store && npx electron-builder --mac",
        "lint:fix": "eslint js --fix" ,
        "lint": "eslint js" 
    },
@@ -92,8 +97,8 @@
            "icon": "build/thedesk.ico",
            "target": [
                "nsis",
-                "portable",
-                "appx"
+                "appx",
+                "portable"
            ]
        },
        "appx": {
@@ -115,6 +120,7 @@
            "icon": "build/icons",
            "target": [
                "zip",
+                "appImage",
                "snap",
                "deb"
            ],
--- a/app/source/themes/black.thedesktheme
+++ b/app/source/themes/black.thedesktheme
@@ -0,0 +1,27 @@
+{
+	name: 'Black',
+	author: 'TheDesk',
+	desc: 'TheDesk Default Theme',
+	base: 'dark',
+	primary: {
+		background: '#212121',
+		subcolor: '#424242',
+		text: '#fff',
+		accent: '#004d40',
+	},
+	advanced: {
+		modal: '#000',
+		modalFooter: '#212121',
+		third: '#212121',
+		forth: '#333333',
+		bottom: '#424242',
+		emphasized: '#4e342e',
+		postbox: '#424242',
+		active: '#3f51b5',
+		selected: '#3f3f3f',
+		selectedWithShared: '#003a30',
+	},
+	id: 'black',
+	version: '2',
+	default: true
+}
--- a/app/source/themes/blue.thedesktheme
+++ b/app/source/themes/blue.thedesktheme
@@ -0,0 +1,27 @@
+{
+	name: 'Blue',
+	author: 'TheDesk',
+	desc: 'TheDesk Default Theme',
+	base: 'light',
+	primary: {
+		background: '#c9e1ec',
+		subcolor: '#dff1ff',
+		text: '#000',
+		accent: '#e0ffe4',
+	},
+	advanced: {
+		modal: '#b2ebf2',
+		modalFooter: '#2196f3',
+		third: '#90caf9',
+		forth: '#90caf9',
+		bottom: '#b6e6f5',
+		emphasized: '#c5e1a5',
+		postbox: '#dff1ff',
+		active: '#2f7bb7',
+		selected: '#9dcade',
+		selectedWithShared: '#c1dac4',
+	},
+	id: 'blue',
+	version: '2',
+	default: true
+}
--- a/app/source/themes/brown.thedesktheme
+++ b/app/source/themes/brown.thedesktheme
@@ -0,0 +1,27 @@
+{
+	name: 'Brown',
+	author: 'TheDesk',
+	desc: 'TheDesk Default Theme',
+	base: 'dark',
+	primary: {
+		background: '#261411',
+		subcolor: '#4e342e',
+		text: '#fff',
+		accent: '#004d40',
+	},
+	advanced: {
+		modal: '#261411',
+		modalFooter: '#261411',
+		third: '#4e342e',
+		forth: '#4e342e',
+		bottom: '#4e342e',
+		emphasized: '#0d47a1',
+		postbox: '#4e342e',
+		active: '#827717',
+		selected: '#6d352b',
+		selectedWithShared: '#003a30',
+	},
+	id: 'brown',
+	version: '2',
+	default: true
+}
--- a/app/source/themes/green.thedesktheme
+++ b/app/source/themes/green.thedesktheme
@@ -0,0 +1,27 @@
+{
+	name: 'Green',
+	author: 'TheDesk',
+	desc: 'TheDesk Default Theme',
+	base: 'light',
+	primary: {
+		background: '#c8e6c9',
+		subcolor: '#a5d6a7',
+		text: '#000',
+		accent: '#ffcc80',
+	},
+	advanced: {
+		modal: '#81c784',
+		modalFooter: '#81c784',
+		third: '#a5d6a7',
+		forth: '#81c784',
+		bottom: '#c5e1a5',
+		emphasized: '#9e9d24',
+		postbox: '#a5d6a7',
+		active: '#33691e',
+		selected: '#78c17a',
+		selectedWithShared: '#caa266',
+	},
+	id: 'green',
+	version: '2',
+	default: true
+}
--- a/app/source/themes/indigo.thedesktheme
+++ b/app/source/themes/indigo.thedesktheme
@@ -0,0 +1,27 @@
+{
+	name: 'Indigo',
+	author: 'TheDesk',
+	desc: 'TheDesk Default Theme',
+	base: 'dark',
+	primary: {
+		background: '#031833',
+		subcolor: '#1a237e',
+		text: '#fff',
+		accent: '#004d40',
+	},
+	advanced: {
+		modal: '#0d1351',
+		modalFooter: '#031833',
+		third: '#0d1351',
+		forth: '#0d47a1',
+		bottom: '#0d1351',
+		emphasized: '#4e342e',
+		postbox: '#1a237e',
+		active: '#00acc1',
+		selected: '#214f8a',
+		selectedWithShared: '#003a30',
+	},
+	id: 'indigo',
+	version: '2',
+	default: true
+}
--- a/app/source/themes/polar.thedesktheme
+++ b/app/source/themes/polar.thedesktheme
@@ -0,0 +1,27 @@
+{
+	name: 'Polar Night',
+	author: 'TheDesk',
+	desc: 'TheDesk Default Theme',
+	base: 'dark',
+	primary: {
+		background: '#2e3440',
+		subcolor: '#434c5e',
+		text: '#ffffff',
+		accent: '#2d3b58',
+	},
+	advanced: {
+		modal: '#3b4252',
+		modalFooter: '#485166',
+		third: '#434c5e',
+		forth: '#4c566a',
+		bottom: '#3b4252',
+		emphasized: '#2f4b86',
+		postbox: '#434c5e',
+		active: '#2f4b86',
+		selected: '#464f61',
+		selectedWithShared: '#3e527e',
+	},
+	id: 'polar',
+	version: '2',
+	default: true
+}
--- a/app/source/themes/snow.thedesktheme
+++ b/app/source/themes/snow.thedesktheme
@@ -0,0 +1,27 @@
+{
+	name: 'Snow Storm',
+	author: 'TheDesk',
+	desc: 'TheDesk Default Theme',
+	base: 'light',
+	primary: {
+		background: '#eceff4',
+		subcolor: '#d8dee9',
+		text: '#36425a',
+		accent: '#c3d4e6',
+	},
+	advanced: {
+		modal: '#e5e9f0',
+		modalFooter: '#b2bed4',
+		third: '#d8dee9',
+		forth: '#4c566a',
+		bottom: '#eeeeee',
+		emphasized: '#88c0d0',
+		postbox: '#d8dee9',
+		active: '#81a1c1',
+		selected: '#b4bdd0',
+		selectedWithShared: '#a3afbb',
+	},
+	id: 'snow',
+	version: '2',
+	default: true
+}
--- a/app/source/themes/white.thedesktheme
+++ b/app/source/themes/white.thedesktheme
@@ -0,0 +1,27 @@
+{
+	name: 'White',
+	author: 'TheDesk',
+	desc: 'TheDesk Default Theme',
+	base: 'light',
+	primary: {
+		background: '#fff',
+		subcolor: '#fff',
+		text: '#000',
+		accent: '#cfd8dc',
+	},
+	advanced: {
+		modal: '#fff',
+		modalFooter: '#fafafa',
+		third: '#e0e0e0',
+		forth: '#fff',
+		bottom: '#eeeeee',
+		emphasized: '#81c784',
+		postbox: '#fff',
+		active: '#009688',
+		selected: '#c0c0c0',
+		selectedWithShared: '#b2babd',
+	},
+	id: 'white',
+	version: '2',
+	default: true
+}
--- a/app/view/make/acct.sample.html
+++ b/app/view/make/acct.sample.html
@@ -3,12 +3,12 @@
 	<head>
 		<title>Account Manager - TheDesk</title>
 		<meta content="width=device-width,initial-scale=1.0" name="viewport" />
+		<link href="../../css/themes.css" type="text/css" rel="stylesheet">
 		<link
 			href="../../@@node_base@@/materialize-css/dist/css/materialize.css"
 			type="text/css"
 			rel="stylesheet"
 		/>
-		<link href="../../css/themes.css" type="text/css" rel="stylesheet" />
 		<link href="../../css/master.css" type="text/css" rel="stylesheet" />
 		<link href="../../css/tl.css" rel="stylesheet" type="text/css" />
 		<link href="../../css/userdata.css" rel="stylesheet" type="text/css" />
@@ -26,7 +26,7 @@
 		</script>
 		<script type="text/javascript" src="https://cdn.crowdin.com/jipt/jipt.js"></script>
 		@@comment-end@@
-		@@pwa@@
+		@@pwa@@ @@store@@
 	</head>

 	<body id="mainView" class="@@pwaClass@@">
--- a/app/view/make/index.sample.html
+++ b/app/view/make/index.sample.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="@@lang@@">
 	<head>
-		<link href="../../css/themes.css" type="text/css" rel="stylesheet" />
 		<script type="text/javascript" src="../../js/ui/theme.js"></script>
+		<link href="../../css/themes.css" type="text/css" rel="stylesheet">
 		<meta content="width=device-width,initial-scale=1.0" name="viewport" />
 		<link
 			href="../../@@node_base@@/materialize-css/dist/css/materialize.css"
@@ -31,7 +31,7 @@
 			_jipt.push(['project', 'thedesk'])
 		</script>
 		<script type="text/javascript" src="https://cdn.crowdin.com/jipt/jipt.js"></script>
-		@@comment-end@@ @@pwa@@
+		@@comment-end@@ @@pwa@@ @@store@@
 	</head>

 	<body class="@@pwaClass@@">
@@ -69,7 +69,7 @@
 					<div id="demobottom">
 						<button
 							class="btn waves-effect"
-							style="width: 23rem;height: 2.5rem;line-height: 0;margin: 0; background-color: var(--accentbtn);"
+							style="width: 23rem;height: 2.5rem;line-height: 0;margin: 0; background-color: var(--active);"
 						>
 							<i
 								class="material-icons"
@@ -123,7 +123,6 @@
 				</div>
 			</div>
 		</div>
-		<div id="contextWrap" class="hide"></div>
 		<div id="post-box" class="z-depth-5">
 			<div id="post-bar" class="drag-bar">
 				<span id="unreact">@@post-new@@</span><span id="addreact" class="hide">Reaction</span>
@@ -1124,28 +1123,21 @@
 				<a href="https://thedesk.top" target="_blank">HP</a><br />
 				<a href="https://github.com/cutls/TheDesk" target="_blank">GitHub</a><br />
 				<br />
-				<div id="release-21-1-0_Mayu" class="release-do" style="display:none; ">
+				<div id="release-21-2-1_Mayu" class="release-do" style="display:none; ">
 					<br />
 					<a href="https://ja.mstdn.wiki/TheDesk" target="_blank">機能一覧</a><br />
 					Pixiv
 					FanboxやPatreonでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。最低月一更新。<br />
 					困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
-					<h5>Release Note 21.1.0 (Mayu)</h5>
+					<h5>Release Note 21.2.1 (Mayu)</h5>
+					<h5>Release Note 21.2.0 (Mayu)</h5>
 					<!--上のdivのidも変えてね-->
-					・コンテキストメニューが大きくずれるのを修正(今でもそれなりにズレます)  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
-・last_statusが日付だけ返すように変更されたことを受けての変更  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
-・アクセシビリティ対応の向上(色覚異常者用)  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
-・Last.fmのアルバムアートワークについて、暫定的に添付可能に  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
-・ハッシュタグストリーミングについて、追加のタグのストリーミングを実装(master追従インスタンスのみ対応)  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
-・TheDesk Nanoについて全く動いていなかったのを修正  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
-・サブスクリプションタイプのストリーミングに対応し、軽量化や安定性の向上が見込まれます。(master追従インスタンスのみ対応)  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
-・Unknownなメディアに対して、proxyを使うようにした。  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
-・タイムライン間のマージンを変更できるように  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a> <img src="https://user-images.githubusercontent.com/17561618/92328367-4b2c1a00-f09b-11ea-9d7f-e2b2f586d806.png">axfelix<br>
-・アナウンスメントでリアクションが付与できないバグを修正  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
-・ストリーミングが切れる可能性があるときに、画面を再読み込みするように。(master追従インスタンスのみ対応)  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
-・セレクタやドロップダウンのデザインの変更  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
-・フォローやフォロワー、お気に入りの遡りが上手くできていなかった  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
-・一部のカスタム絵文字を含むユーザー名の表示が崩れる  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a> <a onclick="udgEx('AmaiSaeta@oransns.com','main')" class="contributor"><img src="https://user-images.githubusercontent.com/17561618/92328483-1a001980-f09c-11ea-92c7-4c30a276b8f8.png">AmaiSaeta</a><br>
+					・テーマが自由かつ高度に編集可能に  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
+・一部のインスタンスで通知タイムラインが出なかった  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
+・カスタム通知音に関するバグの修正  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
+・カラム設定のリデザイン  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
+・Intgrated TLのストリーミングが古いインスタンスで不可能だった  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>
+・検索に使用したアカウントと別のアカウントでタグTLが追加されてしまうバグの修正  <a onclick="udgEx('Cutls@cutls.com','main')" class="contributor"><img src="https://media.thedesk.top/accounts/avatars/000/000/001/original/d34ef8bb49d5e011.png">cutls</a><br>

 				</div>
 				<div id="release-en" style="display:none">
--- a/app/view/make/language/en/main.json
+++ b/app/view/make/language/en/main.json
@@ -131,13 +131,17 @@
    "lang_layout_linkana": "Auto Link Analyzer",
    "lang_layout_linkanades": "Auto link analyzer",
    "lang_layout_tts": "Text to speech ",
-    "lang_layout_reconnect": "Reload this column",
+    "lang_layout_reconnect": "Reload",
    "lang_layout_headercolor": "Header color of this column",
    "lang_layout_nodata": "[No data]<br>F5/⌘+R to reload",
    "lang_layout_dm": "Direct Message",
    "lang_layout_webviewmode": "Prefer WebView",
-    "lang_excluded": "Excluded type of notification",
-    "lang_layout_excludingbt": "Show BT mode(OFF/Exclude BT/Only BT)",
+    "lang_layout_excluded": "Excluded type of notification",
+    "lang_layout_mention": "Mentions",
+    "lang_layout_fav": "Favourites",
+    "lang_layout_bt": "Boosts",
+    "lang_layout_poll": "Polls",
+    "lang_layout_excludingbt": "Show BT mode",
    "lang_layout_leftFold": "Stack to the left",
    "lang_layout_leftUnfold": "Dock on the right",
    "lang_layout_deleteColumn": "Delete this column",
@@ -222,6 +226,7 @@
    "lang_parse_html": "Show embed HTML",
    "lang_parse_notffilter": "Show this user's notifications",
    "lang_parse_hidden": "Unvisible quoted toot",
+    "lang_parse_disconnected": "Streaming has been disconnected(retry after 3s)",
    "lang_misskeyparse_renote": "Repost",
    "lang_misskeyparse_renoteqt": "Renote",
    "lang_misskeyparse_reaction": "Reaction",
@@ -236,6 +241,7 @@
    "lang_misskeyparse_reacted": " reacted your following post.",
    "lang_setting_time": "Time format:{{set}}",
    "lang_setting_theme": "Theme:{{set}}",
+    "lang_setting_compat": "Compatible",
    "lang_setting_nsfw": "Sensitive media:{{set}}",
    "lang_setting_cw": "CW:{{set}}",
    "lang_setting_cwtext": "Default CW text:{{set}}",
--- a/app/view/make/language/en/setting.json
+++ b/app/view/make/language/en/setting.json
@@ -44,19 +44,26 @@
  "srcUrl": "Search engine",
  "srcUrlWarn": "{q} will be replaced to query.",
  "themeSel": "Select theme",
-  "customtheme": "Edit and add custom themes",
+  "customtheme": "Edit and add themes",
  "customthemeDirection": "Color scheme",
-  "advanced":"Advanced options(6 additional colors)",
-  "advancedWarn":"Advanced options will be <i>null</i> if you set nothing, while basic 3 options will be white(<i>fff</i>). They(adv. options) will be reset if you saved with advanced panel closed.",
-  "active": "Background of Show or CW buttons, selected options...",
-  "modal": "Background of modals",
-  "bottom":"Background of bottom bar",
-  "postbox":"Background of post box and menu",
-  "subcolor":"Subcolor, has harmony with secondary color",
-  "primary": "Background color",
-  "secondarycolor": "Background of components",
+  "advanced":"Advanced options",
+  "advancedWarn":"",
+  "use": "Use this",
+  "copyFrom": "Copy from",
+  "bg": "Background color",
+  "subcolor":"Distinguishable from background",
  "text": "Text color",
  "accent": "Background of boosts",
+  "modal": "Background of modal window",
+  "modalFooter": "Background of modal window's footer",
+  "thirdColor": "Backgroud of tag buttons, etc(near to Background)",
+  "forthColor": "Title bar(same scheme to Background)",
+  "bottom":"Background of menu-bar at bottom of window",
+  "emphasized": "Emphasized toot's background",
+  "postbox":"Background of post-box and menu",
+  "active": "Background of 'active' elements",
+  "selected": "Background of selected with arrow keys",
+  "selectedWithShare": "Background of selected with arrow keys(boosted toots)",
  "add_new": "Add new",
  "name": "Name",
  "desc": "About this theme",
--- a/app/view/make/language/ja-KS/main.json
+++ b/app/view/make/language/ja-KS/main.json
@@ -130,13 +130,17 @@
    "lang_layout_linkanades": "リンクの解析を切り替え",
    "lang_layout_remoteOnly": "リモートのみ",
    "lang_layout_tts": "読み上げ",
-    "lang_layout_reconnect": "カラム再読込",
+    "lang_layout_reconnect": "再読込",
    "lang_layout_headercolor": "TLヘッダーカラー",
    "lang_layout_nodata": "[トゥートあらへん]<br>F5/⌘+Rで再読込してみて。",
    "lang_layout_dm": "ダイレクトメッセージ",
    "lang_layout_webviewmode": "WebView優先",
-    "lang_excluded": "見せへん通知",
-    "lang_layout_excludingbt": "BT表示(OFF/BT除外/BTだけ)",
+    "lang_layout_excluded": "見せへん通知",
+    "lang_layout_mention": "メンション",
+    "lang_layout_fav": "お気に入り",
+    "lang_layout_bt": "ブースト",
+    "lang_layout_poll": "投票",
+    "lang_layout_excludingbt": "BT表示",
    "lang_layout_leftFold": "左へ重ねる",
    "lang_layout_leftUnfold": "右へ出す",
    "lang_layout_deleteColumn": "カラム削除",
@@ -217,6 +221,7 @@
    "lang_parse_nsfw": "閲覧注意",
    "lang_parse_html": "埋め込みを表示",
    "lang_parse_notffilter": "このユーザーの通知だけ見る",
+    "lang_parse_disconnected": "ストリーミングがなんかおかしいねん(3秒後にもっかいやってみる)",
    "lang_misskeyparse_renote": "再投稿",
    "lang_misskeyparse_renoteqt": "引用",
    "lang_misskeyparse_reaction": "リアクション",
@@ -230,6 +235,7 @@
    "lang_misskeyparse_quoted": "が引用",
    "lang_misskeyparse_reacted": "がリアクション",
    "lang_setting_time": "時間設定を{{set}}に設定したで。",
+    "lang_setting_compat": "互換テーマ",
    "lang_setting_theme": "テーマ設定を{{set}}に設定したで。",
    "lang_setting_nsfw": "画像表示設定を{{set}}に設定したで。",
    "lang_setting_cw": "テキスト表示設定を{{set}}に設定したで。",
--- a/app/view/make/language/ja-KS/setting.json
+++ b/app/view/make/language/ja-KS/setting.json
@@ -43,19 +43,26 @@
  "srcUrl": "検索エンジン",
  "srcUrlWarn": "{q}が検索文字列になるで。",
  "themeSel": "テーマの選択",
-  "customtheme": "カスタムテーマの作成・編集",
+  "customtheme": "テーマの作成・編集",
  "customthemeDirection": "色の系統",
-  "advanced":"拡張項目(6つ)を開く",
-  "advancedWarn":"拡張項目は設定せんと「指定なし」に、基本3項目は白(fff)になるで。拡張項目を閉じた状態で「変更」すると拡張項目は消してまうで。",
-  "primary": "全体の背景色など",
-  "secondarycolor": "補助要素に使われる背景色",
+  "advanced":"拡張項目を開く",
+  "advancedWarn":"",
+  "use": "使用",
+  "copyFrom": "設定をコピー",
+  "bg": "全体の背景色など",
+  "subcolor":"各要素に使われる背景と区別できる色",
  "text": "テキストの色",
  "accent": "ブーストの背景色など",
-  "active": "CWボタンやメニュー選択時の背景色",
  "modal": "モーダルウィンドウの背景色",
+  "modalFooter": "モーダルウィンドウのフッターの背景色",
+  "thirdColor": "タブボタンの背景色等(ほぼ背景色)",
+  "forthColor": "リアクションボタンやタイトルバーの色等(背景色と同系)",
  "bottom":"下のメニューバーの背景色",
+  "emphasized": "強調されたトゥートの背景色",
  "postbox":"投稿ボックスやメニューの色",
-  "subcolor":"背景に準ずる色",
+  "active": "CWボタンやメニュー選択時の背景色",
+  "selected": "矢印キーでトゥートを選択したときの背景色",
+  "selectedWithShare": "矢印キーでBTされたトゥートを選択したときの背景色",
  "add_new": "新規作成",
  "name": "名前",
  "desc": "説明",
--- a/app/view/make/language/ja/main.json
+++ b/app/view/make/language/ja/main.json
@@ -132,13 +132,17 @@
    "lang_layout_linkana": "リンク解析",
    "lang_layout_linkanades": "リンクの解析を切り替え",
    "lang_layout_tts": "読み上げ",
-    "lang_layout_reconnect": "カラム再読込",
+    "lang_layout_reconnect": "再読込",
    "lang_layout_headercolor": "TLヘッダーカラー",
    "lang_layout_nodata": "[ここにトゥートはありません。]<br>F5/⌘+Rで再読込できます。",
    "lang_layout_dm": "ダイレクトメッセージ",
    "lang_layout_webviewmode": "WebView優先",
-    "lang_excluded": "除外する通知",
-    "lang_layout_excludingbt": "BT表示(OFF/BT除外/BTのみ)",
+    "lang_layout_excluded": "除外する通知",
+    "lang_layout_mention": "メンション",
+    "lang_layout_fav": "お気に入り",
+    "lang_layout_bt": "ブースト",
+    "lang_layout_poll": "投票",
+    "lang_layout_excludingbt": "BT表示",
    "lang_layout_leftFold": "左へ重ねる",
    "lang_layout_leftUnfold": "右へ出す",
    "lang_layout_deleteColumn": "カラム削除",
@@ -223,6 +227,7 @@
    "lang_parse_html": "埋め込みを表示",
    "lang_parse_hidden": "ミュートされた引用トゥート",
    "lang_parse_notffilter": "このユーザーの通知のみを表示",
+    "lang_parse_disconnected": "ストリーミングから切断されました(3秒後に再試行)",
    "lang_misskeyparse_renote": "再投稿",
    "lang_misskeyparse_renoteqt": "引用",
    "lang_misskeyparse_reaction": "リアクション",
@@ -237,6 +242,7 @@
    "lang_misskeyparse_reacted": "がリアクション",
    "lang_setting_time": "時間設定を{{set}}に設定しました。",
    "lang_setting_theme": "テーマ設定を{{set}}に設定しました。",
+    "lang_setting_compat": "互換テーマ",
    "lang_setting_nsfw": "画像表示設定を{{set}}に設定しました。",
    "lang_setting_cw": "テキスト表示設定を{{set}}に設定しました。",
    "lang_setting_cwtext": "デフォルトの警告文を「{{set}}」に設定しました。",
--- a/app/view/make/language/ja/setting.json
+++ b/app/view/make/language/ja/setting.json
@@ -44,19 +44,26 @@
  "srcUrl": "検索エンジン",
  "srcUrlWarn": "{q}が検索文字列に置換されます。",
  "themeSel": "テーマの選択",
-  "customtheme": "カスタムテーマの作成・編集",
+  "customtheme": "テーマの作成・編集",
  "customthemeDirection": "色の系統",
-  "advanced":"拡張項目(6つ)を開く",
-  "advancedWarn":"拡張項目は設定しないと「指定なし」に、基本3項目は白(fff)になります。拡張項目を閉じた状態で「変更」すると拡張項目はすべてリセットされます。",
-  "primary": "全体の背景色など",
-  "secondarycolor": "補助要素に使われる背景色",
+  "advanced":"拡張項目を開く",
+  "advancedWarn":"",
+  "use": "使用",
+  "copyFrom": "設定をコピー",
+  "bg": "全体の背景色など",
+  "subcolor":"各要素に使われる背景と区別できる色",
  "text": "テキストの色",
  "accent": "ブーストの背景色など",
-  "active": "CWボタンやメニュー選択時の背景色",
  "modal": "モーダルウィンドウの背景色",
+  "modalFooter": "モーダルウィンドウのフッターの背景色",
+  "thirdColor": "タブボタンの背景色等(ほぼ背景色)",
+  "forthColor": "リアクションボタンやタイトルバーの色等(背景色と同系)",
  "bottom":"下のメニューバーの背景色",
+  "emphasized": "強調されたトゥートの背景色",
  "postbox":"投稿ボックスやメニューの色",
-  "subcolor":"背景に準ずる色",
+  "active": "CWボタンやメニュー選択時の背景色",
+  "selected": "矢印キーでトゥートを選択したときの背景色",
+  "selectedWithShare": "矢印キーでBTされたトゥートを選択したときの背景色",
  "add_new": "新規作成",
  "name": "名前",
  "desc": "説明",
--- a/app/view/make/make.js
+++ b/app/view/make/make.js
@@ -16,8 +16,12 @@ var pwa = false
 if (process.argv.indexOf('--pwa') > 0) {
 	var pwa = true
 }
+var store = false
+if (process.argv.indexOf('--store') > 0) {
+	var store = true
+}

-function main(ver, basefile, pwa) {
+function main(ver, basefile, pwa, store) {
 	const execSync = require('child_process').execSync
 	let gitHash = execSync('git rev-parse HEAD')
 		.toString()
@@ -58,7 +62,7 @@ function main(ver, basefile, pwa) {
 			langstr +
 			'<a onclick="changelang(\'' +
 			lang +
-			'\')" class="pointer" style="margin:4px;border: 1px solid var(--color); padding: 3px">' +
+			'\')" class="pointer" style="margin:4px;border: 1px solid var(--text); padding: 3px">' +
 			langsh[n] +
 			'</a>'
 		let mainJson = JSON.parse(
@@ -144,7 +148,7 @@ function main(ver, basefile, pwa) {
 			source = source.replace(/@@lang@@/g, lang)
 			source = source.replace(/@@langlist@@/g, langstr)
 			if(pwa) {
-				source = source.replace(/@@pwa@@/g, `<link rel="manifest" href="/manifest.json" />
+				source = source.replace(/@@pwa@@/g, `<link rel="manifest" href="../../manifest.json" />
 				<script>var pwa = true;"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.pwa.js").then(e=>{});</script>`)
 				source = source.replace(/@@node_base@@/g, 'dependencies')
 				source = source.replace(/@@pwaClass@@/g, 'pwaView')
@@ -153,11 +157,16 @@ function main(ver, basefile, pwa) {
 				source = source.replace(/@@node_base@@/g, 'node_modules')
 				source = source.replace(/@@pwaClass@@/g, '')
 			}
+			if (store) {
+				source = source.replace(/@@store@@/g, '<script>var store = true;</script>')
+			} else {
+				source = source.replace(/@@store@@/g, '<script>var store = false;</script>')
+			}
 			fs.writeFileSync(basefile + 'view/' + lang + '/' + pages[i], source)
 		}
 	}
 }
-main(ver, basefile, pwa)
+main(ver, basefile, pwa, store)

 //if --watch, to yarn dev
 if (process.argv.indexOf('--watch') !== -1) {
--- a/app/view/make/setting.sample.html
+++ b/app/view/make/setting.sample.html
@@ -25,11 +25,13 @@
 		.pcr-result {
 			height: 1rem !important;
 		}
+
 		.container-after-titlebar {
 			padding: 20px;
 		}
 	</style>
 	@@pwa@@
+	@@store@@
 </head>

 <body id="mainView" style="overflow-y:scroll" class="@@pwaClass@@">
@@ -37,7 +39,7 @@
 	<script type="text/javascript" src="../../js/platform/first.js"></script>
 	<script type="text/javascript" src="../../@@node_base@@/materialize-css/dist/js/materialize.js"></script>
 	<script type="text/javascript" src="main.js"></script>
-	<script src="../../@@node_base@@/json5/dist/index.min.js"></script> 
+	<script src="../../@@node_base@@/json5/dist/index.min.js"></script>
 	<script src="../../@@node_base@@/vue/dist/vue.min.js"></script>
 	<script type="text/javascript" src="setting.vue.js"></script>
 	<script type="text/javascript" src="../../@@node_base@@/sweetalert2/dist/sweetalert2.all.min.js"></script>
@@ -57,8 +59,8 @@
 					style="width:100%; max-width:15rem;">@@export@@</button>
 				<button onclick="importSettings()" class="btn waves-effect cyan darken-3"
 					style="width:100%; max-width:15rem;">@@import@@</button><br>
-					@@backupWarn@@<br>
-					<input type="text" id="imp-exp" style="width: 22rem">
+				@@backupWarn@@<br>
+				<input type="text" id="imp-exp" style="width: 22rem">
 				<div id="envView">
 					<template v-for="(item, i) in config">
 						<h5>{{item.text.head}}</h5>
@@ -106,50 +108,12 @@
 				<br>
 			</div>
 		</li>
-		<li>
+		<li class="pwa">
 			<div class="collapsible-header">
 				<i class="material-icons">color_lens</i>@@theme@@
 			</div>
 			<div class="collapsible-body">
 				<h4>@@themeSel@@</h4>
-				<label>
-					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
-					<span data-ct="black">Black</span>
-				</label>
-				<label>
-					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
-					<span data-ct="white">White</span>
-				</label>
-				<label>
-					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo"
-						value="indigo" />
-					<span data-ct="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></span>
-				</label>
-				<label>
-					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
-					<span data-ct="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></span>
-				</label>
-				<label>
-					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
-					<span data-ct="green">Green<span class="imas hide">(ユースフルロマンス)</span></span>
-				</label>
-				<label>
-					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="blue" value="blue" />
-					<span data-ct="blue">Blue<span class="imas hide">(渚の花嫁)</span></span>
-				</label>
-				<label>
-					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="polar" value="polar" />
-					<span data-ct="polar">Polar Night<span class="imas hide">(ひみつの小夜曲)</span></span>
-				</label>
-				<label>
-					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="snow" value="snow" />
-					<span data-ct="snow">Snow Storm<span class="imas hide">(極光のしらべ)</span></span>
-				</label>
-				<label>
-					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom"
-						value="custom" />
-					<span data-ct="custom">custom</span>
-				</label>
 				<div style="width:22rem" id="sel-selector">
 					<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
 				</div>
@@ -174,74 +138,150 @@
 					<input class="with-gap" onchange="settings()" name="direction" type="radio" id="light"
 						value="light" />
 					<span>Light</span>
-				</label><br>
+				</label><br><br />
 				<button class="btn waves-effect" onclick="advanced()">@@advanced@@</button>
 				<span class="advanced hide">@@advancedWarn@@</span>
 				<div id="pickers">
 					<div>
-						<h5>Primary</h5>@@secondarycolor@@
-						<div id="color-picker0-wrap">
-							<div class="color-picker" id="color-picker0"></div>
-						</div>
-						<input type="hidden" id="color-picker0_value">
+						<h5>Background</h5>@@bg@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_0" value="1" checked disabled />
+							<span>@@use@@</span>
+						</label><br />
+						<input type="color" id="color-picker0_value">
 					</div>
 					<div>
-						<h5>Secondary</h5>@@primary@@
-						<div id="color-picker1-wrap">
-							<div class="color-picker" id="color-picker1"></div>
-						</div>
-						<input type="hidden" id="color-picker1_value">
+						<h5>Text</h5>@@text@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_1" value="1" checked disabled />
+							<span>@@use@@</span>
+						</label><br />
+						<input type="color"  id="color-picker1_value">
 					</div>
 					<div>
-						<h5>Texts</h5>@@text@@
-						<div id="color-picker2-wrap">
-							<div class="color-picker" id="color-picker2"></div>
-						</div>
-						<input type="hidden" id="color-picker2_value">
+						<h5>Subcolor</h5>@@subcolor@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_2" value="1" checked disabled />
+							<span>@@use@@</span>
+						</label><br />
+						<input type="color"  id="color-picker2_value">
+					</div>
+					<div>
+						<h5>Accent</h5>@@accent@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_3" value="1" checked disabled />
+							<span>@@use@@</span>
+						</label><br />
+						<input type="color"  id="color-picker3_value">
+					</div>
+
+					<div class="advanced hide">
+						<h5>Modal</h5>@@modal@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_4" value="1" />
+							<span>@@use@@</span>
+						</label><br />
+						@@copyFrom@@:
+							<a class="pointer" onclick="copyColor('background','modal')">Background</a>
+						<br />
+						<input type="color"  id="color-picker4_value">
 					</div>
 					<div class="advanced hide">
-						<h5>Accent</h5>@@accent@@
-						<div id="color-picker3-wrap">
-							<div class="color-picker" id="color-picker3"></div>
-						</div>
-						<input type="hidden" id="color-picker3_value">
+						<h5>Modal Footer</h5>@@modalFooter@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_5" value="1" />
+							<span>@@use@@</span>
+						</label><br />
+						@@copyFrom@@:
+							<a class="pointer" onclick="copyColor('background','modalFooter')">Background</a>/
+							<a class="pointer" onclick="copyColor('modal','modalFooter')">Modal</a>
+						<br />
+						<input type="color"  id="color-picker5_value">
 					</div>
 					<div class="advanced hide">
-						<h5>Active</h5>@@active@@
-						<div id="color-picker4-wrap">
-							<div class="color-picker" id="color-picker4"></div>
-						</div>
-						<input type="hidden" id="color-picker4_value">
+						<h5>3rd Color</h5>@@thirdColor@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_6" value="1" />
+							<span>@@use@@</span>
+						</label><br />
+						@@copyFrom@@:
+							<a class="pointer" onclick="copyColor('subcolor','third')">Subcolor</a>
+						<br />
+						<input type="color"  id="color-picker6_value">
 					</div>
 					<div class="advanced hide">
-						<h5>Modal</h5>@@modal@@
-						<div id="color-picker5-wrap">
-							<div class="color-picker" id="color-picker5"></div>
-						</div>
-						<input type="hidden" id="color-picker5_value">
+						<h5>4th Color</h5>@@forthColor@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_7" value="1" />
+							<span>@@use@@</span>
+						</label><br />
+						@@copyFrom@@:
+							<a class="pointer" onclick="copyColor('subcolor','forth')">Subcolor</a>/
+							<a class="pointer" onclick="copyColor('third','forth')">3rd Color</a>
+						<br />
+						<input type="color"  id="color-picker7_value">
 					</div>
 					<div class="advanced hide">
-						<h5>Bottom</h5>@@bottom@@
-						<div id="color-picker6-wrap">
-							<div class="color-picker" id="color-picker6"></div>
-						</div>
-						<input type="hidden" id="color-picker6_value">
+						<h5>Bottom</h5>@@bottom@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_8" value="1" />
+							<span>@@use@@</span>
+						</label><br />
+						@@copyFrom@@:
+							<a class="pointer" onclick="copyColor('subcolor','bottom')">Subcolor</a>
+						<br />
+						<input type="color"  id="color-picker8_value">
 					</div>
 					<div class="advanced hide">
-						<h5>Postbox</h5>@@postbox@@
-						<div id="color-picker7-wrap">
-							<div class="color-picker" id="color-picker7"></div>
-						</div>
-						<input type="hidden" id="color-picker7_value">
+						<h5>2nd Accent</h5>@@emphasized@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_9" value="1" />
+							<span>@@use@@</span>
+						</label><br />
+						@@copyFrom@@:
+							<a class="pointer" onclick="copyColor('accent','emphasized')">Accent</a>
+						<br />
+						<input type="color"  id="color-picker9_value">
 					</div>
 					<div class="advanced hide">
-						<h5>Subcolor</h5>@@subcolor@@
-						<div id="color-picker8-wrap">
-							<div class="color-picker" id="color-picker8"></div>
-						</div>
-						<input type="hidden" id="color-picker8_value">
+						<h5>Postbox</h5>@@postbox@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_10" value="1" />
+							<span>@@use@@</span>
+						</label><br />
+						@@copyFrom@@:
+							<a class="pointer" onclick="copyColor('subcolor','postbox')">Subcolor</a>
+						<br />
+						<input type="color"  id="color-picker10_value">
 					</div>
-				</div>
+					<div class="advanced hide">
+						<h5>Active</h5>@@active@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_11" value="1" />
+							<span>@@use@@</span>
+						</label><br />
+						@@copyFrom@@:
+							<a class="pointer" onclick="copyColor('accent','active')">Accent</a>
+						<br />
+						<input type="color"  id="color-picker11_value">
+					</div>
+					<div class="advanced hide">
+						<h5>Selected</h5>@@selected@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_12" value="1" />
+							<span>@@use@@</span>
+						</label><br />
+						<input type="color"  id="color-picker12_value">
+					</div>
+					<div class="advanced hide">
+						<h5>Selected with shared</h5>@@selectedWithShare@@<br />
+						<label>
+							<input type="checkbox" class="filled-in" id="use-color_13" value="1" />
+							<span>@@use@@</span>
+						</label><br />
+						<input type="color"  id="color-picker13_value">
+					</div>
+				</div><br /><br />
 				<button class="btn-large waves-effect" onclick="customComp()">@@change@@</button>&nbsp;<button
 					class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">@@delete@@</button><br><br>
 				<input type="text" style="width:22rem;height:40px;" id="custom_json" class="materialize-textarea"
@@ -443,15 +483,15 @@
 			</div>
 			<div class="collapsible-body">
 				<h5>@@bouyomi@@</h5>
-				@@bouyomiWarn@@<a href="https://github.com/xztaityozx/BouyomiChan-WebSocket-Plugin" target="_blank">GitHub</a><br>
+				@@bouyomiWarn@@<a href="https://github.com/xztaityozx/BouyomiChan-WebSocket-Plugin"
+					target="_blank">GitHub</a><br>
 				<label>
 					<input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_yes"
 						value="yes" />
 					<span>@@yes@@</span>
 				</label>
 				<label>
-					<input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_no"
-						value="no" />
+					<input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_no" value="no" />
 					<span>@@no@@</span>
 				</label>
 				<h5>@@speed@@</h5>
@@ -534,16 +574,19 @@
 		style="width:100%; max-width:40rem;"><img src="../../img/desk_full.svg" class="left" width="25"
 			style="padding-top:5px;">Main author: Cutls@cutls.com</a>
 	<br>
-	TheDesk @ <a href="https://github.com/cutls/TheDesk/commits/@@gitHash@@">@@gitHash@@</a> - <a onclick="checkupd(); return localStorage.removeItem('new-ver-skip'); location.href='index.html';"
-	class="pointer pwa">@@checkup@@</a><br>
+	TheDesk @ <a href="https://github.com/cutls/TheDesk/commits/@@gitHash@@">@@gitHash@@</a> - <a
+		onclick="checkupd(); return localStorage.removeItem('new-ver-skip'); location.href='index.html';"
+		class="pointer pwa">@@checkup@@</a><br>
 	<br>
 	Kyash<br>
 	<img src="../../img/kyash.png" width="100"><br>
-		<a href="https://status.cutls.com/">
-			<img src="https://status.cutls.com/badge-service?site=thedesk.top">
-		</a><br>
-		<h5>OSS License@@ossJP@@</h5>
-		<a href="https://app.fossa.com/projects/git%2Bgithub.com%2Fcutls%2FTheDesk/refs/branch/master/@@gitHash@@" alt="FOSSA Status"><img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcutls%2FTheDesk.svg?type=small"/></a>
+	<a href="https://status.cutls.com/">
+		<img src="https://status.cutls.com/badge-service?site=thedesk.top">
+	</a><br>
+	<h5>OSS License@@ossJP@@</h5>
+	<a href="https://app.fossa.com/projects/git%2Bgithub.com%2Fcutls%2FTheDesk/refs/branch/master/@@gitHash@@"
+		alt="FOSSA Status"><img
+			src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcutls%2FTheDesk.svg?type=small" /></a>
 	<br>
 	<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018
 		Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -2240,7 +2240,7 @@ matcher@^2.0.0:

 "materialize-css@git://github.com/cutls/materialize#v1-dev":
  version "1.0.0"
-  resolved "git://github.com/cutls/materialize#6007f1cbd3cef9ffd71e203ee4a91056911e9bfe"
+  resolved "git://github.com/cutls/materialize#e92efb770c6f17197b12b9af14b388f1454b5b4d"
  dependencies:
    grapheme-splitter "^1.0.4"
Author	SHA1	Message	Date
cutls	ccc44ca769	bump	2020-09-09 20:54:31 +09:00
cutls	82c5a853cb	fix	2020-09-09 20:54:07 +09:00
cutls	e11af25ba6	TheDesk 21.2.1 (Mayu)	2020-09-09 20:46:52 +09:00
cutls	16b68bb190	TheDesk 21.2.0 (Mayu)	2020-09-09 17:15:19 +09:00
cutls	051dbb3b1b	For store only build	2020-09-09 16:59:18 +09:00
cutls	bdf2b9be71	disabled version checker for MS Store	2020-09-09 16:58:41 +09:00
cutls	0b6a76d01a	travis trial 6	2020-09-09 16:53:44 +09:00
cutls	bd1e1f7ee8	travis trial 5	2020-09-09 16:49:00 +09:00
cutls	e9c7ffe825	travis trial 4	2020-09-09 16:45:32 +09:00
cutls	9e735bc7df	travis trial 3	2020-09-09 16:42:12 +09:00
cutls	eefc03c4f3	travis trial 2	2020-09-09 16:37:17 +09:00
cutls	135caffaec	travis trial 1	2020-09-09 16:34:45 +09:00
cutls	c1f7abac58	not to ban for MS Store	2020-09-09 16:33:11 +09:00
cutls	a325c50f1f	pwa exp	2020-09-08 23:56:35 +09:00
cutls	37daa5638b	to pwa	2020-09-08 23:46:55 +09:00
cutls	8118806f4e	fix input type color css	2020-09-08 23:39:06 +09:00
cutls	3f7aaa7e99	new custom/default css	2020-09-08 23:35:30 +09:00
cutls	700de676d0	to streaming notifications with new subscription type streaming	2020-09-08 23:35:13 +09:00
cutls	52a8ec8033	to fix translate btn design	2020-09-08 23:34:42 +09:00
cutls	40a884b4f5	Redesign of column setting	2020-09-08 18:50:05 +09:00
cutls	62df4e2fac	bug of custom sound	2020-09-08 18:49:55 +09:00
cutls	69d60a7372	I8d TL streaming	2020-09-07 19:06:57 +09:00
cutls	9623b79197	#317 dropdown menu with library	2020-09-07 16:36:25 +09:00
cutls	ec1481aed0	fix	2020-09-07 00:58:26 +09:00
cutls	1e76867fd1	TheDesk 21.1.1 (Mayu)	2020-09-07 00:55:47 +09:00