Colorization of icons

static/css/notes2.css

@@ -4,12 +4,22 @@
 	--content-width: 900px;
 	--thumbnail-width: 300px;
 	--thumbnail-height: 100px;
+
+	/*
+	--colorize: invert(10%) sepia(61%) saturate(5017%) hue-rotate(323deg) brightness(90%) contrast(109%);
+	*/
+	--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
+
 }
 
 html {
 	background-color: #fff;
 }
 
+.colorize {
+	filter: var(--colorize);
+}
+
 #notes2 {
 	min-height: 100vh;
 
@@ -21,7 +31,7 @@ html {
 		"tree hum content content   ding"
 		"tree hum blank   blank     ding"
 	;
-	grid-template-columns: min-content minmax(16px, 1fr) minmax(min-content, calc(900px - 120px)) 120px minmax(16px, 1fr);
+	grid-template-columns: min-content minmax(16px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(16px, 1fr);
 	grid-template-rows:
 		min-content min-content 48px 1fr;
 

static/images/icon_history.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="7.40833mm"
+   height="6.3499999mm"
+   viewBox="0 0 7.40833 6.3499999"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
+   sodipodi:docname="icon_history.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1"
+     inkscape:cx="10"
+     inkscape:cy="9"
+     inkscape:window-width="1916"
+     inkscape:window-height="1161"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-102.39375,-146.05)">
+    <title
+       id="title1">history</title>
+    <path
+       d="m 106.80347,147.81389 h -0.52916 v 1.76388 l 1.50988,0.89606 0.254,-0.42686 -1.23472,-0.73377 v -1.49931 M 106.62708,146.05 a 3.175,3.175 0 0 0 -3.175,3.175 h -1.05833 l 1.397,1.42169 1.42523,-1.42169 h -1.05834 a 2.4694444,2.4694444 0 0 1 2.46944,-2.46944 2.4694444,2.4694444 0 0 1 2.46944,2.46944 2.4694444,2.4694444 0 0 1 -2.46944,2.46944 c -0.68086,0 -1.29822,-0.27869 -1.74272,-0.72672 l -0.50094,0.50095 c 0.57502,0.57856 1.36172,0.93133 2.24366,0.93133 a 3.175,3.175 0 0 0 3.175,-3.175 3.175,3.175 0 0 0 -3.175,-3.175"
+       id="path1"
+       style="stroke-width:0.352777" />
+  </g>
+</svg>

static/images/icon_markdown.svg

@@ -9,8 +9,8 @@
    role="img"
    version="1.1"
    id="svg1"
-   sodipodi:docname="markdown.svg"
+   sodipodi:docname="icon_markdown.svg"
-   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
@@ -33,10 +33,10 @@
      inkscape:zoom="0.70710678"
      inkscape:cx="453.96255"
      inkscape:cy="60.811183"
-     inkscape:window-width="2190"
+     inkscape:window-width="1916"
-     inkscape:window-height="1401"
+     inkscape:window-height="1161"
-     inkscape:window-x="1463"
+     inkscape:window-x="0"
-     inkscape:window-y="0"
+     inkscape:window-y="18"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg1" />
   <title
@@ -44,7 +44,7 @@
   <path
      d="M 338.73829,224.67957 H 26.316564 A 26.316564,26.316564 0 0 1 0,198.363 V 26.316564 A 26.316564,26.316564 0 0 1 26.316564,0 H 338.73829 a 26.316564,26.316564 0 0 1 26.31657,26.316564 V 198.33258 a 26.316564,26.316564 0 0 1 -26.31657,26.33177 z M 87.742162,172.01601 v -68.45349 l 35.109038,43.8863 35.09382,-43.8863 v 68.45349 h 35.10903 V 52.678763 H 157.94502 L 122.8512,96.565057 87.742162,52.678763 H 52.633128 V 172.04644 Z M 322.94835,112.33978 H 287.83932 V 52.663552 H 252.7455 v 59.676228 h -35.10904 l 52.64834,61.44081 z"
      id="path1"
-     style="stroke-width:15.2119;fill:#fe5f55;fill-opacity:1" />
+     style="stroke-width:15.2119;fill:#000000;fill-opacity:1" />
   <metadata
      id="metadata1">
     <rdf:RDF>

static/images/icon_refresh.svg

@@ -25,11 +25,11 @@
      inkscape:document-units="mm"
      inkscape:zoom="23.548693"
      inkscape:cx="6.9218279"
-     inkscape:cy="12.5697"
+     inkscape:cy="12.612165"
      inkscape:window-width="1916"
      inkscape:window-height="1161"
      inkscape:window-x="0"
-     inkscape:window-y="0"
+     inkscape:window-y="18"
      inkscape:window-maximized="1"
      inkscape:current-layer="layer1"
      showgrid="false" />
@@ -45,6 +45,6 @@
     <path
        d="m 104.775,150.01875 a 1.5875,1.5875 0 0 1 -1.5875,-1.5875 c 0,-0.26458 0.0661,-0.52123 0.18521,-0.74083 l -0.38629,-0.3863 c -0.20638,0.32544 -0.32809,0.71173 -0.32809,1.12713 a 2.1166667,2.1166667 0 0 0 2.11667,2.11667 v 0.79375 l 1.05833,-1.05834 -1.05833,-1.05833 m 0,-2.91042 v -0.79375 l -1.05833,1.05834 1.05833,1.05833 v -0.79375 a 1.5875,1.5875 0 0 1 1.5875,1.5875 c 0,0.26458 -0.0661,0.52123 -0.18521,0.74083 l 0.38629,0.38629 c 0.20638,-0.32543 0.32809,-0.71172 0.32809,-1.12712 a 2.1166667,2.1166667 0 0 0 -2.11667,-2.11667 z"
        id="path1"
-       style="stroke-width:0.264583;fill:#fe5f55;fill-opacity:1" />
+       style="stroke-width:0.264583;fill:#000000;fill-opacity:1" />
   </g>
 </svg>

static/images/icon_save.svg

@@ -7,7 +7,7 @@
    viewBox="0 0 4.7624998 4.7624998"
    version="1.1"
    id="svg1"
-   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
    sodipodi:docname="icon_save.svg"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@@ -24,12 +24,12 @@
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="mm"
      inkscape:zoom="5.6568542"
-     inkscape:cx="41.454135"
+     inkscape:cx="41.365747"
-     inkscape:cy="-3.8890873"
+     inkscape:cy="-3.7123106"
-     inkscape:window-width="1093"
+     inkscape:window-width="1916"
-     inkscape:window-height="1401"
+     inkscape:window-height="1161"
-     inkscape:window-x="2560"
+     inkscape:window-x="0"
-     inkscape:window-y="0"
+     inkscape:window-y="18"
      inkscape:window-maximized="1"
      inkscape:current-layer="layer1" />
   <defs
@@ -44,6 +44,6 @@
     <path
        d="m 43.65625,209.81458 h -2.645833 v -1.05833 h 2.645833 m -0.79375,3.70417 a 0.79375,0.79375 0 0 1 -0.79375,-0.79375 0.79375,0.79375 0 0 1 0.79375,-0.79375 0.79375,0.79375 0 0 1 0.79375,0.79375 0.79375,0.79375 0 0 1 -0.79375,0.79375 m 1.322917,-4.23334 h -3.175 c -0.293688,0 -0.529167,0.23813 -0.529167,0.52917 v 3.70417 a 0.52916667,0.52916667 0 0 0 0.529167,0.52916 h 3.704166 a 0.52916667,0.52916667 0 0 0 0.529167,-0.52916 v -3.175 z"
        id="path1"
-       style="stroke-width:0.264583;fill:#fe5f55;fill-opacity:1" />
+       style="stroke-width:0.264583;fill:#000000;fill-opacity:1" />
   </g>
 </svg>

static/js/page_node.mjs

@@ -9,7 +9,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 			<style>
 				.el-functions {
 					display: grid;
-					grid-template-columns: 1fr min-content min-content;
+					grid-template-columns: 1fr repeat(3, min-content);
 					grid-gap: 8px;
 					align-items: center;
 					justify-items: end;
@@ -25,9 +25,10 @@ export class N2PageNodeUI extends CustomHTMLElement {
 			<div data-el="node-markdown" tabindex=1></div>
 
 			<div data-el="functions">
-				<img data-el="icon-markdown">
 				<img data-el="icon-save" src="/images/${_VERSION}/icon_save_disabled.svg">
-				<img data-el="icon-table-format" src="/images/${_VERSION}/icon_table.svg">
+				<img data-el="icon-markdown">
+				<img data-el="icon-table-format" class="colorize" src="/images/${_VERSION}/icon_table.svg">
+				<img data-el="icon-history"      class="colorize" src="/images/${_VERSION}/icon_history.svg">
 			</div>
 		`
 	}// }}}
@@ -49,12 +50,14 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		_mbus.subscribe('NODE_MODIFIED', () => {
 			document.querySelector('#crumbs .crumbs')?.classList.add('node-modified')
 			this.elIconSave.src = `/images/${_VERSION}/icon_save.svg`
+			this.elIconSave.classList.add('colorize')
 			this.renderName()
 		})
 
 		_mbus.subscribe('NODE_UNMODIFIED', () => {
 			document.querySelector('#crumbs .crumbs')?.classList.remove('node-modified')
 			this.elIconSave.src = `/images/${_VERSION}/icon_save_disabled.svg`
+			this.elIconSave.classList.remove('colorize')
 		})
 
 		_mbus.subscribe('MARKDOWN_TOGGLE', () => this.showMarkdown(!this.showMarkdown()))
@@ -123,10 +126,12 @@ export class N2PageNodeUI extends CustomHTMLElement {
 			case true:
 				this.elNodeMarkdown.innerHTML = this.marked.parse(this.elNodeContent.value)
 				this.elIconMarkdown.src = `/images/${_VERSION}/icon_markdown.svg`
+				this.elIconMarkdown.classList.add('colorize')
 				this.classList.add('show-markdown')
 				break
 			case false:
 				this.elIconMarkdown.src = `/images/${_VERSION}/icon_markdown_hollow.svg`
+				this.elIconMarkdown.classList.remove('colorize')
 				this.classList.remove('show-markdown')
 				break
 			case null:

static/js/tree.mjs

@@ -12,8 +12,8 @@ export class N2Tree extends CustomHTMLElement {
 				<img data-el="search" class='search' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
 			</div>
 			<div class="icons">
-				<img data-el="sync"     class='sync'     src="/images/${_VERSION}/icon_refresh.svg"  />
+				<img data-el="sync"     class='sync colorize'     src="/images/${_VERSION}/icon_refresh.svg"  />
-				<img data-el="settings" class='settings' src="/images/${_VERSION}/icon_settings.svg" />
+				<img data-el="settings" class='settings colorize' src="/images/${_VERSION}/icon_settings.svg" />
 			</div>
 			<div data-el="treenodes"></div>
 		`
@@ -50,10 +50,10 @@ export class N2Tree extends CustomHTMLElement {
 		this.populateFirstLevel()
 
 		/* XXX - set color */
-		let color = new Color(255, 96, 80)
+		let color = new Color(0x80, 0x00, 0x33)
 		let solver = new Solver(color)
 		let result = solver.solve()
-		this.elSettings.style.filter = result.filter
+		// console.log(result.filter)
 	}// }}}
 	render() {// {{{
 		if (this.rendered)