diff --git a/frontend/src/styles/commandline.scss b/frontend/src/styles/commandline.scss
index d5966e10c..3daccd5ce 100644
--- a/frontend/src/styles/commandline.scss
+++ b/frontend/src/styles/commandline.scss
@@ -117,14 +117,14 @@
}
&.activeMouse {
- color: var(--bg-color);
- background: var(--text-color);
+ color: var(--bg-color) !important;
+ background: var(--text-color) !important;
cursor: pointer;
}
&.activeKeyboard {
- color: var(--bg-color);
- background: var(--text-color);
+ color: var(--bg-color) !important;
+ background: var(--text-color) !important;
}
// &:hover {
@@ -132,6 +132,21 @@
// background: var(--sub-color);
// cursor: pointer;
// }
+
+ &.withThemeBubbles {
+ grid-template-columns: auto 1fr auto;
+ .themeBubbles {
+ display: grid;
+ grid-auto-flow: column;
+ gap: 0.5em;
+ border-radius: 1em;
+ .themeBubble {
+ width: 1em;
+ height: 1em;
+ border-radius: 100%;
+ }
+ }
+ }
}
}
}
diff --git a/frontend/src/ts/commandline/commands.ts b/frontend/src/ts/commandline/commands.ts
index 0fb4734b2..2c886f478 100644
--- a/frontend/src/ts/commandline/commands.ts
+++ b/frontend/src/ts/commandline/commands.ts
@@ -143,7 +143,7 @@ Misc.getFontsList()
);
});
-Misc.getThemesList()
+Misc.getSortedThemesList()
.then((themes) => {
updateThemesCommands(themes);
})
diff --git a/frontend/src/ts/commandline/index.ts b/frontend/src/ts/commandline/index.ts
index 4c70ab8c5..230c27426 100644
--- a/frontend/src/ts/commandline/index.ts
+++ b/frontend/src/ts/commandline/index.ts
@@ -90,7 +90,22 @@ function showFound(): void {
if (obj.noIcon && !isSingleListCommandLineActive()) {
iconHTML = "";
}
- commandsHTML += `
${iconHTML}
${obj.display}
`;
+ let customStyle = "";
+ if (obj.customStyle) {
+ customStyle = obj.customStyle;
+ }
+
+ if (obj.id.startsWith("changeTheme") && obj.customData) {
+ commandsHTML += `
+ ${iconHTML}
${obj.display}
+
+
`;
+ } else {
+ commandsHTML += `${iconHTML}
${obj.display}
`;
+ }
}
});
$("#commandLine .suggestions").html(commandsHTML);
diff --git a/frontend/src/ts/commandline/lists/font-family.ts b/frontend/src/ts/commandline/lists/font-family.ts
index 41afd4ad8..12287483e 100644
--- a/frontend/src/ts/commandline/lists/font-family.ts
+++ b/frontend/src/ts/commandline/lists/font-family.ts
@@ -22,6 +22,7 @@ function update(fonts: MonkeyTypes.FontObject[]): void {
id: "changeFont" + font.name.replace(/ /g, "_"),
display: font.display !== undefined ? font.display : font.name,
configValue: configVal,
+ customStyle: `font-family: ${font.name}`,
hover: (): void => {
UpdateConfig.previewFontFamily(font.name);
},
diff --git a/frontend/src/ts/commandline/lists/themes.ts b/frontend/src/ts/commandline/lists/themes.ts
index d990eb8e8..720d4dc33 100644
--- a/frontend/src/ts/commandline/lists/themes.ts
+++ b/frontend/src/ts/commandline/lists/themes.ts
@@ -19,37 +19,47 @@ const commands: MonkeyTypes.Command[] = [
function update(themes: MonkeyTypes.Theme[]): void {
subgroup.list = [];
- if (Config.favThemes.length > 0) {
- Config.favThemes.forEach((theme: string) => {
- subgroup.list.push({
- id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme),
- display: theme.replace(/_/g, " "),
- configValue: theme,
+ const favs: MonkeyTypes.Command[] = [];
+ themes.forEach((theme) => {
+ if ((Config.favThemes as string[]).includes(theme.name)) {
+ favs.push({
+ id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme.name),
+ display: theme.name.replace(/_/g, " "),
+ configValue: theme.name,
+ // customStyle: `color:${theme.mainColor};background:${theme.bgColor};`,
+ customData: {
+ mainColor: theme.mainColor,
+ bgColor: theme.bgColor,
+ },
hover: (): void => {
- // previewTheme(theme);
- ThemeController.preview(theme, false);
+ // previewTheme(theme.name);
+ ThemeController.preview(theme.name, false);
},
exec: (): void => {
- UpdateConfig.setTheme(theme);
+ UpdateConfig.setTheme(theme.name);
},
});
- });
- }
- themes.forEach((theme) => {
- if ((Config.favThemes as string[]).includes(theme.name)) return;
- subgroup.list.push({
- id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme.name),
- display: theme.name.replace(/_/g, " "),
- configValue: theme.name,
- hover: (): void => {
- // previewTheme(theme.name);
- ThemeController.preview(theme.name, false);
- },
- exec: (): void => {
- UpdateConfig.setTheme(theme.name);
- },
- });
+ } else {
+ subgroup.list.push({
+ id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme.name),
+ display: theme.name.replace(/_/g, " "),
+ configValue: theme.name,
+ // customStyle: `color:${theme.mainColor};background:${theme.bgColor}`,
+ customData: {
+ mainColor: theme.mainColor,
+ bgColor: theme.bgColor,
+ },
+ hover: (): void => {
+ // previewTheme(theme.name);
+ ThemeController.preview(theme.name, false);
+ },
+ exec: (): void => {
+ UpdateConfig.setTheme(theme.name);
+ },
+ });
+ }
});
+ subgroup.list = [...favs, ...subgroup.list];
}
export default commands;
diff --git a/frontend/src/ts/types/types.d.ts b/frontend/src/ts/types/types.d.ts
index d4addaaa1..a2cfc0466 100644
--- a/frontend/src/ts/types/types.d.ts
+++ b/frontend/src/ts/types/types.d.ts
@@ -733,6 +733,7 @@ declare namespace MonkeyTypes {
alias?: string;
input?: boolean;
visible?: boolean;
+ customStyle?: string;
defaultValue?: () => string;
configValue?: string | number | boolean | number[];
configValueMode?: string;
@@ -740,6 +741,7 @@ declare namespace MonkeyTypes {
hover?: () => void;
available?: () => void;
shouldFocusTestUI?: boolean;
+ customData?: Record;
}
interface CommandsSubgroup {