I won't go into the minor details of the theme building process, however I will talk about the high level details of what is accomplished.
All themes have a base template that they inherit from. Themes have the ability to choose their inherited parent. Each child has the ability to override any attributes defined by the parent. This mitigates any one-off issues for themes that are not captured by the global shared style.
Before you get started, you'll probably want to follow the installation instructions
- Yarn package manager
- Node 14
- HighLinkTrace
Set up Yarn Globals
I heavily use Node/Typescript to build all of my themes, and I have a fair amount of global tools installed.
Just run
yarn global add typescript ts-node nodemon
Note: if you already have these globally installed please make sure you are up to date!
yarn global upgrade typescript ts-node
Get the Master Themes
Since this theme suite expands across multiple platforms, in order to maintain consistency of the look and feel across platforms, there is a central theme definition repository
This repository needs to be cloned as a directory called masterThemes
. If you are running Linux/MacOS, you can
run getMasterThemes.sh
located at the root of this repository. This script does exactly what is required, if you are
on Windows, have you considered Linux? Just kidding (mostly), you'll need to run this command
git clone https://github.com/doki-theme/doki-master-theme.git masterThemes
Your directory structure should have at least these directories, (there will probably be more, but these are the important ones to know).
your-workspace/
├─ doki-theme-vim/
│ ├─ masterThemes/
│ ├─ buildSrc/
Inside the masterThemes
directory, you'll want to make sure all the dependencies are available to the build scripts.
To accomplish this, just run this command in the masterThemes
directory.
yarn
Install Helpful Plugins
HiLinkTrace is a handy plugin that allows you to look up the syntax highlighting in an open file with syntax highlighting on.
- Create a place to install the plugin
mkdir -p ~/.vim/pack/vendor/start
- Clone the repository into the new destination
git clone --depth 1 [email protected]:gerw/vim-HiLinkTrace.git ~/.vim/pack/vendor/start/hiLinkTrace
- Enable the setting in your
~/.vimrc
filetype plugin on
syntax on
colorscheme zero_two_light " Best Girl
:set hls
nnoremap <F8> :HLT<CR> " Allows you to use F8 to view the source highlightings
nnoremap <F10> :colorscheme zero_two_light<CR> " Convience Shortcut to F10 that sets a theme
I pressed F8 where the cursor is, and it shows me that it is scoped to
vimBracket
fromvimBracket->Delimiter->Special
Helpful Links
Navigate to the root of the buildSource
directory and run the following command.
yarn
This will install all the required dependencies to run the theme build process.
You should be good to edit and add themes after that!
I have too many themes to maintain manually, so theme creation/maintenance is automated and shared common parts to reduce overhead.
The standardized approach used by all the plugins supporting the Doki Theme suite, is that there is a buildSrc
directory.
Inside the buildSrc
directory, there will be 2 directories:
src
- holds the code that builds the themes.assets
- defines the platform specific assets needed to build the themes. This directory normally contains two child directories.themes
- holds the application definitionstemplates
- if not empty, normally contains various text files that can be evaluated to replace variables with values. Some cases, they also contain templates for evaluating things such as look and feel, colors, and other things.
The buildSrc
directory houses a buildThemes
script that generates the application specific files necessary for apply
the Doki Theme Suite.
There are a few templates that compose the assets of this plugin.
They can be found in buildSrc/assets/templates
These templates are evaluated as part of the theme building process. When you run this command in the buildSrc
directory:
yarn buildThemes
All of these templates will be evaluated for each theme and be placed in the corresponding directories. That way when you open a new vim session, you should be able to see the new changes.
IMPORTANT! Do not create brand new Doki-Themes using the Vim Plugin. New themes should be created from the original JetBrains plugin which uses all the colors defined. There is also Doki Theme creation assistance provided by the IDE as well.
Please follow the theme creation contributions in the JetBrains Plugin repository for more details on how to build new themes.
- Follow the initial setup
This part is mostly automated, for the most part. There is only one script you'll need to run.
Once you have a new master theme definitions merged into the default branch, it's now time to generate the application specific templates, which allow us to control individual theme specific settings.
You'll want to edit the function used by buildApplicationTemplate
and appName
defined here
in your masterThemes
directory.
In the case of this plugin the buildApplicationsTemplate
should use the vimTemplate
and appName
should be vim
.
We need run the generateTemplates
script. Which will walk the master theme definitions and create the new templates in
the <repo-root>/buildSrc/assets/themes
directory (and update existing ones). In
the <your-workspace>/doki-theme-vim/masterThemes
run this command:
yarn generateTemplates
The code defined in the buildSrc/src
directory is part of the common Doki Theme construction suite. All other plugins
work the same way, just some details change for each plugin, looking at
you doki-theme-web. This group of code exposes a buildThemes
node
script.
This script does all the annoying tedious stuff such as:
- Evaluating the
buildSrc/assets/templats
from the templates and putting them in the right place. See Vim Specifics for more details.
Here is an example pull request that captures all the artifacts from the development process of imported themes . There is going to be a heckin a lot of changes, so be prepared!