Skip to content

Instantly share code, notes, and snippets.

@micalevisk
Last active March 2, 2021 20:01
Show Gist options
  • Save micalevisk/3b478b06f7d277b7d274fab6889cb7b5 to your computer and use it in GitHub Desktop.
Save micalevisk/3b478b06f7d277b7d274fab6889cb7b5 to your computer and use it in GitHub Desktop.
https://www.octotree.io (free version) dark style for GitHub dark mode. (Firefox)
/*!
* octotree dark mode for github dark mode.
* @version 2020-12-10
* @link https://gist.github.com/micalevisk/3b478b06f7d277b7d274fab6889cb7b5
* @author Micael Levi https://github.com/micalevisk
* @license https://creativecommons.org/licenses/by-sa/4.0
*/
@-moz-document domain(github.com) {
/**/
.octotree-toggle-icon::before {
color: var(--color-topic-tag-text) !important;
}
/**/
.octotree-toggle>span {
color: var(--color-topic-tag-text) !important;
}
/**/
.octotree-toggle {
background: var(--color-bg-canvas) !important;
border: 1px solid var(--color-border-primary) !important;
}
/* tree view background */
.octotree-views {
background-color: var(--color-bg-canvas) !important;
}
/**/
.octotree-sidebar.octotree-github-sidebar .octotree-views {
border-right: 1px solid var(--color-border-primary) !important;
}
/**/
.octotree-view-header {
background-color: var(--color-header-bg) !important;
}
/**/
.octotree-footer {
background-color: var(--color-bg-canvas) !important;
border-color: var(--color-border-primary) !important;
}
/**/
.octotree-footer-user-profile__email a {
color: var(--color-text-secondary) !important;
}
/* files name */
.octotree-sidebar.octotree-github-sidebar .octotree-views .octotree-tree-view .jstree-anchor {
color: var(--color-text-primary) !important;
}
/**/
.jstree-wholerow-clicked {
background: var(--color-bg-tertiary) !important;
}
/**/
.jstree-open>.jstree-ocl::before {
color: var(--color-topic-tag-text) !important;
}
/**/
.jstree-closed>.jstree-ocl::before {
color: var(--color-text-primary) !important;
}
/* (bugfix: when open the sidebar, the icon of the current file has gone) */
.jstree-node[aria-selected="true"].jstree-leaf .octotree-default-icon.blob::before {
color: #6a737d !important;
}
/**/
.octotree-icon-file-directory::before {
color: var(--color-files-explorer-icon) !important;
}
/**/
.jstree-wholerow-hovered,
.jstree-hovered {
background: var(--color-bg-tertiary) !important;
}
/**/
.jstree-default>.jstree-wholerow-ul .jstree-clicked,
.jstree-default>.jstree-wholerow-ul .jstree-hovered {
background: 0 0 !important;
}
}
/*!
* octotree dark mode for github dark mode.
* @version 2020-12-10
* @link https://gist.github.com/micalevisk/3b478b06f7d277b7d274fab6889cb7b5
* @author Micael Levi https://github.com/micalevisk
* @license https://creativecommons.org/licenses/by-sa/4.0
*/
@-moz-document domain(github.com) {
@media (prefers-color-scheme: dark) {
/**/
.octotree-toggle-icon::before {
color: var(--color-topic-tag-text) !important;
}
/**/
.octotree-toggle>span {
color: var(--color-topic-tag-text) !important;
}
/**/
.octotree-toggle {
background: var(--color-bg-canvas) !important;
border: 1px solid var(--color-border-primary) !important;
}
/* tree view background */
.octotree-views {
background-color: var(--color-bg-canvas) !important;
}
/**/
.octotree-sidebar.octotree-github-sidebar .octotree-views {
border-right: 1px solid var(--color-border-primary) !important;
}
/**/
.octotree-view-header {
background-color: var(--color-header-bg) !important;
}
/**/
.octotree-footer {
background-color: var(--color-bg-canvas) !important;
border-color: var(--color-border-primary) !important;
}
/**/
.octotree-footer-user-profile__email a {
color: var(--color-text-secondary) !important;
}
/* files name */
.octotree-sidebar.octotree-github-sidebar .octotree-views .octotree-tree-view .jstree-anchor {
color: var(--color-text-primary) !important;
}
/**/
.jstree-wholerow-clicked {
background: var(--color-bg-tertiary) !important;
}
/**/
.jstree-open > .jstree-ocl::before {
color: var(--color-topic-tag-text) !important;
}
/**/
.jstree-closed > .jstree-ocl::before {
color: var(--color-text-primary) !important;
}
/* (bugfix: when open the sidebar, the icon of the current file has gone) */
.jstree-node[aria-selected="true"].jstree-leaf .octotree-default-icon.blob::before {
color: #6a737d !important;
}
/**/
.octotree-icon-file-directory::before {
color: var(--color-files-explorer-icon) !important;
}
/**/
.jstree-wholerow-hovered,
.jstree-hovered {
background: var(--color-bg-tertiary) !important;
}
/**/
.jstree-default>.jstree-wholerow-ul .jstree-clicked,
.jstree-default>.jstree-wholerow-ul .jstree-hovered {
background: 0 0 !important;
}
}
}
@micalevisk
Copy link
Author

micalevisk commented Dec 10, 2020

and if you want to remove the "Octotree" label of the sidebar toggle button:

    .octotree-toggle__brand {
      display: none !important;
    }

result

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment