Use selected theme in About and pref menu

Dyalog · Aug 1, 2023 · 1f5a3f8 · 1f5a3f8
1 parent 419624a
commit 1f5a3f8
Show file tree

Hide file tree

Showing 8 changed files with 818 additions and 787 deletions.
diff --git a/about.html b/about.html
@@ -4,7 +4,8 @@
   <meta charset=utf-8>
   <title>About Dyalog</title>
   <link rel=stylesheet href='style/ride-base.css'>
-  <link rel=stylesheet href='style/light-theme.css'>
+  <link rel=stylesheet class=theme id=theme_dark href='style/dark-theme.css'>
+  <link rel=stylesheet class=theme id=theme_light href='style/light-theme.css'>
 </head>
 <body>
   <div id=abt class="dlg floating">

diff --git a/src/abt.js b/src/abt.js
@@ -55,6 +55,9 @@
       D.abtw = w;
       w.loadURL(`file://${__dirname}/about.html`);
       w.webContents.executeJavaScript(`document.getElementById('abt_ta').value=${JSON.stringify(details)};`);
+      w.webContents.executeJavaScript(`document.getElementById('theme_dark').disabled = ${D.theme !== 'dark'}`);
+      w.webContents.executeJavaScript(`document.getElementById('theme_light').disabled = ${D.theme !== 'light'};`);
+
       w.on('closed', () => { delete D.abtw; });
     } else {
       if (!d) {

diff --git a/src/km.js b/src/km.js
@@ -58,7 +58,7 @@
     UND(me) { me.trigger('D', 'undo'); },
     PRF() { D.prf_ui(); },
     ABT() {
-      if (D.el && D.ide.floating) D.ipc.of.ride_master.emit('ABT');
+      if (D.el && D.ide && D.ide.floating) D.ipc.of.ride_master.emit('ABT');
       else D.abt();
     },
     CAM() {

diff --git a/style/dark-theme.css b/style/dark-theme.css
@@ -1,3 +1,9 @@
+#abt_ta {
+  border: 1px solid rgba(169, 169, 169, 0.3);
+  background-color: #272937;
+  color: white;
+  font-family: apl, monospace;
+}
 #cn input:not([type=button]):not([type=file]):not([type=submit]):not([type=checkbox]),
 #cn textarea {
   border: 1px solid rgba(169, 169, 169, 0.3);
@@ -72,91 +78,30 @@
   font-size: 16px;
   font-family: monospace;
 }
-/*Golden Layout*/
-.lm_goldenlayout {
-  background: #272937 !important;
-}
-.lm_goldenlayout .lm_header {
-  background: #272937 !important;
-}
-.lm_header,
-.lm_content {
-  border-color: #272937 !important;
-}
-.lm_dragProxy .lm_content {
-  box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.2);
-}
-.lm_dropTargetIndicator {
-  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.4);
-  outline: 1px dashed #7688d9;
-  margin: 1px;
-  transition: all 200ms ease;
-}
-.lm_dropTargetIndicator .lm_inner {
-  background: white;
-  opacity: 0.1;
-  filter: alpha(opacity=1);
-}
-.lm_tab {
-  letter-spacing: 0.5px;
-  font-size: 12px;
-  background-color: #323446 !important;
-  color: #a9a9a9 !important;
-  border-right: 1px #272937 solid !important;
+.ctl_listview {
+  background-color: #1c1e28;
+  color: white;
 }
-.lm_tab.lm_active {
-  background-color: #1c1e28 !important;
-  border-right: 1px #272937 solid !important;
-  color: #7688d9 !important;
+.ctl_listview tr {
+  background-color: rgba(118, 136, 217, 0.5);
+  border-bottom: 1px solid #1c1e28;
 }
-.lm_tab.lm_active .lm_close_tab {
-  color: #7688d9 !important;
+.ctl_listview tr:hover {
+  background-color: rgba(118, 136, 217, 0.25);
 }
-.lm_splitter {
-  background-color: rgba(118, 136, 217, 0.3) !important;
+.ctl_listview tr.selected {
+  background-color: #1c1e28;
 }
-.lm_splitter.lm_horizontal {
-  background: rgba(118, 136, 217, 0.3) url(img/grabber_vert.png) no-repeat center !important;
-  box-shadow: -1px 0 0 black inset, 1px 0 0 black inset;
+#debug {
+  background: #1c1e28;
 }
-.lm_splitter.lm_vertical {
-  background: rgba(118, 136, 217, 0.3) url(img/grabber_hor.png) no-repeat center !important;
-  box-shadow: 0 -1px 0 black inset, 0 1px 0 black inset;
+#debug .ctl_listview_header {
+  background-color: #7688d9;
+  color: white;
 }
-.lm_header .lm_tab .lm_close_tab {
-  background-image: none !important;
-  color: #a9a9a9;
+#debug .ctl_listview_header h2 {
   font-size: 16px;
 }
-.lm_header .lm_tab .lm_close_tab::before {
-  content: "×";
-}
-.lm_header .lm_tab:hover .lm_close_tab {
-  opacity: 1;
-  color: #7688d9 !important;
-}
-.lm_controls > li {
-  background-position: center center;
-  background-repeat: no-repeat;
-  position: relative;
-}
-.lm_controls > li:hover {
-  opacity: 1;
-  filter: alpha(opacity=100);
-}
-.lm_header .lm_controls .lm_tabdropdown:before {
-  color: #a9a9a9 !important;
-}
-.lm_controls .lm_maximise {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);
-}
-.lm_maximised .lm_controls .lm_maximise {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC);
-}
-.lm_transition_indicator {
-  background-color: white;
-  border: 1px dashed #7688d9;
-}
 label {
   color: #a9a9a9;
   font-family: Roboto;
@@ -265,6 +210,91 @@ select {
   text-align: left;
   border: 1px solid transparent;
 }
+/*Golden Layout*/
+.lm_goldenlayout {
+  background: #272937 !important;
+}
+.lm_goldenlayout .lm_header {
+  background: #272937 !important;
+}
+.lm_header,
+.lm_content {
+  border-color: #272937 !important;
+}
+.lm_dragProxy .lm_content {
+  box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.2);
+}
+.lm_dropTargetIndicator {
+  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.4);
+  outline: 1px dashed #7688d9;
+  margin: 1px;
+  transition: all 200ms ease;
+}
+.lm_dropTargetIndicator .lm_inner {
+  background: white;
+  opacity: 0.1;
+  filter: alpha(opacity=1);
+}
+.lm_tab {
+  letter-spacing: 0.5px;
+  font-size: 12px;
+  background-color: #323446 !important;
+  color: #a9a9a9 !important;
+  border-right: 1px #272937 solid !important;
+}
+.lm_tab.lm_active {
+  background-color: #1c1e28 !important;
+  border-right: 1px #272937 solid !important;
+  color: #7688d9 !important;
+}
+.lm_tab.lm_active .lm_close_tab {
+  color: #7688d9 !important;
+}
+.lm_splitter {
+  background-color: rgba(118, 136, 217, 0.3) !important;
+}
+.lm_splitter.lm_horizontal {
+  background: rgba(118, 136, 217, 0.3) url(img/grabber_vert.png) no-repeat center !important;
+  box-shadow: -1px 0 0 black inset, 1px 0 0 black inset;
+}
+.lm_splitter.lm_vertical {
+  background: rgba(118, 136, 217, 0.3) url(img/grabber_hor.png) no-repeat center !important;
+  box-shadow: 0 -1px 0 black inset, 0 1px 0 black inset;
+}
+.lm_header .lm_tab .lm_close_tab {
+  background-image: none !important;
+  color: #a9a9a9;
+  font-size: 16px;
+}
+.lm_header .lm_tab .lm_close_tab::before {
+  content: "×";
+}
+.lm_header .lm_tab:hover .lm_close_tab {
+  opacity: 1;
+  color: #7688d9 !important;
+}
+.lm_controls > li {
+  background-position: center center;
+  background-repeat: no-repeat;
+  position: relative;
+}
+.lm_controls > li:hover {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+.lm_header .lm_controls .lm_tabdropdown:before {
+  color: #a9a9a9 !important;
+}
+.lm_controls .lm_maximise {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);
+}
+.lm_maximised .lm_controls .lm_maximise {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC);
+}
+.lm_transition_indicator {
+  background-color: white;
+  border: 1px dashed #7688d9;
+}
 #lb {
   background-color: #1c1e28;
   border-bottom: 1px black solid;
@@ -334,30 +364,6 @@ select {
 .menu .m-box a:focus.m-checked {
   background: rgba(0, 0, 0, 0.2) 5px center no-repeat url(img/menu_chk.png);
 }
-.ctl_listview {
-  background-color: #1c1e28;
-  color: white;
-}
-.ctl_listview tr {
-  background-color: rgba(118, 136, 217, 0.5);
-  border-bottom: 1px solid #1c1e28;
-}
-.ctl_listview tr:hover {
-  background-color: rgba(118, 136, 217, 0.25);
-}
-.ctl_listview tr.selected {
-  background-color: #1c1e28;
-}
-#debug {
-  background: #1c1e28;
-}
-#debug .ctl_listview_header {
-  background-color: #7688d9;
-  color: white;
-}
-#debug .ctl_listview_header h2 {
-  font-size: 16px;
-}
 .breakpointarea {
   border-right: 1px solid #272937;
   cursor: pointer;
@@ -537,7 +543,10 @@ a:hover {
   color: #7688d9;
 }
 #pmenu #pmenu_ta {
-  font-family: monospace;
+  border: 1px solid rgba(169, 169, 169, 0.3);
+  background-color: #272937;
+  color: white;
+  font-family: apl, monospace;
 }
 @media print {
   .lyt_k,
@@ -569,33 +578,6 @@ a:hover {
     display: none;
   }
 }
-#splash {
-  background: url(img/RideLogo.png) center no-repeat, url(img/bg.jpg) center no-repeat #1c1e28;
-}
-#ide {
-  background-color: #1c1e28;
-}
-#apl_font {
-  color: #1c1e28;
-}
-::selection {
-  background: #7688d9;
-  color: white;
-}
-/*must be separate rules*/
-::-moz-selection {
-  background: #7688d9;
-  color: white;
-}
-/*must be separate rules*/
-body {
-  font-family: Roboto, sans-serif;
-}
-#demo-keys span {
-  border: solid #333 1px;
-  background-color: grey;
-  color: white;
-}
 ::-webkit-scrollbar {
   background-color: #1c1e28;
 }
@@ -642,9 +624,33 @@ body {
 #sb_prf:active {
   background-color: rgba(0, 0, 0, 0.2);
 }
-#status_body {
+#splash {
+  background: url(img/RideLogo.png) center no-repeat, url(img/bg.jpg) center no-repeat #1c1e28;
+}
+#ide {
   background-color: #1c1e28;
 }
+#apl_font {
+  color: #1c1e28;
+}
+::selection {
+  background: #7688d9;
+  color: white;
+}
+/*must be separate rules*/
+::-moz-selection {
+  background: #7688d9;
+  color: white;
+}
+/*must be separate rules*/
+body {
+  font-family: Roboto, sans-serif;
+}
+#demo-keys span {
+  border: solid #333 1px;
+  background-color: grey;
+  color: white;
+}
 #toast-container {
   font-family: Roboto;
   font-size: 14px;
@@ -655,6 +661,9 @@ body {
   -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
 }
+#status_body {
+  background-color: #1c1e28;
+}
 .tooltip {
   color: #7688d9;
 }

diff --git a/style/less/colour/about_page.less b/style/less/colour/about_page.less
@@ -0,0 +1,6 @@
+#abt_ta{
+  border: 1px solid @CN_INPUT_BORDER_COL;
+  background-color: @CN_INPUT_BG;
+  color: @CN_INPUT_FG;
+  font-family: apl, monospace;
+}
diff --git a/style/less/colour/preferences.less b/style/less/colour/preferences.less
@@ -162,7 +162,10 @@ a {
 // PREFS_MENU
 #pmenu{
   #pmenu_ta{
-    font-family: monospace;
+    border: 1px solid @CN_INPUT_BORDER_COL;
+    background-color: @CN_INPUT_BG;
+    color: @CN_INPUT_FG;
+    font-family: apl, monospace;  
   }
 }
 @media print {