Improve modern theme

- Use modern sprites for tool icons and transparency options
- Use modern selection color for tool options
- Add a border around the canvas area to separate the canvas from the UI
- Slightly round the corners of the color wells and selected colors

src/$ToolBox.js

@@ -19,18 +19,22 @@ function $ToolBox(tools, is_extras){
 		
 		var $icon = $(E("span"));
 		$icon.appendTo($b);
-		var bx = (i%2)*24;
-		var by = (~~(i/2))*25;
-		$icon.css({
-			display: "block",
-			position: "absolute",
-			left: 0,
-			top: 0,
-			width: 24,
-			height: 24,
-			backgroundImage: "url(images/toolbar-icons.png)",
-			backgroundPosition: bx + "px " + -by + "px",
-		});
+		var bx = -i*16;
+		var update_css = ()=> {
+			var theme_folder = `images/${get_theme().replace(/\.css/, "")}`;
+			$icon.css({
+				display: "block",
+				position: "absolute",
+				left: 4,
+				top: 4,
+				width: 16,
+				height: 16,
+				backgroundImage: `url(${theme_folder}/tools.png)`,
+				backgroundPosition: bx + "px 0px",
+			});
+		};
+		update_css();
+		$G.on("theme-load", update_css);
 		
 		$b.on("click", function(e){
 			if (e.shiftKey || e.ctrlKey) {

src/menus.js

@@ -501,7 +501,7 @@ var menus = {
 					description: "Makes JS Paint look like MS Paint from Windows 98.",
 				},
 				{
-					item: "&Modern (WIP)",
+					item: "&Modern",
 					action: ()=> {
 						set_theme("modern.css");
 					},

src/theme.js

@@ -46,6 +46,11 @@
 		// eslint-disable-next-line no-empty
 		} catch(error) {}
 
+		$(window).on("theme-load", ()=> {
+			$(window).trigger("option-changed"); // not really, but get the tool options area for transparency to update
+			$(window).trigger("resize"); // not exactly, but get dynamic cursor to update its offset
+		});
+
 		wait_for_theme_loaded(theme, function(){
 			$(window).triggerHandler("theme-load");
 		});

src/tool-options.js

@@ -59,8 +59,9 @@ var $Choose = function(things, display, choose, is_chosen){
 					$G.trigger("option-changed");
 				}
 				var update = function(){
+					var selected_color = get_theme() === "modern.css" ? "#0178d7" : "#000080"; // TODO: get from a CSS variable
 					$option_container.css({
-						backgroundColor: is_chosen(thing) ? "rgb(0, 0, 123)" : ""
+						backgroundColor: is_chosen(thing) ? selected_color : ""
 					});
 					$option_container.empty();
 					$option = $(display(thing, is_chosen(thing)));
@@ -277,8 +278,9 @@ var $choose_transparent_mode = $Choose(
 	function(_tool_transparent_mode, is_chosen){
 		var sw = 35, sh = 23; // width, height from source image
 		var b = 2; // margin by which the source image is inset on the destination
+		var theme_folder = `images/${get_theme().replace(/\.css/, "")}`;
 		return ChooserCanvas(
-			"images/options-transparency.png",
+			`${theme_folder}/options-transparency.png`,
 			false, // never invert it
 			b+sw+b, b+sh+b, // width, height of created destination canvas
 			0, _tool_transparent_mode ? 22 : 0, sw, sh, // x, y, width, height from source image

styles/themes/modern.css

@@ -169,13 +169,15 @@ body {
 
 .color-selection {
 	/*border-radius: 50%; */
-	border: 1px solid rgba(0, 0, 0, 0.5);
+	border: 1px solid rgba(0, 0, 0, 0.4);
+	border-radius: 2px;
 	/* border: 1px outset; */
 	width: 18px;
 	height: 18px;
 }
 .color-button {
-	border: 1px solid rgba(0, 0, 0, 0.5);
+	border: 1px solid rgba(0, 0, 0, 0.4);
+	border-radius: 2px;
 }
 /*
 .swatch:hover:after {
@@ -221,6 +223,7 @@ body,
 }
 .canvas-area {
 	padding: 8px;
+	border: 1px solid gray;
 }
 
 /* NOTE: copy/pasted from classic.css */