Skip to content

Customization

Federico Brigante edited this page Oct 3, 2024 · 4 revisions

While Refined GitHub is opinionated about options, it does allow some customization via CSS variables.

Some CSS cannot be disabled because it's applied globally. You can override it using the Custom CSS field in extension options page.

file-age-color and release-download-count

You can customize the base color used by these features via the --rgh-heat-color CSS variable:

:root {
	--rgh-heat-color: <your-color>;
}

Rest of the colors will be inferred automatically.

Refined GitHub respects your tab size preference where applicable, and sets a sensible tab size of 4 elsewhere.

You can customize this via the the --tab-size CSS variable:

:root,
.comment-body .tab-size[data-tab-size='8'] {
	--tab-size: <your-choice-of-tab-size>;
}

conventional-commits

The feature only supports the base types defined by Angular/Conventional Changelog. This list is not customizable.

You can customize the style/colors of matched types with some CSS, for example:

[rgh-conventional-commits] {
    --label-r: 255;
    --label-g: 255;
    --label-b: 255;
    --label-h: 0;
    --label-s: 0;
    --label-l: 100;
}
[rgh-conventional-commits="feat"]:before {content: '✨ '}
[rgh-conventional-commits="fix"]:before {content: 'πŸ› '}
[rgh-conventional-commits="docs"]:before {content: 'πŸ“š '}
[rgh-conventional-commits="style"]:before {content: 'πŸ’Ž '}
[rgh-conventional-commits="refactor"]:before {content: 'πŸ“¦ '}
[rgh-conventional-commits="perf"]:before {content: 'πŸš€ '}
[rgh-conventional-commits="test"]:before {content: '🚨 '}
[rgh-conventional-commits="build"]:before {content: 'πŸ›  '}
[rgh-conventional-commits="ci"]:before {content: 'βš™οΈ '}
[rgh-conventional-commits="chore"]:before {content: '♻️ '}
[rgh-conventional-commits="revert"]:before {content: 'πŸ—‘ '}

Clone this wiki locally