add some

frame.js

@@ -557,8 +557,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 			}
 			return {className: option.indexOf(key) > -1? ice.MSG_OPTION: key == ctx.ACTION? ctx.ACTION: "", text: [
 				msg.IsDetail() && key == mdb.KEY? can.user.trans(can, _value, null, html.INPUT): _value, html.TD,
-			], onclick: function(event) { var target = event.target
-				if (onclick()) { return }
+			], onclick: function(event) { if (onclick()) { return } var target = event.target
 				if (key == cli.QRCODE && can.page.tagis(event.target, html.IMG)) { can.user.opens(event.target.title) }
 				if (can.page.tagis(target, html.INPUT) && target.type == html.BUTTON) { can.requestAction(request(event), target.name)
 					meta && meta[target.name]? can.user.input(event, can, meta[target.name], function(args) { run(event, target.name, args) }, data): run(event, target.name)
@@ -613,7 +612,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 		}) } else { can.page.Select(can, code, html.INPUT_BUTTON, function(target) {
 			target.onclick = function(event) {
 				if (can.page.ClassList.has(can, target, "disable")) { return } can.page.ClassList.add(can, target, "disable")
-				can.misc.Event(event, can, function(msg) { can.Update(can.request(event, can.Option()), [ctx.ACTION, target.name], function(msg) {
+				can.misc.Event(event, can, function(msg) { can.Update(can.request(event, can.Option(), {_toast: target.name}), [ctx.ACTION, target.name], function(msg) {
 					can.page.ClassList.del(can, target, "disable")
 					can.page.ClassList.del(can, can._fields, "form")
 					can.page.ClassList.del(can, can._fields, "output")

index.css

@@ -1,9 +1,19 @@
 /* variable */
 @media (prefers-color-scheme: light) {
 body { --plugin-bg-color:white; --plugin-fg-color:black; }
+body {
+   	--code-keyword:darkblue; --code-comment:green;
+	--code-function:darkcyan; --code-constant:gray; --code-string:brown;
+   	--code-package:blue; --code-datatype:cornflowerblue; --code-object:purple;
+}
 }
 @media (prefers-color-scheme: dark) {
 body { --plugin-bg-color:black; --plugin-fg-color:silver; }
+body {
+	--code-keyword:royalblue; --code-comment:green;
+	--code-function:lightgreen; --code-constant:gray; --code-string:orange;
+	--code-package:lightskyblue; --code-datatype:lavender; --code-object:silver;
+}
 }
 body.light {
 	--plugin-bg-color:white; --plugin-fg-color:black;
@@ -18,9 +28,12 @@ body.dark {
    	--code-package:lightskyblue; --code-datatype:lavender; --code-object:silver;
 }
 body {
+	--shadow-color:var(--disable-fg-color); --border-color:var(--disable-fg-color);
+	--notice-color:blue; --danger-color:red;
+
 	--code-bg-color:black; --code-fg-color:silver;
-	--notice-bg-color:blue; --notice-fg-color:white;
-	--danger-bg-color:red; --danger-fg-color:var(--notice-fg-color);
+	--notice-bg-color:var(--notice-color); --notice-fg-color:white;
+	--danger-bg-color:var(--danger-color); --danger-fg-color:var(--notice-fg-color);
 	--disable-fg-color:gray; --progress-bg-color:var(--danger-bg-color);
 	--hover-bg-color:#5066b961; --hover-fg-color:var(--notice-fg-color);
 	--body-font-family:sans-serif; --code-font-family:monospace;
@@ -30,7 +43,7 @@ body {
 body {
 	--body-bg-color:var(--panel-bg-color); --body-fg-color:var(--plugin-fg-color);
 	--legend-bg-color:var(--plugin-bg-color); --legend-fg-color:var(--plugin-fg-color);
-	--input-bg-color:var(--output-bg-color); --input-fg-color: var(--output-fg-color);
+	--input-bg-color:var(--plugin-bg-color); --input-fg-color: var(--output-fg-color);
 	--output-bg-color:var(--plugin-bg-color); --output-fg-color:var(--plugin-fg-color);
 	--th-bg-color:var(--legend-bg-color); --th-fg-color:var(--legend-fg-color);
 	--tr-hover-bg-color:var(--hover-bg-color); --td-hover-bg-color:var(--hover-bg-color);
@@ -42,11 +55,11 @@ body {
 	--panel-hover-bg-color:var(--hover-bg-color); --panel-hover-fg-color:var(--hover-fg-color);
 	--action-output-bg-color:var(--output-bg-color);
 
-	--box-shadow:var(--body-fg-color) 0px 0px 10px; --notice-box-shadow:var(--notice-bg-color) 0px 0px 10px;
+	--box-shadow:var(--shadow-color) 0px 0px 10px; --notice-box-shadow:var(--notice-bg-color) 0px 0px 10px;
 	--plugin-box-shadow:var(--box-shadow); --legend-box-shadow:var(--box-shadow); --input-box-shadow:var(--box-shadow);
 	--th-box-shadow:var(--box-shadow); --keyword-box-shadow:var(--box-shadow);
-	--box-border:var(--disable-fg-color) solid 1px; --box-notice:var(--notice-bg-color) solid 1px; --box-danger:var(--danger-bg-color) solid 1px;
-	--box-border3:var(--disable-fg-color) solid 3px; --box-notice3:var(--notice-bg-color) solid 3px; --box-danger3:var(--danger-bg-color) solid 3px;
+	--box-border:var(--border-color) solid 1px; --box-notice:var(--notice-bg-color) solid 1px; --box-danger:var(--danger-bg-color) solid 1px;
+	--box-border3:var(--border-color) solid 3px; --box-notice3:var(--notice-bg-color) solid 3px; --box-danger3:var(--danger-bg-color) solid 3px;
 	--plugin-border:var(--box-border); --input-border:var(--box-border); --status-border:var(--box-border);
 	--plugin-radius:var(--plugin-padding); --button-radius:var(--input-padding);
 
@@ -794,6 +807,7 @@ fieldset.xterm.float>form.option>div.item.hash input { width:var(--form-width);
 fieldset.iframe.float>form.option>div.item.hash input { width:var(--form-width); }
 fieldset.iframe>form.option>div.item.hash input { width:var(--form-width); }
 fieldset.inner.float>div.status { display:none; }
+fieldset.web.chat.color table.content { border-collapse:collapse; }
 fieldset.user>form.option>div.item.username input { width:var(--form-width); }
 fieldset.offer>div.output>table.content tr.invite { background-color:var(--notice-bg-color); color:var(--notice-fg-color); }
 fieldset.apply>div.output>table.content.detail.apply tr.action td.action { background-color:var(--notice-bg-color); color:var(--notice-fg-color); }

panel/header.js

@@ -50,6 +50,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) {
 		can.user.info.background = background, can.onimport._background(can, msg), can.user.toastSuccess(can)
 	}) },
 	theme: function(can, theme) { theme && theme != ice.AUTO && can.runAction({}, chat.THEME, [theme])
+		theme && can.require(["/chat/theme/"+theme+".css"])
 		theme && can.misc.localStorage(can, "can.theme", can._theme = theme == ice.AUTO? "": theme) && can.onengine.signal(can, chat.ONTHEMECHANGE, can.request(event, {theme: theme}))
 		theme = can.onexport.theme(can); var list = [html.LIGHT, html.WHITE]
 		var change = can.page.ClassList.has(can, document.body, theme); can.user.theme(can, theme), change || can.onimport._const(can)
@@ -97,7 +98,7 @@ Volcanos(chat.ONACTION, {_init: function(can) {},
 			// can.page.requireModules(can, [msg.Option("icon.lib")])
 			can.ui.diy = can.base.Obj(msg.Option("diy"))||{}, can.__theme = can.onimport._theme(can, can.page.theme(function(theme) {
 				can.onengine.signal(can, chat.ONTHEMECHANGE, can.request(event, {theme: can.__theme = can.onimport._theme(can, theme)}))
-			})), can.onimport.theme(can)
+			})), can.onimport.theme(can, can.misc.Search(can, "theme")||"")
 			can.onaction._menus[3] = [aaa.LANGUAGE, ice.AUTO].concat(can.core.List(msg["language.list"], function(item) { return can.base.trimSuffix(item, nfs._JS) }))
 			can.onaction._menus[2] = [chat.THEME, ice.AUTO].concat(can.core.List(msg["theme.list"], function(item) { return can.base.trimSuffix(item, nfs._CSS) }))
 			can.require(can.core.List(msg["theme.list"], function(item) { return nfs.SRC_TEMPLATE+web.CHAT_HEADER+"/theme/"+item }), function() {

plugin/input/color.js

@@ -0,0 +1,54 @@
+Volcanos(chat.ONFIGURE, {color: {
+	_load: function(event, can, cb, target, name, value) {
+		if (target._done && target.value) { return can.onmotion.hidden(can, can._target, can.Status("total") > 0)} target._done = true
+		can.onmotion.focus(can, target), can.onmotion.hidden(can, can._target)
+		can.runAction(event, mdb.INPUTS, [name, value||""], function(msg) {
+			name == ctx.INDEX && can.core.Item(can.onengine.plugin.meta, function(key) { msg.Push(ctx.INDEX, can.core.Keys(ice.CAN, key)) })
+			can._show(can, msg, cb, target, name)
+		})
+	},
+	_show: function(can, msg, cb, target, name) {
+		if (msg.Length() == 0 || msg.Length() == 1 && msg.Append(name) == target.value && target.value != "") { return can.onmotion.hidden(can) }
+		if (can.base.isIn(msg.append[msg.append.length-1], ctx.ACTION, "cb")) { msg.append = msg.append.slice(0, -1) } var list = {}
+		msg.Option(ice.TABLE_CHECKBOX, "")
+		can.onmotion.clear(can), can.onappend.table(can, msg, function(value, key, index, item) { value = item[key]
+			if (msg.append.length == 1 && index < 100 && list[value]) { return } list[value] = true
+			return {text: [value, html.TD, value == ""? html.HR: ""], style: msg.append && msg.append.length == 1? kit.Dict(html.MIN_WIDTH, target.offsetWidth-16): {}, onclick: function(event) {
+				can.page.style(can, target, html.BACKGROUND_COLOR, value)
+				can.close(); if (msg.cb && msg.cb[index]) { return msg.cb[index](value) }
+				var _cb = can.Conf("select"); if (_cb) { return _cb(target.value = value) } can.base.isFunc(cb) && cb(can, value, target.value)
+			}, _init: function(target) {
+				if (key == mdb.NAME) {
+					can.page.style(can, target.parentNode, html.BACKGROUND_COLOR, value)
+				}
+			}}
+		})
+		can.showIcons = function(value, icons, title) { can.ui = can.ui||{}
+			if (!can.ui.img) {
+				can.ui.img = can.page.insertBefore(can, [{type: html.IMG}], target)
+				can.ui.span = can.page.insertBefore(can, [{type: html.SPAN}], target)
+				can.onappend.style(can, mdb.ICONS, can.page.parentNode(can, target, html.TR))
+				can.page.style(can, target, html.COLOR, html.TRANSPARENT)
+				target._clear = function() { can.ui.img.src = can.misc.Resource(can, "usr/icons/icebergs.png"), can.ui.span.innerHTML = "" }
+			}
+			can.ui.img.src = can.misc.Resource(can, icons), can.ui.span.innerText = title||value
+			target.value = value, can.onmotion.hidden(can, can._target)
+		}
+		can.core.CallFunc([can.oninputs, "_show"], {event: event, can: can, msg: msg, target: target, name: name})
+		var style = msg.Option(ice.MSG_DISPLAY)? can.base.ParseURL(msg.Option(ice.MSG_DISPLAY)).style||name: name
+		can.core.CallFunc([can.sup.sub, "oninputs", style], {event: event, can: can, msg: msg, target: target, name: name})
+		can.layout(msg)
+	},
+	onfocus: function(event, can, meta, target, cbs, mod) { meta._force && mod.onclick(event, can, meta, target, cbs) },
+	onclick: function(event, can, meta, target, cbs) { (target.value == "" || meta._force) && cbs(function(sub, cb) { if (sub.Status(mdb.TOTAL) > 0) { return }
+		sub.sup = can._fields? can.sup: can
+		meta.msg && meta.msg.Length() > 0? sub._show(sub, meta.msg, cb, target, meta.name): sub._load(event, sub, cb, target, meta.name, target.value)
+	}) },
+	onblur: function(event, can, sub, cb) { sub && can.onmotion.delay(can, sub.close, 300) },
+	onkeyup: function(event, can, meta, cb, target, sub, last) { if (event.key == code.TAB) { return }
+		if (event.key == code.ENTER) { return meta._enter && (!can.page.tagis(event.target, html.TEXTAREA) || event.ctrlKey) && meta._enter(event, target.value)? sub && sub.close(): last(event) }
+		if (!sub) { return } can.onmotion.toggle(can, sub._target, true)
+		sub.hidden() || can.onkeymap.selectCtrlN(event, can, sub._output, "tr:not(.hidden)>td:first-child", function(td) { return meta.select && (sub.close(), meta.select(target.value = td.innerText)), cb(sub, td.innerText, target.value), td })
+			|| can.onmotion.delayOnce(can, function() { can.onkeymap.selectInputs(event, sub, function() { sub._load(event, sub, cb, target, meta.name) }, target) }, target.value.length < 3? 500: 150)
+	},
+}})