Customization

Pomoday has a built-in customize command, which will open up a code editor, so you can start customize the UI by using CSS.

For now, you can just use your browser's developer tool to inspect the UI and determine what to customize. There are a couple of things that might be helpful:

• Light mode and Dark mode are determined with a top-level dark or light class.
• Some of the recommended classes to use are: el-main-view, el-sideview, el-sideview-header, el-sideview-subheader, el-side-text, el-time-counter, el-tag, el-text, el-task-id, el-task-content, el-task-normal, el-task-done,...

Below is the sample CSS content for Solarized theme, in both light and dark mode:

.el-main-view, .el-side-text, .el-tag, .el-sideview {
  transition: all 0.2s;
}

/* Solarized Light */

.light .el-main-view {
  background: #fdf6e3;
  color: #657b83;
}

.light .el-side-text {
  color: #93a1a1;
}

.light .el-tag {
  text-decoration: none;
  display: inline-block;
  background: #eee8d5;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 0 8px;
}

.light .el-sideview {
  background: #eee8d5;
  color: #657b83;
  border-bottom: 1px solid;
  border-color: #fdf6e3;
}

.light .text-stall-dim, .light .text-stall-light {
  color: #93a1a1;
}

.light .bg-control {
  background: #eee8d5;
}

/* Solarized Dark */

.dark .el-main-view {
  background: #073642;
  color: #93a1a1;
}

.dark .el-side-text {
  color: #93a1a1;
}

.dark .el-tag {
  text-decoration: none;
  display: inline-block;
  background: #002b36;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 0 8px;
}

.dark .el-sideview {
  background: #002b36;
  color: #93a1a1;
  border-bottom: 1px solid;
  border-color: #073642;
}

.dark .text-stall-dim, .dark .text-stall-light {
  color: #586e75;
}

.dark .bg-control {
  background: #002b36;
}

Screenshots:

Please note that it will not change anything in your browser, the themed browser style in the above screenshots was done via a separated plugin.