Add Custom Themes scheme
This commit is contained in:
cutls
parent
ce84069429
commit
c4a5d406c7
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
"TheDeskAccent": accentC
|
||||
},
|
||||
"props": advanceTheme,
|
||||
"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>')
|
||||
$("#color-picker1-wrap").html('<div class="color-picker" id="color-picker1"></div>')
|
||||
$("#color-picker2-wrap").html('<div class="color-picker" id="color-picker2"></div>')
|
||||
$("#color-picker3-wrap").html('<div class="color-picker" id="color-picker3"></div>')
|
||||
$("#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");
|
||||
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");
|
||||
}
|
||||
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>')
|
||||
$("#color-picker1-wrap").html('<div class="color-picker" id="color-picker1"></div>')
|
||||
$("#color-picker2-wrap").html('<div class="color-picker" id="color-picker2"></div>')
|
||||
$("#color-picker3-wrap").html('<div class="color-picker" id="color-picker3"></div>')
|
||||
$("#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");
|
||||
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");
|
||||
}
|
||||
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>')
|
||||
$("#color-picker1-wrap").html('<div class="color-picker" id="color-picker1"></div>')
|
||||
$("#color-picker2-wrap").html('<div class="color-picker" id="color-picker2"></div>')
|
||||
$("#color-picker3-wrap").html('<div class="color-picker" id="color-picker3"></div>')
|
||||
$("#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");
|
||||
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");
|
||||
}
|
||||
$("#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) {
|
||||
if (args.props.TheDeskAccent) {
|
||||
var accent = args.props.TheDeskAccent;
|
||||
} else {
|
||||
var accent = args.vars.secondary;
|
||||
}
|
||||
} else {
|
||||
var accent = args.vars.secondary;
|
||||
}
|
||||
$("#color-picker3-wrap").html('<div class="color-picker" id="color-picker3"></div>')
|
||||
pickerDefine(3, rgbToHex(accent))
|
||||
//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(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("");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 +
|
||||
";--sidebar:" + primary + ";--shared:" + emphasized + ";" +
|
||||
"--notfbox:" + secondary + ";--emphasized:" + primary + ";--his-data:" +
|
||||
modal + ";--subcolor:" + subcolor + ";--box:" + subcolor +
|
||||
";--sidebar:" + bottom + ";--shared:" + emphasized + ";" +
|
||||
"--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);
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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": "説明",
|
||||
|
|
|
|||
|
|
@ -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> <button
|
||||
class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">@@delete@@</button><br><br>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user