Customizable themes

[evancharlton]

Background

It would be great if Codetree officially supported different themes. You don't have to build them, just use stable CSS class names. Maybe an option to allow admins to upload their own additional stylesheet(s) for the org/project to use.

But again: the bare minimum of stable class names would be great -- I can fire up Stylus and take it from there.

Solution

Allow for customizable themes

[sanjaypojo]

+1 for custom themes, or even just a couple of different theme options.

[scottmmjackson]

A dark theme in particular would be much appreciated.

EDIT: I've made a basic dark theme that covers most of the bases of basic display. It has some jarring transitions in hovers and a clicked issue still comes up in light theme. However, please feel free to make use of it.

Codetree User CSS (import in Stylus or another user-style extension)

``` @-moz-document url-prefix("https://codetree.com/") { body { background-color: #333; color: white; } .navbar { background-color: #333; color: white; } .navbar-identity .name { color: white; } .timeline-node.muted { background-color: #333; color: white; } .timeline-node { border-bottom: solid 1px black; } .sidebar { background-color: #333; color: white; } .page-footer { background-color: #333; color: white; } .sidebar-nav li a { color: lightpink; } .sidebar h1 { color: lightblue; } .issue-filter-container { background-color: #333; color: white; } .board-container { background-color: #333; color: white; } .board-cards { background-color: #440505; color: white; border: 1px solid black; } .dropdown-menu { background-color: #440505; } .dropdown-menu>ul>li a { color: lightblue; } .issue-form-title { background-color: #440505; color: white; } .issue-form-header { background-color: #440505; color: white; border: 1px solid black; } .board-card { background-color: #333; color: white; border: 1px solid black; } .board-card:hover { background-color: black; } .recent-issue-list .recent-issue-list-header { background-color: #440505; color: lightpink; border-bottom: 1px solid black; } .recent-issue-list { border: 1px solid black; } .issue-form-content { background-color: #333; color: white; } .issue-form-main { background-color: #333; color: white; border-right: solid 1px black; } .issue-form-sidebar-item { border-bottom: solid 1px black; } textarea { background-color: #333; color: lightpink; } .comment-composer-body { color: lightpink; } .navbar-search input { background-color: #333; color: lightpink; } .navbar-search input:focus { background-color: black; color: lightgreen; } h1 { color: lightblue; } h2 { color: lightblue; } h3 { color: lightblue; } .board-column-size { color: lightpink; } p { color: lightpink; } .markdown p { color: lightpink; } .markdown .user-mention { color: lightblue; } .markdown code { background-color: black; color: lightgreen; font-weight: bolder; } ul.board-card-references .issue-reference-title { color: lightpink; } .board-card-title .issue-number { color: lightblue; } .issue-milestone { background-color: #333; color: lightpink; } .sidebar-nav li a .count-label { background-color: #333; color: lightpink; } .board-card-assignee .avatar { background-color: #333; color: lightpink; } .issue-filter, .issue-batch-editbar { background-color: #333; color: lightpink; } .board-container::-webkit-scrollbar { background:transparent; } .board-cards::-webkit-scrollbar { background:transparent; } .sidebar-navgroup::-webkit-scrollbar { background:transparent; } ::-webkit-scrollbar-thumb { background:rgba(255,0,0,0.1) !important; } } ```

EDIT2: Updated the user stylesheet on 3/26/09

[ac21]

https://app.intercom.io/a/apps/he4q7g1x/inbox/inbox/all/conversations/21729016201 +1

[ac21]

https://app.intercom.io/a/apps/he4q7g1x/inbox/inbox/2848986/conversations/21923364692 +1

[ac21]

https://app.intercom.io/a/apps/he4q7g1x/inbox/inbox/2848986/conversations/22044935188 +1

[sachinkum123]

@ac21 please give me the access for intercom.

[scottmmjackson]

AFAIK intercom is codetree's internal CRM. It looks like it's supposed to be for employees only. I've been receiving notifications about the intercom posts for a while without being able to view them. It might be better to consolidate them all in one comment with an explanation for outside people that they shouldn't expect to be able to access them.

[ac21]

@scottmmjackson - the notices you are getting are just +1's by other community members, except we do it on their behalf to save them the effort and to help us understand the interest in this feature. FYI, we have prioritized this issue for development, so hoping to deliver it either this sprint or next.

[scottmmjackson]

I understand that, I suggested that since this is a public repository, the posts be consolidated and come with an explanation, so users watching the issue don't try clicking on them and get confused as to why they can't access it. Does that make sense?

[ac21]

@scottmmjackson - it definitely makes sense and I can see the frustration. you proposed solution probably makes sense going forward (although we'll need to test it out to ensure the Intercom webhooks work with consolidation). thanks for the suggestion

[ac21]

@sachinkum123 - my iniital thoughts on implementation: 1) create some color classes with our default colors ( codetree-bg-color ) 2) migrate default color definitions out of components and into these color classes and apply classes to html (1+2 allows for use of asset pipeline and single download of common files) 3) when custom color preferences exist, overload color classes with new colors either through late loading header CSS or dynamic JS (does this make sense?) 4) provide options to specify colors in project settings (or should this be user settings? I'm torn a bit). seems like we have 4: (bg, text, accent, container) any more? 5) when specifying colors, you can choose the default, dark, or custom (where users can key in RBG codes) 6) cache dark or custom color preferences (in session key/redis for speed), reduce db hits thoughts?

[ac21]

needs codetree/codetree#2239

[ac21]

https://app.intercom.io/a/apps/he4q7g1x/inbox/inbox/2848986/conversations/23218208823 +1

[ac21]

internal use: https://app.intercom.io/a/apps/he4q7g1x/inbox/inbox/all/conversations/25755521355