diff --git a/public/index.html b/public/index.html
index e4b3648..70dc284 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,9 @@
-
+
diff --git a/src/electron.ts b/src/electron.ts
index b64c0ec..2a87bcd 100644
--- a/src/electron.ts
+++ b/src/electron.ts
@@ -1,10 +1,11 @@
import { app, BrowserWindow, Menu, ipcMain, } from 'electron'
import path from 'path'
import fs from 'fs'
-import * as yargs from 'yargs'
import SPANS from './services/spans.json'
import SCALE_FACTORS from './services/scaleFactors.json'
+import THEMES from './services/themes.json'
+import COLORS from './services/colors.json'
import { _ } from './services/messages'
import getKeyName from './services/getKeyName'
import getNaturalKeyCount from './services/getNaturalKeyCount'
@@ -21,6 +22,9 @@ let config: Config = {
startKey: 21,
endKey: 108,
scaleFactor: 1,
+ colorNaturalKey: undefined,
+ colorAccidentalKey: undefined,
+ colorHighlight: undefined,
}
const createWindow = () => {
@@ -76,6 +80,20 @@ const createWindow = () => {
})
}
+const reload = () => {
+ app.relaunch({
+ args: process.argv.slice(1).concat([
+ `--startKey=${config.startKey}`,
+ `--endKey=${config.endKey}`,
+ `--scaleFactor=${config.scaleFactor}`,
+ `--colorNaturalKey=${config.colorNaturalKey}`,
+ `--colorAccidentalKey=${config.colorAccidentalKey}`,
+ `--colorHighlight=${config.colorHighlight}`,
+ ])
+ })
+ app.exit(0)
+}
+
app
.whenReady()
.then(() => {
@@ -124,14 +142,7 @@ app
click: () => {
config.startKey = s.startKey
config.endKey = s.endKey
- app.relaunch({
- args: process.argv.slice(1).concat([
- `--startKey=${config.startKey}`,
- `--endKey=${config.endKey}`,
- `--scaleFactor=${config.scaleFactor}`,
- ])
- })
- app.exit(0)
+ reload()
},
}))
},
@@ -143,18 +154,70 @@ app
checked: config.scaleFactor === s,
click: () => {
config.scaleFactor = s
-
- app.relaunch({
- args: process.argv.slice(1).concat([
- `--startKey=${config.startKey}`,
- `--endKey=${config.endKey}`,
- `--scaleFactor=${config.scaleFactor}`,
- ])
- })
- app.exit(0)
+ reload()
},
})),
},
+ {
+ label: _('THEME'),
+ submenu: [
+ {
+ label: _('BASE'),
+ submenu: [
+ {
+ label: _('DEFAULT'),
+ type: 'radio',
+ checked: (
+ typeof config.colorAccidentalKey === 'undefined'
+ && typeof config.colorNaturalKey === 'undefined'
+ ),
+ click: () => {
+ config.colorNaturalKey = undefined
+ config.colorAccidentalKey = undefined
+ reload()
+ }
+ },
+ ...Object.entries(THEMES).map(([key, [colorNaturalKey, colorAccidentalKey]]) => ({
+ label: _(key),
+ type: 'radio',
+ checked: (
+ config.colorAccidentalKey === colorAccidentalKey
+ && config.colorNaturalKey === colorNaturalKey
+ ),
+ click: () => {
+ config.colorNaturalKey = colorNaturalKey
+ config.colorAccidentalKey = colorAccidentalKey
+ reload()
+ }
+ }))
+ ]
+ },
+ {
+ label: _('HIGHLIGHT'),
+ submenu: [
+ {
+ label: _('NONE'),
+ type: 'radio',
+ checked: typeof config.colorHighlight === 'undefined',
+ click: () => {
+ config.colorHighlight = undefined
+ reload()
+ }
+ },
+ ...Object.entries(COLORS).map(([key, colorHighlight]) => ({
+ label: _(key),
+ sublabel: colorHighlight,
+ type: 'radio',
+ checked: config.colorHighlight === colorHighlight,
+ click: () => {
+ config.colorHighlight = colorHighlight
+ reload()
+ }
+ }))
+ ]
+ }
+ ]
+ }
]
},
...(
diff --git a/src/index.tsx b/src/index.tsx
index f0fbbc2..84fed57 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,6 +6,9 @@ const div = window.document.createElement('main')
const search = new URLSearchParams(window.location.search)
window.document.body.appendChild(div)
window.document.documentElement.style.setProperty('--size-scale-factor', search.get('scaleFactor'))
+window.document.documentElement.style.setProperty('--color-natural-key', search.get('colorNaturalKey'))
+window.document.documentElement.style.setProperty('--color-accidental-key', search.get('colorAccidentalKey'))
+window.document.documentElement.style.setProperty('--color-channel-0', search.get('colorHighlight'))
ReactDOM.render(
diff --git a/src/services/Config.ts b/src/services/Config.ts
index eda221a..97dfb95 100644
--- a/src/services/Config.ts
+++ b/src/services/Config.ts
@@ -1,5 +1,8 @@
-export default interface Config extends Record{
+export default interface Config extends Record{
startKey: number,
endKey: number,
scaleFactor: number,
+ colorNaturalKey?: string,
+ colorAccidentalKey?: string,
+ colorHighlight?: string,
}
diff --git a/src/services/colors.json b/src/services/colors.json
new file mode 100644
index 0000000..cacb00a
--- /dev/null
+++ b/src/services/colors.json
@@ -0,0 +1,7 @@
+{
+ "REDDISH": "rgb(255,134,113)",
+ "YELLOWISH": "rgb(248,190,74)",
+ "GREENISH": "rgb(224,255,113)",
+ "BLUISH": "rgb(113,153,255)",
+ "PURPLISH": "rgb(190,145,255)"
+}
diff --git a/src/services/messages.json b/src/services/messages.json
index 4772d30..223d2ea 100644
--- a/src/services/messages.json
+++ b/src/services/messages.json
@@ -2,5 +2,16 @@
"SPAN": "Span",
"DETAIL_SCALE_FACTOR": "Detail Scale Factor",
"DEBUG": "Debug",
- "VIEW": "View"
+ "VIEW": "View",
+ "THEME": "Theme",
+ "BASE": "Base",
+ "HIGHLIGHT": "Highlight",
+ "DEFAULT": "Default",
+ "NONE": "None",
+ "INVERSE": "Inverse",
+ "REDDISH": "Tomato",
+ "YELLOWISH": "Gold",
+ "GREENISH": "Lime",
+ "BLUISH": "Cerulean",
+ "PURPLISH": "Mauve"
}
diff --git a/src/services/themes.json b/src/services/themes.json
new file mode 100644
index 0000000..5b607a3
--- /dev/null
+++ b/src/services/themes.json
@@ -0,0 +1,3 @@
+{
+ "INVERSE": ["rgb(53,54,58)", "rgb(145,147,155)"]
+}