Add Custom Themes scheme

app/css/master.css

@@ -336,7 +336,7 @@ blockquote:before,
 #menu {
   position: fixed;
   z-index: 9999;
-  background-color: var(--box);
+  background-color: var(--postbox);
   width: 540px;
   top: calc(50% - 150px);
   left: calc(50% - 250px);

app/js/ui/settings.js

@@ -518,14 +518,38 @@ function customComp() {
 	if (!secondaryC) { secondaryC = "rgb(255,255,255)" }
 	var textC = $("#color-picker2_value").val();
 	if (!textC) { textC = "rgb(255,255,255)" }
-	var accentC = $("#color-picker3_value").val();
-	if (!accentC) { accentC = "rgb(255,255,255)" }
 	var multi = localStorage.getItem("multi");
+	if($("#pickers").hasClass("advanceTheme")){
+		var accentC = $("#color-picker3_value").val();
+		if (!accentC) { accentC = null }
+		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 = {}
+	}
+	
 	var my = JSON.parse(multi)[0].name;
 	var id = $("#custom-edit-sel").val();
 	if (id == "add_new") {
 		id = makeCID();
 	}
+	localStorage.setItem("customtheme-id", id)
 	var json = {
 		"name": nameC,
 		"author": my,
@@ -536,29 +560,21 @@ function customComp() {
 			"secondary": secondaryC,
 			"text": textC
 		},
-		"props": {
+		"props": advanceTheme,
-			"TheDeskAccent": accentC
-		},
 		"id": id
 	}
 	$("#custom_json").val(JSON.stringify(json));
-	themes();
+	themes("custom");
+	$("#custom").prop("checked", true);
 	$("#custom_name").val("");
 	$("#custom_desc").val("");
 	$("#dark").prop("checked", true);
 	$("#custom_json").val("");
-	$("#color-picker0-wrap").html('<div class="color-picker" id="color-picker0"></div>')
+	for(var i =0;i <= 8; i++){
-	$("#color-picker1-wrap").html('<div class="color-picker" id="color-picker1"></div>')
+		$("#color-picker" + i + "-wrap").html('<div class="color-picker" id="color-picker' + i + '"></div>')
-	$("#color-picker2-wrap").html('<div class="color-picker" id="color-picker2"></div>')
+		$("#color-picker" + i + "_value").val("");
-	$("#color-picker3-wrap").html('<div class="color-picker" id="color-picker3"></div>')
+		pickerDefine(i, "fff");
-	$("#color-picker0_value").val("");
+	}
-	$("#color-picker1_value").val("");
-	$("#color-picker2_value").val("");
-	$("#color-picker3_value").val("");
-	pickerDefine(0, "fff");
-	pickerDefine(1, "fff");
-	pickerDefine(2, "fff");
-	pickerDefine(3, "fff");
 	postMessage(["themeJsonCreate", JSON.stringify(json)], "*")
 }
 function deleteIt() {
@@ -567,18 +583,11 @@ function deleteIt() {
 	$("#custom_desc").val("");
 	$("#dark").prop("checked", true);
 	$("#custom_json").val("");
-	$("#color-picker0-wrap").html('<div class="color-picker" id="color-picker0"></div>')
+	for(var i =0;i <= 8; i++){
-	$("#color-picker1-wrap").html('<div class="color-picker" id="color-picker1"></div>')
+		$("#color-picker" + i + "-wrap").html('<div class="color-picker" id="color-picker' + i + '"></div>')
-	$("#color-picker2-wrap").html('<div class="color-picker" id="color-picker2"></div>')
+		$("#color-picker" + i + "_value").val("");
-	$("#color-picker3-wrap").html('<div class="color-picker" id="color-picker3"></div>')
+		pickerDefine(i, "fff");
-	$("#color-picker0_value").val("");
+	}
-	$("#color-picker1_value").val("");
-	$("#color-picker2_value").val("");
-	$("#color-picker3_value").val("");
-	pickerDefine(0, "fff");
-	pickerDefine(1, "fff");
-	pickerDefine(2, "fff");
-	pickerDefine(3, "fff");
 	postMessage(["themeJsonDelete", id], "*")
 }
 function ctLoad() {
@@ -610,18 +619,11 @@ function custom() {
 		$("#custom_desc").val("");
 		$("#dark").prop("checked", true);
 		$("#custom_json").val("");
-		$("#color-picker0-wrap").html('<div class="color-picker" id="color-picker0"></div>')
+		for(var i =0;i <= 8; i++){
-		$("#color-picker1-wrap").html('<div class="color-picker" id="color-picker1"></div>')
+			$("#color-picker" + i + "-wrap").html('<div class="color-picker" id="color-picker' + i + '"></div>')
-		$("#color-picker2-wrap").html('<div class="color-picker" id="color-picker2"></div>')
+			$("#color-picker" + i + "_value").val("");
-		$("#color-picker3-wrap").html('<div class="color-picker" id="color-picker3"></div>')
+			pickerDefine(i, "fff");
-		$("#color-picker0_value").val("");
+		}
-		$("#color-picker1_value").val("");
-		$("#color-picker2_value").val("");
-		$("#color-picker3_value").val("");
-		pickerDefine(0, "fff");
-		pickerDefine(1, "fff");
-		pickerDefine(2, "fff");
-		pickerDefine(3, "fff");
 		$("#delTheme").addClass("disabled")
 	} else {
 		$("#delTheme").removeClass("disabled")
@@ -632,28 +634,43 @@ function customConnect(args) {
 	$("#custom_name").val(args.name);
 	$("#custom_desc").val(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);
+	//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))
-	if (args.props) {
+	//TheDesk Only
-		if (args.props.TheDeskAccent) {
+	advancedConncet(args, "TheDeskAccent", "secondary", 3)
-			var accent = args.props.TheDeskAccent;
+	advancedConncet(args, "TheDeskActive", "primary", 4)
-		} else {
+	advancedConncet(args, "TheDeskModal", "secondary", 5)
-			var accent = args.vars.secondary;
+	advancedConncet(args, "TheDeskBottom", "primary", 6)
-		}
+	advancedConncet(args, "TheDeskPostbox", "primary", 7)
-	} else {
+	advancedConncet(args, "TheDeskSubcolor", "primary", 8)
-		var accent = args.vars.secondary;
-	}
-	$("#color-picker3-wrap").html('<div class="color-picker" id="color-picker3"></div>')
-	pickerDefine(3, rgbToHex(accent))
 	$("#custom_json").val(JSON.stringify(args));
 }
+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];
+		}
+	} else {
+		var color = args.vars[sub];
+	}
+	$("#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();
 	if (JSON5.parse(json)) {
@@ -665,6 +682,10 @@ function customImp() {
 		})
 	}
 }
+function advanced(){
+	$(".advanced").toggleClass("hide")
+	$("#pickers").toggleClass("advanceTheme")
+}
 function clearCustomImport() {
 	$("#custom_import").val("");
 }

app/main/css.js

@@ -67,21 +67,52 @@ function css(mainWindow) {
 				if (json.props.TheDeskAccent) {
 					var emphasized = json.props.TheDeskAccent
 				} else {
-					var emphasized = secondary;
+					var emphasized = secondary
+				}
+				if (json.props.TheDeskActive) {
+					var active = json.props.TheDeskActive
+				} else {
+					var active = primary
+				}
+				if (json.props.TheDeskModal) {
+					var modal = json.props.TheDeskModal
+				} else {
+					var modal = secondary
+				}
+				if (json.props.TheDeskBottom) {
+					var bottom = json.props.TheDeskBottom
+				} else {
+					var bottom = primary
+				}
+				if (json.props.TheDeskPostbox) {
+					var postbox = json.props.TheDeskPostbox
+				} else {
+					var postbox = primary
+				}
+				if (json.props.TheDeskSubcolor) {
+					var subcolor = json.props.TheDeskSubcolor
+				} else {
+					var subcolor = primary
 				}
 			} else {
-				var emphasized = primary;
+				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:" +
-				secondary + ";--subcolor:" + primary + ";--box:" + primary +
+				modal + ";--subcolor:" + subcolor + ";--box:" + subcolor +
-				";--sidebar:" + primary + ";--shared:" + emphasized + ";" +
+				";--sidebar:" + bottom + ";--shared:" + emphasized + ";" +
-				"--notfbox:" + secondary + ";--emphasized:" + primary + ";--his-data:" +
+				"--notfbox:" + secondary + ";--emphasized:" + active + ";--his-data:" +
 				secondary +
-				";--active:" + primary + ";--postbox:" + primary + ";--modalfooter:" +
+				";--active:" + active + ";--postbox:" + postbox + ";--modalfooter:" +
 				primary +
-				";--accentbtn:" + primary + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}"+
+				";--accentbtn:" + subcolor + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}"+
 				"--gray:" + gray + ";"+
 				".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}";
 			e.sender.webContents.send('theme-css-response', css);

app/view/make/language/en/setting.json

@@ -35,6 +35,13 @@
   "themeSel": "Select theme",
   "customtheme": "Edit and add custom 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",
   "text": "Text color",

app/view/make/language/ja/setting.json

@@ -35,10 +35,17 @@
   "themeSel": "テーマの選択",
   "customtheme": "カスタムテーマの作成・編集",
   "customthemeDirection": "色の系統",
+  "advanced":"拡張項目(6つ)を開く",
+  "advancedWarn":"拡張項目は設定しないと「指定なし」に、基本3項目は白(fff)になります。拡張項目を閉じた状態で「変更」すると拡張項目はすべてリセットされます。",
   "primary": "全体の背景色など",
   "secondarycolor": "補助要素に使われる背景色",
   "text": "テキストの色",
   "accent": "ブーストの背景色など",
+  "active": "CWボタンやメニュー選択時の背景色",
+  "modal": "モーダルウィンドウの背景色",
+  "bottom":"下のメニューバーの背景色",
+  "postbox":"投稿ボックスやメニューの色",
+  "subcolor":"背景に準ずる色",
   "add_new": "新規作成",
   "name": "名前",
   "desc": "説明",

app/view/make/setting.sample.html

@@ -160,7 +160,9 @@
 					<input class="with-gap" onchange="settings()" name="direction" type="radio" id="light"
 						value="light" />
 					<span>Light</span>
-				</label>
+				</label><br>
+				<button class="btn waves-effect" onclick="advanced()">@@advanced@@</button>
+				<span class="advanced hide">@@advancedWarn@@</span>
 				<div id="pickers">
 					<div>
 						<h5>Primary</h5>@@secondarycolor@@
@@ -183,13 +185,48 @@
 						</div>
 						<input type="hidden" id="color-picker2_value">
 					</div>
-					<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">
 					</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">
+					</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">
+					</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">
+					</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">
+					</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">
+					</div>
 				</div>
 				<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>