Dark Theme about t4toolbox HOT 18 CLOSED

T4Toolbox currently defines colors only for the light theme of Visual Studio. If you are using the dark theme, you can modify the T4 Toolbox colors using the Tools -> Options dialog, Environment -> Fonts and Colors page. The T4 Toolbox color names start with Text Template, for example, Text Template Code Block.

Based on a quick research, it appears that the "right" way to support themes is to define theme-specific colors in a .pkgdef file installed with the extension. The PowerShell Tools may be a good example to follow because it is now shipping with Visual Studio 2015 and was most likely reviewed for accessibility compliance by the Visual Studio team.

In particular, the PowerShell Tools extension defines classification format definitions very similarly to how we do it in T4Toolbox: ClassificationType.cs. And here is the color definition file: PowerShellToolsColors.pkgdef. Notice the two GUIDs, which I believe represent the dark and one other theme.

Unfortunately, the .pkgdef contains binary data, which I don't know how to read or write. We may be able to use the Visual Studio 2013 Color Theme Editor to create it. Using this extension, I was able to modify the T4 Toolbox colors and export the modified theme to a .pkgdef file. However, unlike the poshtools' .pkgdef file, the file I created didn't have a separate, extension-specific key defined. The colors must have been embedded in some other section because I didn't see T4Toolbox in the file, nor did I find the names of the T4 Toolbox colors, however, the customized colors were properly restored when I reset my theme and imported the previously saved one.

from t4toolbox.

Thanks for the tip! I’d suggest that you need to automatically recongnize the theme and just work, and you should be using the standard coding text background and foregrounds not custom ones.

from t4toolbox.

Reusing the built-in content types as a base for the T4 Toolbox classification types would be ideal. Unfortunately, the list of predefined classification types doesn't seem to include the HTML/ASP.NET editor items the T4 Toolbox tries to mimic. Keep in mind that we could only use the built-in content type definitions that are guaranteed to be available with the minimum set of Visual Studio features installed, even when Web Developer Tools are not installed. I haven't found such content types at the time, which is why the colors are hard-coded today.

Both this approach and the .pkgdef-based one I described above will just work when Visual Studio theme is changed. They will also work with the theme editor and can be exported/imported correctly.

from t4toolbox.

I've started active work on this (forked). My approach isn't pkgdef, but, to integrate detecting current theme and available themes from the registry (Light, Dark, Blue, HighContrast defaults) and supply customization, and have a "Syntax" page in Tools > Options > T4Toolbox.

The one question on my mind is caching initial registry hits, rather than each iteration over the buffer calling through TemplateClassificationTaggerProvider.cs to ClassificationFormatDefinitions.cs ... except that the way this is done is specific for the buffer's call stack and methods VS calls to get information. (Learning.)

from t4toolbox.

Small Note:

Checked out VS 2013 Color Editor. Changed the values for Tools > Options > Environment > Fonts & Colors variables (Attribute Name/Val, Code Block, Delimiter, Directive), saved as both .vssettings and .pkgdef format.

• .vssettings has representative XML nodes.
• .pkgdef does not have individual nodes, but, I believe the values would be stored in the "Environment" key (unknown binary format).
• .pkgdef format is embedded in %APPDATALOCAL%\Microsoft\Visual Studio\{version}\Extensions\{key}\Microsoft.VisualStudio.PkgDef.dll

Correct me if I'm wrong, but, distributing a full export and trying to load it could override existing environment customizations (at least temporarily while opening a .tt file for editing).

Research: What's A PkgDef? And Why?

When editing values directly in Tools > Options > Environment > Fonts & Colors, versus editing and saving a VS 2013 Custom Color Theme, changes could happen in different places. (What if you don't have the Color Theme editor installed, and you modify things in the typical pages?) It's a registry setting and / or stored in a different User Preferences folder. (Note: Have not worked out how all of this completely works and comes together, but, the above link is enough to investigate and fully document the effects of changes one vs. the other.)

from t4toolbox.

The nice thing about defining theme colors in a .pkgdef file is that Visual Studio automatically takes care of detecting and applying the theme colors. I think that early attempts to support this in PowerShell Tools also relied on code-based approach, however, it was later replaced to use the .pkgdef-based approach. It feels that implementing support for Dark theme using code-based approach requires a lot more work and produce a less-reliable solution because of so many possible scenarios where theme colors are involved.

@AndreSayreMSFT, @adamdriscoll, I hate to bug you with this, but could you point us in the right direction? I think we know how to get a .pkgdef file with theme colors exported using the Visual Studio 2013 Color Theme Editor, but we don't understand how to extract the binary data into T4Toolbox-specific theme keys, similar to how the PoshTools colors are organized.

from t4toolbox.

This might be a stretch of an ask, but, any possibility of having the VS 2013 Color Editor released on Microsoft on GitHub?

Specifically: Microsoft.VisualStudio.PkgDef

from t4toolbox.

I think that's a good suggestion to post on the gallery page of the VS Color Theme Editor. In the meantime, with a nudge in the right direction from @AndreSayreMSFT, I think I may have figured out how to produce the .pkgdef theme file for T4Toolbox. Here is what I've done:

• Open Color Theme Editor in Visual Studio 2013
  • Create a copy of the Dark theme
  • Edit the copy of the Dark theme and switch to the Show All Elements view
  • Search for Text Template
  • Change the T4 Toolbox colors (both background and foreground) to use the exact color values of the respective HTML elements in the Dark theme
  • Export the theme to a file called T4Toolbox.Dark.vstheme
• Open the T4Toolbox.Dark.vstheme file in Notepad
  • Search for Text Template
  • Remove all Color elements except for those with Text Template in their name
  • Place them in a new Category element with Name="T4Toolbox" and a new GUID
  • Here is the file I ended up with.

<Themes>
  <Theme Name="T4Toolbox.Dark" GUID="{02f39cd3-e77d-4d98-b333-354f4c9eee3a}">
    <Category Name="T4Toolbox" GUID="{8fb347e9-e52e-4949-9806-fe95b0e8929c}">
      <Color Name="Text Template Attribute Name">
        <Foreground Type="CT_RAW" Source="FF9CDCFE" />
      </Color>
      <Color Name="Text Template Attribute Value">
        <Foreground Type="CT_RAW" Source="FFC8C8C8" />
      </Color>
      <Color Name="Text Template Code Block">
        <Background Type="CT_RAW" Source="FF505050" />
      </Color>
      <Color Name="Text Template Delimiter">
        <Background Type="CT_RAW" Source="FFFFFFB3" />
        <Foreground Type="CT_RAW" Source="FF000000" />
      </Color>
      <Color Name="Text Template Directive Name">
        <Foreground Type="CT_RAW" Source="FF569CD6" />
      </Color>
    </Category>
  </Theme>
</Themes>

• Back in the Visual Studio 2013 Color Theme Editor
  • Import the T4Toolbox.Dark.vstheme
  • Ignore the NullReferenceException message
  • Edit the newly-imported theme
  • Export the theme to a file called T4Toolbox.Dark.pkgdef
  • Here is the file I ended up with.

[$RootKey$\Themes\{02f39cd3-e77d-4d98-b333-354f4c9eee3a}]
@="T4Toolbox.Dark"
"Name"="T4Toolbox.Dark"

[$RootKey$\Themes\{02f39cd3-e77d-4d98-b333-354f4c9eee3a}\T4Toolbox]
"Data"=hex:da,00,00,00,0b,00,00,00,01,00,00,00,e9,47,b3,8f,2e,e5,49,49,98,06,fe,95,b0,e8,92,9c,05,00,00,00,1c,00,00,00,54,65,78,74,20,54,65,6d,70,6c,61,74,65,20,41,74,74,72,69,62,75,74,65,20,4e,61,6d,65,00,01,9c,dc,fe,ff,1d,00,00,00,54,65,78,74,20,54,65,6d,70,6c,61,74,65,20,41,74,74,72,69,62,75,74,65,20,56,61,6c,75,65,00,01,c8,c8,c8,ff,18,00,00,00,54,65,78,74,20,54,65,6d,70,6c,61,74,65,20,43,6f,64,65,20,42,6c,6f,63,6b,01,50,50,50,ff,00,17,00,00,00,54,65,78,74,20,54,65,6d,70,6c,61,74,65,20,44,65,6c,69,6d,69,74,65,72,01,ff,ff,b3,ff,01,00,00,00,ff,1c,00,00,00,54,65,78,74,20,54,65,6d,70,6c,61,74,65,20,44,69,72,65,63,74,69,76,65,20,4e,61,6d,65,00,01,56,9c,d6,ff

This looks very similar to the PowerShellToolsColors.pkgdef, with notable differences. In the T4Toolbox.Dark.pkgdef:

• The [$RootKey$\Themes\{02f39cd3-e77d-4d98-b333-354f4c9eee3a}] defines a custom theme called T4Toolbox.Dark. I believe it should be removed.
• The [$RootKey$\Themes\{02f39cd3-e77d-4d98-b333-354f4c9eee3a}\T4Toolbox] key contains a GUID of the custom new theme, instead of one of the built-in themes. I believe it should be replaced with the {1ded0138-47ce-435e-84ef-9ec1f439b749} representing the Dark theme.
• Here is the resulting file.

[$RootKey$\Themes\{1ded0138-47ce-435e-84ef-9ec1f439b749}\T4Toolbox]
"Data"=hex:da,00,00,00,0b,00,00,00,01,00,00,00,e9,47,b3,8f,2e,e5,49,49,98,06,fe,95,b0,e8,92,9c,05,00,00,00,1c,00,00,00,54,65,78,74,20,54,65,6d,70,6c,61,74,65,20,41,74,74,72,69,62,75,74,65,20,4e,61,6d,65,00,01,9c,dc,fe,ff,1d,00,00,00,54,65,78,74,20,54,65,6d,70,6c,61,74,65,20,41,74,74,72,69,62,75,74,65,20,56,61,6c,75,65,00,01,c8,c8,c8,ff,18,00,00,00,54,65,78,74,20,54,65,6d,70,6c,61,74,65,20,43,6f,64,65,20,42,6c,6f,63,6b,01,50,50,50,ff,00,17,00,00,00,54,65,78,74,20,54,65,6d,70,6c,61,74,65,20,44,65,6c,69,6d,69,74,65,72,01,ff,ff,b3,ff,01,00,00,00,ff,1c,00,00,00,54,65,78,74,20,54,65,6d,70,6c,61,74,65,20,44,69,72,65,63,74,69,76,65,20,4e,61,6d,65,00,01,56,9c,d6,ff

Now we need to figure out how to integrate it with the T4Toolbox VSIX package.

from t4toolbox.

I submitted a new connect issue to report the NullReferenceException problem during import in the Color Theme Editor. Please take moment to up-vote it.

from t4toolbox.

Reproduced & up-voted on MS Connect.

from t4toolbox.

Thanks, @MudaKaizen 🍨

from t4toolbox.

I'll look into how poshtools integrates .pkgdef and see if I can't come up with an implementation path.

from t4toolbox.

Research Notes:

Commit History: PowerShellToolsColors.pkgdef commit history

The referenced PowerShellToolsColors.pkgdef file is in the dev branch, poshtools-dev\PowerShellTools\PowerShellTools.csproj:

<Content Include="PowerShellToolsColors.pkgdef">
    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    <IncludeInVSIX>true</IncludeInVSIX>
</Content>

poshtools-dev\PowerShellTools\Classification\ClassificationType.cs: The foreground colors specified in this file are the defaults if not overridden. For Dark theme and High Contrast, see PowerShellToolsColors.pkgdef

poshtools-dev\PowerShellTools\PowerShellToolsPackage.cs:
// This attribute tells the PkgDef creation utility (CreatePkgDef.exe) that this class is a package.

CreatePkgDef Utility

Takes a .dll file for a Visual Studio extension as a parameter and creates a .pkgdef file to accompany the .dll. The .pkgdef file contains all the information that would otherwise be written to the system registry when the extension is installed.
... Usage ...
Remarks
Extension deployment by using .pkgdef files replaces the registry requirements of earlier versions of Visual Studio.
The .pkgdef files must be installed in one of the following locations: %localappdata%\Microsoft\Visual Studio\12.0\Extensions\ or %vsinstalldir%\Common7\IDE\Extensions. If the installation folder is %localappdata%\Microsoft\Visual Studio\12.0\Extensions, the extension will be recognized by Visual Studio, but will be disabled by default. The user can enable the extension by using Extensions and Updates. If the installation folder is %vsinstalldir%\Common7\IDE\Extensions, the extension is enabled by default.

===== USAGE =====

C:\REPO\T4Toolbox-master\T4Toolbox-master\src\T4Toolbox.vsix\bin\Debug>"%VSSDK140Install%\VisualStudioIntegration\Tools\Bin\CreatePkgDef.exe" /out=test.out /assembly T4Toolbox.VisualStudio.dll /verbose
Visual Studio (R) PkgDef Creation Utility.
Copyright (c) Microsoft Corporation. All rights reserved.

CreatePkgDef : warning : The Assembly specified at 'T4Toolbox.VisualStudio.dll' cannot be loaded because an alternate copy with the same identity exists in the Assembly probing path at 'C:\REPO\T4Toolbox-master\T4Toolbox-master\src\T4Toolbox.vsix\bin\Debug\T4Toolbox.VisualStudio.dll'. The Assembly at 'C:\REPO\T4Toolb
ox-master\T4Toolbox-master\src\T4Toolbox.vsix\bin\Debug\T4Toolbox.VisualStudio.dll' will be loaded instead.
Assembly: T4Toolbox.VisualStudio 14.0.0.0
Output file: test.out.pkgdef

Installed Product:   T4ToolboxPackage, Version 14.0.0.0
Package:          T4ToolboxPackage {c88631b5-770c-453d-b90e-7136f127d57d}
Autoload package:         {164b10b9-b200-11d0-8c61-00a0c91e29d5}
Autoload package:         {fae04ec1-301f-11d3-bf4b-00c04f79efbc}
Option Page:      T4 Toolbox\General
Service:          ITransformationContextProvider
Code generator:  T4Toolbox.ScriptFileGenerator, 8cab1895-2287-463f-be14-1adb873b4741
Code generator:  T4Toolbox.ScriptFileGenerator, 8cab1895-2287-463f-be14-1adb873b4741
Code generator:  T4Toolbox.TemplatedFileGenerator, ab67b8e2-1f42-4c27-a0dd-16e8d54ee487
Code generator:  T4Toolbox.TemplatedFileGenerator, ab67b8e2-1f42-4c27-a0dd-16e8d54ee487
Directive processor: T4Toolbox.DirectiveProcessors.TransformationContextProcessor, T4Toolbox.TransformationContextProcessor, T4 Toolbox Infrastructure

SUCCEEDED:        T4Toolbox.VisualStudio

===== OUTPUT =====
===== FAIL RegistrationAttribute =====

Notice that Output doesn't have anything like the .pkgdef for Dark / Light.

The T4Toolbox.VisualStudio.Editor.csproj contains the relevant references similar to poshtools.

poshtools-dev\PowerShellTools\RegistrationAttributes.cs:FontAndColorsRegistrationAttribute

However, when I run the same command against PowerShellTools.12.0.dll -- no references to Fonts, Colors, Themes or the top-level Fonts & Colors Registration GUID, nor those stored in the .pkgdef. (Also has several other registrations.)

Not sure how it's being referenced by the project or VS.

Code-wise, most everything is in order, between IClassificationTypeRegistryService and ClassificationTypeRegistry, except for different implementation.

Maybe it's just a matter of providing the pkgdef file as a resource, and the FontsAndColors RegistrationAttribute (which is declared in namespace Microsoft.VisualStudio.Shell)?

/ End Thoughts

ToDo: Simple copy-over build & test.

from t4toolbox.

Copying the RegistrationAttributes.cs file and PowerShellToolsColors.pkgdef to either T4Toolbox.csproj or T4Toolbox.VisualStudio.csproj has no effect. (Simple test failed -- there's a bit more to it.)

Also tried a few pkgdef key variations on procedure from 2 days ago...
#14 (comment)

Looks like CreatePkgDef already runs by default as part of the VSIX build process in VS 2015. (Was getting errors about a root-level .pkgdef not being available until resolving some errors -- StyleCop / CodeAnalysis.)

T4TooboxColors.pkgdef copies over to %localappdata% when installing VSIX package manually after release build. (Could not get VS 2015 to install automatically by running the T4Toolbox.vsix project into experimental instance.)

from t4toolbox.

That's right, the T4Toolbox.VisualStudio.pkgdef file is automatically generated by Visual Studio when building the T4Toolbox.vsix project from the registration attributes applied to the T4ToolboxPackage.
The generated file is included in the extension.vsixmanifest file inside of the T4Toolbox VSIX package with a well-known asset type.

<Asset Type="Microsoft.VisualStudio.VsPackage" Path="T4Toolbox.VisualStudio.pkgdef" />

You can see it by opening the .vsix file as a Zip archive. I typically use 7zip, but you can also use Windows Explorer after changing the file extension from .vsix to .zip.

The Microsoft.VisualStudio.VsPackage asset type instructs Visual Studio to import the .pkgdef file during installation of the extension. You can see the actual imported settings using registry editor. The $RootKey$ token from the .pkgdef file is mapped to a "config" registry key, such as HKEY_CURRENT_USER\SOFTWARE\Microsoft\VisualStudio\14.0_Config by default and HKEY_CURRENT_USER\SOFTWARE\Microsoft\VisualStudio\14.0Exp_Config for the experimental instance of Visual Studio.

I think that for the dark theme to work, the T4Toolbox.Dark.pkgdef file simply needs to be included in the T4Toolbox VSIX package and declared in the extension.vsixmanifest with the Microsoft.VisualStudio.VsPackage asset type. The first part can be accomplished by including the file in the T4Toolbox.VisualStudio.Editor project with the <IncludeInVSIX/> metadata property set to true, similar to what you found for PoshTools.

<Content Include="T4Toolbox.Dark.pkgdef">
    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    <IncludeInVSIX>true</IncludeInVSIX>
</Content>

I'm not sure if this will also take care of creating an <Asset/> definition in the generated extension.vsixmanifest. If not, we can explicitly add it to the source.extension.vsixmanifest.

To validate the changes after building a .vsix file locally and installing it, I would first use the registry editor to find the expected data under the HKEY_CURRENT_USER\SOFTWARE\Microsoft\VisualStudio\14.0_Config\Themes\{1ded0138-47ce-435e-84ef-9ec1f439b749}\T4Toolbox registry key. If the settings are there, it means that the T4Toolbox.Dark.pkgdef was added to the VSIX package and imported correctly. Once that is established, I'd try switching to the dark theme in Visual Studio options and verify that colors defined in the .pkgdef file were applied to T4 elements in a .tt file. If they aren't, it would mean that the contents of the .pkgdef file are wrong.

from t4toolbox.

Thanks for the help. Testing & working through it now. (I'm a n00b @ this -- extending Vs.) My default theme is "Dark" -- thus, I see it right away (registry or not, my Experimental instance launches Dark). One possible future Note: switching back and forth (between Themes), I believe, requires subscribing to a notification from Visual Studio, or at least I saw this somewhere in some documentation (not fully tested; maybe it just works in VS 2015).

from t4toolbox.

Great news. 👍 I'm looking forward to the pull request.

Why do you think detection of theme switching is necessary? Do you see the default T4 Toolbox colors when you switch from Dark to Blue or Light theme in your experimental instance of Visual Studio?

from t4toolbox.

Just got an update on the NullReferenceException bug. The bad news is that it is still happening in the newly released Visual Studio 2015 version of the Color Theme Editor. The good news is that they are promising to release a "different tool" that should work for editing extension color themes. In the meantime, it's nice that we don't have to go to Visual Studio 2013 to edit the .pkgdef files anymore.

from t4toolbox.