Add radio button group and add theme select for ShortcutGuide

src/common/settings_objects.cpp

@@ -109,6 +109,32 @@ namespace PowerToysSettings {
     m_json.as_object()[L"properties"].as_object()[name] = item;
   }
 
+  void Settings::add_choice_group(const std::wstring& name, UINT description_resource_id, const std::wstring& value, const std::vector<std::pair<std::wstring, UINT>>& keys_and_text_ids) {
+    std::vector<std::pair<std::wstring, std::wstring>> keys_and_texts;
+    keys_and_texts.reserve(keys_and_text_ids.size());
+    for (const auto& kv : keys_and_text_ids) {
+      keys_and_texts.emplace_back(kv.first, get_resource(kv.second));
+    }
+    add_choice_group(name, get_resource(description_resource_id), value, keys_and_texts);
+  }
+  void Settings::add_choice_group(const std::wstring& name, const std::wstring& description, const std::wstring& value, const std::vector<std::pair<std::wstring, std::wstring>>& keys_and_texts) {
+    web::json::value item = web::json::value::object();
+    item.as_object()[L"display_name"] = web::json::value::string(description);
+    item.as_object()[L"editor_type"] = web::json::value::string(L"choice_group");
+    auto options = web::json::value::array(keys_and_texts.size());
+    for (std::size_t i = 0; i < keys_and_texts.size(); ++i) {
+      auto entry = web::json::value::object();
+      entry.as_object()[L"key"] = web::json::value::string(keys_and_texts[i].first);
+      entry.as_object()[L"text"] = web::json::value::string(keys_and_texts[i].second);
+      options.as_array()[i] = entry;
+    }
+    item.as_object()[L"options"] = options;
+    item.as_object()[L"value"] = web::json::value::string(value);
+    item.as_object()[L"order"] = web::json::value::number(++m_curr_priority);
+
+    m_json.as_object()[L"properties"].as_object()[name] = item;
+  }
+
   // add_custom_action overloads.
   void Settings::add_custom_action(const std::wstring& name, UINT description_resource_id, UINT button_text_resource_id, UINT ext_description_resource_id) {
     add_custom_action(name, get_resource(description_resource_id), get_resource(button_text_resource_id), get_resource(ext_description_resource_id));

src/common/settings_objects.h

@@ -37,6 +37,9 @@ namespace PowerToysSettings {
     void add_hotkey(const std::wstring& name, UINT description_resource_id, const HotkeyObject& hotkey);
     void add_hotkey(const std::wstring& name, const std::wstring& description, const HotkeyObject& hotkey);
 
+    void add_choice_group(const std::wstring& name, UINT description_resource_id, const std::wstring& value, const std::vector<std::pair<std::wstring, UINT>>& keys_and_text_ids);
+    void add_choice_group(const std::wstring& name, const std::wstring& description, const std::wstring& value, const std::vector<std::pair<std::wstring, std::wstring>>& keys_and_texts);
+
     void add_custom_action(const std::wstring& name, UINT description_resource_id, UINT button_text_resource_id, UINT ext_description_resource_id);
     void add_custom_action(const std::wstring& name, UINT description_resource_id, UINT button_text_resource_id, const std::wstring& value);
     void add_custom_action(const std::wstring& name, const std::wstring& description, const std::wstring& button_text, const std::wstring& value);

src/modules/shortcut_guide/overlay_window.cpp

@@ -180,14 +180,17 @@ void D2DOverlayWindow::show(HWND active_window) {
   tasklist_buttons.clear();
   this->active_window = active_window;
   auto old_bck = colors.start_color_menu;
-  if (initialized && colors.update()) {
+  auto colors_updated = colors.update();
+  auto new_light_mode = (theme_setting == Light) || (theme_setting == System && colors.light_mode);
+  if (initialized && (colors_updated || light_mode != new_light_mode)) {
     // update background colors
     landscape.recolor(old_bck, colors.start_color_menu);
     portrait.recolor(old_bck, colors.start_color_menu);
     for (auto& arrow : arrows) {
       arrow.recolor(old_bck, colors.start_color_menu);
     }
-    if (colors.light_mode) {
+    light_mode = new_light_mode;
+    if (light_mode) {
       landscape.recolor(0xDDDDDD, 0x222222);
       portrait.recolor(0xDDDDDD, 0x222222);
       for (auto& arrow : arrows) {
@@ -369,6 +372,16 @@ void D2DOverlayWindow::apply_overlay_opacity(float opacity) {
   overlay_opacity = opacity;
 }
 
+void D2DOverlayWindow::set_theme(const std::wstring& theme) {
+  if (theme == L"light") {
+    theme_setting = Light;
+  } else if (theme == L"dark") {
+    theme_setting = Dark;
+  } else {
+    theme_setting = System;
+  }
+}
+
 float D2DOverlayWindow::get_overlay_opacity() {
   return overlay_opacity;
 }
@@ -389,7 +402,8 @@ void D2DOverlayWindow::init() {
     arrows[i].load(L"svgs\\" + std::to_wstring((i + 1) % 10) + L".svg", d2d_dc.get())
              .recolor(0x000000, colors.start_color_menu);
   }
-  if (!colors.light_mode) {
+  light_mode = (theme_setting == Light) || (theme_setting == System && colors.light_mode);
+  if (!light_mode) {
     landscape.recolor(0x222222, 0xDDDDDD);
     portrait.recolor(0x222222, 0xDDDDDD);
     for (auto& arrow : arrows) {
@@ -518,7 +532,7 @@ void D2DOverlayWindow::render(ID2D1DeviceContext5* d2d_dc) {
   // Draw background
   winrt::com_ptr<ID2D1SolidColorBrush> brush;
   float brush_opacity = get_overlay_opacity();
-  D2D1_COLOR_F brushColor = colors.light_mode ? D2D1::ColorF(1.0f, 1.0f, 1.0f, brush_opacity) : D2D1::ColorF(0, 0, 0, brush_opacity);
+  D2D1_COLOR_F brushColor = light_mode ? D2D1::ColorF(1.0f, 1.0f, 1.0f, brush_opacity) : D2D1::ColorF(0, 0, 0, brush_opacity);
   winrt::check_hresult(d2d_dc->CreateSolidColorBrush(brushColor, brush.put()));
   D2D1_RECT_F background_rect = {};
   background_rect.bottom = (float)window_height;
@@ -702,7 +716,7 @@ void D2DOverlayWindow::render(ID2D1DeviceContext5* d2d_dc) {
     down = L"No action";
     down_disabled = true;
   }
-  auto text_color = D2D1::ColorF(colors.light_mode ? 0x222222 : 0xDDDDDD, minature_shown || window_state == MINIMIZED ? 1.0f : 0.3f);
+  auto text_color = D2D1::ColorF(light_mode ? 0x222222 : 0xDDDDDD, minature_shown || window_state == MINIMIZED ? 1.0f : 0.3f);
   use_overlay->find_element(L"KeyUpGroup")->SetAttributeValue(L"fill-opacity", up_disabled ? 0.3f : 1.0f);
   text.set_aligment_center().write(d2d_dc, text_color, use_overlay->get_maximize_label(), up);
   use_overlay->find_element(L"KeyDownGroup")->SetAttributeValue(L"fill-opacity", down_disabled ? 0.3f : 1.0f);

src/modules/shortcut_guide/overlay_window.h

@@ -46,7 +46,7 @@ public:
   void animate(int vk_code);
   ~D2DOverlayWindow();
   void apply_overlay_opacity(float opacity);
-
+  void set_theme(const std::wstring& theme);
 private:
   void animate(int vk_code, int offset);
   bool show_thumbnail(const RECT& rect, double alpha);
@@ -83,4 +83,8 @@ private:
   std::vector<D2DSVG> arrows;
   std::chrono::steady_clock::time_point shown_start_time;
   float overlay_opacity = 0.9f;
+  enum {
+    Light, Dark, System
+  } theme_setting = System;
+  bool light_mode = true;
 };

src/modules/shortcut_guide/resource.h

@@ -1,2 +1,6 @@
 #define IDS_SETTING_DESCRIPTION_PRESS_TIME 101
 #define IDS_SETTING_DESCRIPTION_OVERLAY_OPACITY 102
+#define IDS_SETTING_DESCRIPTION_THEME 103
+#define IDS_SETTING_DESCRIPTION_THEME_LIGHT 104
+#define IDS_SETTING_DESCRIPTION_THEME_DARK 105
+#define IDS_SETTING_DESCRIPTION_THEME_SYSTEM 106

src/modules/shortcut_guide/shortcut_guide.cpp

@@ -47,6 +47,13 @@ bool OverlayWindow::get_config(wchar_t* buffer, int *buffer_size) {
     1
   );
 
+  settings.add_choice_group(
+    theme.name,
+    theme.resourceId,
+    theme.value,
+    theme.keys_and_texts
+  );
+
   return settings.serialize_to_buffer(buffer, buffer_size);
 }
 
@@ -68,6 +75,10 @@ void OverlayWindow::set_config(const wchar_t * config) {
         winkey_popup->apply_overlay_opacity(((float)overlayOpacity.value) / 100.0f);
       }
     }
+    if (_values.is_string_value(theme.name)) {
+      theme.value = _values.get_string_value(theme.name);
+      winkey_popup->set_theme(theme.value);
+    }
     _values.save_to_settings_file();
   }
   catch (std::exception&) {
@@ -79,6 +90,7 @@ void OverlayWindow::enable() {
   if (!_enabled) {
     winkey_popup = new D2DOverlayWindow();
     winkey_popup->apply_overlay_opacity(((float)overlayOpacity.value)/100.0f);
+    winkey_popup->set_theme(theme.value);
     target_state = new TargetState(pressTime.value);
     winkey_popup->initialize();
   }
@@ -144,6 +156,9 @@ void OverlayWindow::init_settings() {
     if (settings.is_int_value(overlayOpacity.name)) {
       overlayOpacity.value = settings.get_int_value(overlayOpacity.name);
     }
+    if (settings.is_string_value(theme.name)) {
+      theme.value = settings.get_string_value(theme.name);
+    }
   }
   catch (std::exception&) {
     // Error while loading from the settings file. Just let default values stay as they are.

src/modules/shortcut_guide/shortcut_guide.h

@@ -44,4 +44,15 @@ private:
     int value = 90; // percent
     int resourceId = IDS_SETTING_DESCRIPTION_OVERLAY_OPACITY;
   } overlayOpacity;
+
+  struct Theme {
+    PCWSTR name = L"theme";
+    std::wstring value = L"system";
+    int resourceId = IDS_SETTING_DESCRIPTION_THEME;
+    std::vector<std::pair<std::wstring, UINT>> keys_and_texts = {
+      { L"system", IDS_SETTING_DESCRIPTION_THEME_SYSTEM },
+      { L"light", IDS_SETTING_DESCRIPTION_THEME_LIGHT },
+      { L"dark", IDS_SETTING_DESCRIPTION_THEME_DARK }
+    };
+  } theme;
 };

src/settings-web/src/components/ChoiceGroupSettingsControl.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { BaseSettingsControl } from './BaseSettingsControl';
+import { ChoiceGroup } from 'office-ui-fabric-react';
+
+export class ChoiceGroupSettingsControl extends BaseSettingsControl {
+  choiceref:any = null; // Keeps a reference to the corresponding item in the DOM.
+
+  constructor(props:any) {
+    super(props);
+    this.choiceref = null;
+    this.state = {
+      property_values: props.setting
+    }
+  }
+
+  componentWillReceiveProps(props: any) {
+    // Fully controlled component.
+    // Reacting to a property change so that the control is redrawn properly.
+    this.setState({ property_values: props.setting })
+  }
+
+  public get_value() : any {
+    return {'value': this.choiceref.checkedOption.key};
+  }
+
+  public render(): JSX.Element {
+    return (
+      <ChoiceGroup
+        className="defaultChoiceGroup"
+        defaultSelectedKey={this.state.property_values.value}
+        options={this.state.property_values.options}
+        label={this.state.property_values.display_name}
+        componentRef={(element) => {this.choiceref=element;}}
+        onChange={()=>{
+          this.parent_on_change();
+        }}
+      />
+    );
+  }
+}

src/settings-web/src/components/CustomSettingsScreen.tsx

@@ -6,6 +6,7 @@ import {IntSpinnerSettingsControl} from './IntSpinnerSettingsControl';
 import {ColorPickerSettingsControl} from './ColorPickerSettingsControl';
 import {CustomActionSettingsControl} from './CustomActionSettingsControl';
 import {HotkeySettingsControl} from './HotkeySettingsControl';
+import {ChoiceGroupSettingsControl} from './ChoiceGroupSettingsControl';
 
 export class CustomSettingsScreen extends React.Component <any, any> {
   references: any;
@@ -146,6 +147,13 @@ export class CustomSettingsScreen extends React.Component <any, any> {
                   on_change={this.parent_on_change}
                   ref={(input) => {this.references[key]=input;}}
                 />;
+              case 'choice_group':
+                return <ChoiceGroupSettingsControl
+                  setting = {power_toys_properties[key]}
+                  key={key}
+                  on_change={this.parent_on_change}
+                  ref={(input) => {this.references[key]=input;}}
+                />;
               default:
                 return null;
             }