Use selected theme in About and pref menu

Dyalog · Aug 1, 2023 · 06cb599 · 06cb599
1 parent 0afe8e0
commit 06cb599
Show file tree

Hide file tree

Showing 8 changed files with 546 additions and 515 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);
@@ -146,6 +152,64 @@
   text-align: left;
   border: 1px solid transparent;
 }
+label {
+  color: #a9a9a9;
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 600;
+}
+button {
+  background: #7688d9;
+  color: white;
+  border-radius: 4px;
+  background-image: -moz-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
+  background-image: -webkit-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
+  background-image: -ms-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
+}
+button:hover {
+  color: #4c4a4a;
+}
+input + label {
+  cursor: pointer;
+  vertical-align: text-top;
+}
+input:disabled + label {
+  cursor: default;
+  color: #646262;
+}
+[type=checkbox] {
+  cursor: pointer;
+  background-color: #1c1e28;
+  border: 1px solid #7688d9;
+}
+[type=checkbox]:checked {
+  background-color: #7688d9;
+}
+[type=checkbox]:hover {
+  background: #9eabe4;
+}
+[type=checkbox]:active {
+  background: #7688d9;
+  color: #323446;
+}
+[type=checkbox]:checked {
+  color: #7688d9;
+}
+[type=checkbox]:checked::after {
+  color: #1c1e28;
+}
+[type=checkbox]:disabled,
+[type=checkbox]:disabled:checked {
+  cursor: default;
+  color: #646262;
+  background: #646262;
+  border-color: #646262;
+}
+select {
+  background-color: #272937;
+  border: 1px solid rgba(169, 169, 169, 0.3);
+  color: white;
+}
 /*Golden Layout*/
 .lm_goldenlayout {
   background: #272937 !important;
@@ -231,64 +295,6 @@
   background-color: white;
   border: 1px dashed #7688d9;
 }
-label {
-  color: #a9a9a9;
-  font-family: Roboto;
-  font-size: 14px;
-  font-weight: 600;
-}
-button {
-  background: #7688d9;
-  color: white;
-  border-radius: 4px;
-  background-image: -moz-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
-  background-image: -webkit-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
-  background-image: -ms-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
-}
-button:hover {
-  color: #4c4a4a;
-}
-input + label {
-  cursor: pointer;
-  vertical-align: text-top;
-}
-input:disabled + label {
-  cursor: default;
-  color: #646262;
-}
-[type=checkbox] {
-  cursor: pointer;
-  background-color: #1c1e28;
-  border: 1px solid #7688d9;
-}
-[type=checkbox]:checked {
-  background-color: #7688d9;
-}
-[type=checkbox]:hover {
-  background: #9eabe4;
-}
-[type=checkbox]:active {
-  background: #7688d9;
-  color: #323446;
-}
-[type=checkbox]:checked {
-  color: #7688d9;
-}
-[type=checkbox]:checked::after {
-  color: #1c1e28;
-}
-[type=checkbox]:disabled,
-[type=checkbox]:disabled:checked {
-  cursor: default;
-  color: #646262;
-  background: #646262;
-  border-color: #646262;
-}
-select {
-  background-color: #272937;
-  border: 1px solid rgba(169, 169, 169, 0.3);
-  color: white;
-}
 #lb {
   background-color: #1c1e28;
   border-bottom: 1px black solid;
@@ -500,7 +506,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,

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 {