Skip to content

Instantly share code, notes, and snippets.

@gabe565

gabe565/harvest-jira-dark.md

Last active April 27, 2026 18:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gabe565/e808f3e8e11de2ebf4574e4ddd30cf29 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gabe565/e808f3e8e11de2ebf4574e4ddd30cf29 to your computer and use it in GitHub Desktop.
Download ZIP
Dark theme for the Harvest Jira plugin
Raw
harvest-jira-dark.user.css
/* ==UserStyle==
* @name Harvest Dark Theme
* @namespace github.com/gabe565
* @version 1.0.0
* @description Dark theme for the Harvest time tracker browser plugin
* @author gabe565
* @license MIT
* @homepageURL https://gist.github.com/gabe565/e808f3e8e11de2ebf4574e4ddd30cf29
* @updateURL https://gist.github.com/gabe565/e808f3e8e11de2ebf4574e4ddd30cf29/raw/harvest-jira-dark.user.css
* ==/UserStyle== */
@-moz-document domain("platform.harvestapp.com") {
/* ── Base surfaces ── */
html,
body {
background: var(--pds-white) !important;
color: var(--pds-text) !important;
min-height: 100vh !important;
}
/* ── Root color overrides ── */
:root {
--pds-white: #1e1f1e;
--pds-warm-white: #252624;
--pds-charcoal: #e4e4e4;
--pds-text: #d8d8d8;
--pds-text-muted: rgba(216, 216, 216, 0.7);
--pds-gray-100: #2a2b2a;
--pds-gray-150: #333433;
--pds-gray-200: #3e3f3e;
--pds-gray-300: #4a4b4a;
--pds-gray-400: #5c5d5c;
--pds-gray-500: #727372;
--pds-gray-600: #9a9b9a;
--pds-gray-700: #b0b1b0;
--pds-gray-800: #c8c8c8;
--pds-gray-900: #e0e0e0;
--pds-gray-alpha-100: rgba(220, 220, 218, 0.07);
--pds-gray-alpha-150: rgba(220, 220, 218, 0.15);
--pds-gray-alpha-200: rgba(220, 220, 218, 0.25);
--pds-gray-alpha-300: rgba(220, 220, 218, 0.30);
--pds-gray-alpha-400: rgba(220, 220, 218, 0.40);
--pds-gray-alpha-500: rgba(220, 220, 218, 0.50);
--pds-gray-alpha-600: rgba(220, 220, 218, 0.62);
--pds-gray-alpha-700: rgba(220, 220, 218, 0.70);
--pds-gray-alpha-800: rgba(220, 220, 218, 0.80);
--pds-gray-alpha-900: rgba(220, 220, 218, 0.90);
--pds-orange: #fa5d00;
--pds-blue-300: #7eaaf0;
--pds-red-300: #ef8b81;
--pds-green-400: #6abe78;
/* dark-theme-specific surfaces */
--dark-surface-raised: #2e2f2e;
--dark-surface-overlay: #383938;
--dark-header-bg: #2a2518;
}
header {
background: var(--dark-header-bg) !important;
border-bottom-color: #c45400 !important;
}
/* ── Inputs ── */
.pds-input,
textarea.pds-input,
select.pds-input,
.entry-notes,
.input-duration,
.input-timestamps,
.input-spent-date {
background-color: var(--pds-gray-100) !important;
border-color: var(--pds-gray-alpha-200) !important;
box-shadow: inset 0 2px rgba(0, 0, 0, 0.15) !important;
color: var(--pds-text) !important;
}
.pds-input::placeholder {
color: var(--pds-gray-alpha-500) !important;
}
.pds-input:hover,
.pds-input:focus {
border-color: var(--pds-gray-alpha-400) !important;
}
.pds-input:disabled,
.pds-input[readonly] {
background: #232423 !important;
border-color: var(--pds-gray-alpha-150) !important;
color: var(--pds-gray-alpha-500) !important;
}
/* select arrow — light chevron */
select.pds-input {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><polyline points="5 9 12 17 19 9" /></svg>') !important;
}
/* ── Buttons ── */
.pds-button,
.pds-input::file-selector-button {
background-color: var(--dark-surface-raised) !important;
border-color: var(--pds-gray-alpha-200) !important;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) !important;
color: var(--pds-gray-800) !important;
}
.pds-button:hover,
.pds-input:hover::file-selector-button {
border-color: var(--pds-gray-alpha-400) !important;
}
.pds-button:active,
.pds-input:active::file-selector-button {
background-color: var(--dark-surface-overlay) !important;
}
.pds-button.pds-button-selected,
.pds-button.popover-active {
background-color: var(--dark-surface-overlay) !important;
border-color: var(--pds-gray-400) !important;
color: var(--pds-text-muted) !important;
}
/* Primary (green) — keep but slightly muted for dark bg */
.pds-button-primary {
background-color: #1a7a30 !important;
color: #fff !important;
}
.pds-button-primary:hover {
background-color: #156a28 !important;
}
/* Charcoal / running — flip to light-on-dark */
.pds-button-charcoal,
.pds-button-running {
background-color: var(--pds-text) !important;
color: var(--pds-white) !important;
}
.pds-button-charcoal:hover,
.pds-button-running:hover {
background-color: #c0c0c0 !important;
}
/* Danger */
.pds-button-danger {
background-color: #c42a2a !important;
}
/* Toggle selected state */
.pds-button-toggle .pds-button.pds-button-selected {
background-color: rgba(250, 93, 0, 0.15) !important;
border-color: var(--pds-orange) !important;
color: #ffb88a !important;
}
/* Link-style buttons */
.pds-button-link,
.pds-alert-close {
color: var(--pds-blue-300) !important;
}
a {
color: var(--pds-blue-300) !important;
}
/* ── Cards & alerts ── */
.pds-card,
.pds-alert,
.pdsf-card {
background: #262726 !important;
border-color: var(--pds-gray-alpha-150) !important;
}
.pds-card-secondary,
.pdsf-card-secondary {
background: #222322 !important;
}
.pds-card-notice,
.pds-alert-notice,
.pdsf-card-notice {
background: #1c2a3d !important;
border-color: #3a5f99 !important;
}
.pds-card-success,
.pds-alert-success,
.pdsf-card-success {
background: #1a2e1d !important;
border-color: #2e7a3a !important;
}
.pds-card-warning,
.pds-alert-warning,
.pdsf-card-warning {
background: #302a18 !important;
border-color: #a8882e !important;
}
.pds-card-danger,
.pds-alert-danger,
.pdsf-card-danger {
background: #351c1a !important;
border-color: #a33a32 !important;
}
.pds-card-warm-white,
.pds-alert-upsell,
.pdsf-card-warm-white {
background: #2d2518 !important;
border-color: #8a5020 !important;
}
/* ── Dropdown / Chosen ── */
.pds-chosen-dropdown {
background-color: var(--pds-gray-100) !important;
border-color: var(--pds-gray-alpha-150) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}
.pds-chosen-dropdown:after {
border-bottom-color: var(--pds-gray-100) !important;
}
.pds-chosen-result,
.pds-chosen-result-group {
color: var(--pds-text) !important;
}
.pds-chosen-highlighted {
background: var(--pds-orange) !important;
color: #fff !important;
}
.pds-chosen-no-results {
color: var(--pds-gray-alpha-500) !important;
}
.pds-chosen-and-more {
color: var(--pds-gray-alpha-500) !important;
}
.pds-chosen-input {
background-color: var(--pds-gray-100) !important;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="%23fff" d="M16 14.4l-4.2-4.1c.8-1.1 1.2-2.4 1.2-3.8 0-3.6-2.9-6.5-6.5-6.5s-6.5 2.9-6.5 6.5 2.9 6.5 6.5 6.5c1.4 0 2.6-.4 3.7-1.1l4.2 4.2 1.6-1.7zm-14.1-7.9c0-2.5 2.1-4.6 4.6-4.6s4.6 2.1 4.6 4.6-2.1 4.6-4.6 4.6-4.6-2.1-4.6-4.6z"/></svg>') !important;
border-color: var(--pds-gray-alpha-200) !important;
color: var(--pds-text) !important;
}
.pds-chosen-clear-selection-container {
border-top-color: var(--pds-gray-alpha-150) !important;
}
.pds-chosen-backdrop {
background: rgba(0, 0, 0, 0.6) !important;
}
.pds-chosen-button {
background-color: var(--dark-surface-raised) !important;
border-color: var(--pds-gray-alpha-200) !important;
color: var(--pds-gray-800) !important;
}
.pds-chosen-blank:not([disabled]) {
color: var(--pds-gray-alpha-500) !important;
}
/* ── Tooltip ── */
.pds-tooltip {
background: var(--dark-surface-overlay) !important;
color: var(--pds-charcoal) !important;
}
.pds-tooltip-top:before {
border-top-color: var(--dark-surface-overlay) !important;
}
.pds-tooltip-bottom:before {
border-bottom-color: var(--dark-surface-overlay) !important;
}
.pds-tooltip-right:before {
border-right-color: var(--dark-surface-overlay) !important;
}
.pds-tooltip-left:before {
border-left-color: var(--dark-surface-overlay) !important;
}
/* ── Checkbox / Radio ── */
:is(.pds-checkbox,
.pds-radio) :is([type="checkbox"],
[type="radio"]) {
background-color: var(--pds-gray-100) !important;
border-color: var(--pds-gray-alpha-300) !important;
}
:is(.pds-checkbox,
.pds-radio) :is([type="checkbox"],
[type="radio"]):hover:not(:checked):not(:disabled) {
border-color: var(--pds-gray-alpha-500) !important;
}
/* Choice pills */
.pds-choice label {
background: var(--pds-gray-100) !important;
border-color: var(--pds-gray-300) !important;
color: var(--pds-text) !important;
}
.pds-choice label:hover {
border-color: var(--pds-gray-alpha-400) !important;
}
.pds-choice input:checked + label {
background: rgba(250, 93, 0, 0.15) !important;
border-color: var(--pds-orange) !important;
color: #ffb88a !important;
}
/* ── Validation states ── */
.pds-input-invalid {
background: #351c1a !important;
border-color: #c42a2a !important;
}
.pds-invalid-description {
color: var(--pds-red-300) !important;
}
.pds-field-description {
color: var(--pds-gray-alpha-600) !important;
}
/* ── Labels & helper text ── */
.pds-label {
color: var(--pds-text) !important;
}
.pds-input-nested-label .pds-label {
color: var(--pds-gray-alpha-600) !important;
}
.shift-enter-helper-text {
color: var(--pds-gray-500) !important;
}
/* ── Utility color overrides for dark ── */
.pds-color-text {
color: var(--pds-text) !important;
}
.pds-color-muted {
color: var(--pds-text-muted) !important;
}
.pds-color-gray {
color: var(--pds-gray-alpha-600) !important;
}
.pds-color-blue {
color: var(--pds-blue-300) !important;
}
.pds-color-green {
color: var(--pds-green-400) !important;
}
.pds-color-red {
color: var(--pds-red-300) !important;
}
/* ── HR ── */
hr {
border-bottom-color: var(--pds-gray-200) !important;
}
/* ── Focus ring ── */
*:focus {
outline-color: var(--pds-blue-300) !important;
}
/* ── Asana integration plug (if visible) ── */
.asana-integration-plug {
background: #2d2518 !important;
}
#asana-tooltip {
background: var(--dark-surface-overlay) !important;
color: var(--pds-charcoal) !important;
}
}
/* @-moz-document */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment