Chameleon

As you probably know, My Visual Database allows you to style your applications. A style is a combination of the appearance of the window title, buttons, and colors of other user interface elements. The style of the application is determined when creating the application by selecting the desired item in the main menu of the development environment. The list of styles is impressive, but still finite. In addition, the style chosen by the developer does not always match the theme of the operating system, which can make it difficult for the end user.

Let’s consider the possibility of programmatically changing the style of the final application, as well as expanding the style palette.

Theory

When you select a style in the development environment, a “style.vsf” file is generated, which is located next to the executable file and contains all the necessary information about the selected style. Thus, to change the style, it is enough to replace this file with the desired one and restart the application. To do this, we will create a Styles folder, in which we will place files with styles in advance and copy them as necessary. I was able to get all 34 style files built into My Visual Database, but feel free to add your own. They can be found online or created with Delphi.

Practice

You will need a string array to store the style names, and to store the current style name

var
  arStyles: array[0..34] of string; // UI style names
  currentStyleName: string; // current styleCode language: Delphi (delphi)

The style selection will be located in the main menu, so care must be taken to refine it with a script that needs to be run in the begin end section.

procedure Init;
// initialization
var
  tmpItem: TMenuItem;
  tmpTopItem: TMenuItem;
  tmpForm: TAForm;
  i: integer;
begin
  tmpForm := frmMain;
  // style list initialization
  arStyles[0] := 'Default';
  arStyles[1] := 'Amakrits';
  arStyles[2] := 'AmethystKamri';
  arStyles[3] := 'AquaGraphite';
  arStyles[4] := 'AquaLightSlate';
  arStyles[5] := 'Auric';
  arStyles[6] := 'Carbon';
  arStyles[7] := 'CharcoalDarkSlate';
  arStyles[8] := 'CobaltXEMedia';
  arStyles[9] := 'CyanDusk';
  arStyles[10] := 'CyanNight';
  arStyles[11] := 'Glossy';
  arStyles[12] := 'Glow';
  arStyles[13] := 'GoldenGraphite';
  arStyles[14] := 'IcebergClassico';
  arStyles[15] := 'LavenderClassico';
  arStyles[16] := 'Light';
  arStyles[17] := 'LightGreen';
  arStyles[18] := 'Lilac';
  arStyles[19] := 'Luna';
  arStyles[20] := 'Material';
  arStyles[21] := 'MetropolisUIBlack';
  arStyles[22] := 'MetropolisUIBlue';
  arStyles[23] := 'MetropolisUIDark';
  arStyles[24] := 'MetropolisUIGreen';
  arStyles[25] := 'Obsidian';
  arStyles[26] := 'RubyGraphite';
  arStyles[27] := 'SapphireKamri';
  arStyles[28] := 'Silver';
  arStyles[29] := 'Sky';
  arStyles[30] := 'SlateClassico';
  arStyles[31] := 'SmokeyQuartzKamri';
  arStyles[32] := 'TabletDark';
  arStyles[33] := 'TabletLight';
  arStyles[34] := 'TurquoiseGray';
  // current style - read from setting
  currentStyleName := GetStrIni( 'APP', 'Style', arStyles[0] );
  // create a top level menu item
  tmpTopItem := TMenuItem.Create( tmpForm );
  tmpTopItem.Name := 'mniStyles';
  tmpTopItem.Caption := 'Styles';
  tmpForm.Menu.Items.Insert(1,tmpTopItem);
  // add menu items to change the style
  for i := 0 to Length(arStyles) - 1 do
  begin
    tmpItem := TMenuItem.Create( tmpForm );
    tmpItem.Name := 'mniSetStyle_'+IntToStr(i);
    tmpItem.Caption := arStyles[i];
    tmpItem.OnClick := @SetStyle_OnClick;
    tmpItem.RadioItem := True; // dot selection, radio buttons
    tmpItem.GroupIndex := 1; // dependent switches
    tmpItem.Autocheck := True; // automatic switch on click
    // highlight current style
    if arStyles[i] = currentStyleName then
      tmpItem.Checked := True;
    tmpTopItem.Insert(i,tmpItem);
  end;
end;Code language: Delphi (delphi)

Style switching is implemented in the menu item selection event handler. First, the current style file is deleted, and then the selected file is copied, after which the user is prompted to restart the program for the changes to take effect.

procedure SetStyle_OnClick (Sender: TObject; );
// style switching
var
  tmpItem : TMenuItem;
  tmpCurFile : string;
  tmpNewFile : string;
begin
  tmpItem := TMenuItem(Sender);
  currentStyleName := tmpItem.Caption;
  // remove special characters that were added automatically
  currentStyleName := ReplaceStr(currentStyleName,'&','');
  SetStrIni( 'APP', 'Style', currentStyleName );
  tmpCurFile := ExtractFilePath(Application.ExeName)+'style.vsf';
  tmpNewFile := ExtractFilePath(Application.ExeName)+'Styles\'+currentStyleName+'.vsf';
  // delete the current style
  DeleteFile( tmpCurFile );
  // copy file with style
  if FileExists(tmpNewFile) then
    CopyFile(tmpNewFile, tmpCurFile);
  // warning
  if MessageBox('Для применения изменений требуется перезапуск программы. Выполнить сейчас?','Смена стиля ',MB_OKCANCEL ) = mrOK then
  begin
    frmMain.Close; // close the current application. In fact, this command only creates a message, in fact, the closing will occur after the completion of the current procedure.
    OpenFile( Application.ExeName ); // run app
  end;
end;Code language: Delphi (delphi)

In order to determine which style is set in the program, the corresponding information is stored in the settins.ini file, which uses a convenient procedure and function for writing and reading data:

procedure SetStrIni(ASection: string; AKey: string; AVal: string);
// writing a single string value to settings
var
  tmpIniFile: TIniFile;
begin
  tmpIniFile := TIniFile.Create(Application.SettingsFile);
  tmpIniFile.WriteString(ASection, AKey, AVal);
  tmpIniFile.Free;
end;
 
function GetStrIni(ASection: string; AKey: string; ADefVal: string = ''): string;
// reading a single string value from a setting
var
  tmpIniFile: TIniFile;
begin
  tmpIniFile := TIniFile.Create(Application.SettingsFile);
  Result := tmpIniFile.ReadString(ASection, AKey, ADefVal);
  tmpIniFile.Free;
end;Code language: Delphi (delphi)

Result

Changing the style has become a matter of two clicks in a running application and does not require compiling the project.

Choose the style you like.

Create your own styles

Afterword

The method described above is quite simple, but, unfortunately, it will not work properly if the application is installed in the “Program Files” folder, which the Windows operating system monitors changes with great care. Therefore, this method is only suitable for the portable version of the application. 

The second limitation is due to the fact that not all components included in the user interface elements fully support the style change technology. But it’s up to you to decide how critical it will be. 

I also recommend previewing the styles, as some of them seem boring or awkward to me due to poor readability of the text. But no one puts you to create your own, unique style! 

Combinations of the theme color and button image color can be another problem, but this can be easily fixed, for example, using the technology described in my article “Button pictures”

Links

• Chameleon project with style files