Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Products
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

HipChat Addon Dark Theme Support

Chris Reece
Chris Reece October 18, 2016

Hello,

 Is there something special that you have to do when dealing with the dark themes in a HipChat addon? I am using the aui elements specifically and it looks great in light theme but when I switch to dark some of the text like item titles (aui-connect-list-item-description) and (aui-nav) list item titles are barely readable.

Thanks!

Answer
Watch
Like # people like this
1127 views

2 answers

1 accepted

2 votes
Answer accepted
Dugald Morrow
Dugald Morrow
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
November 1, 2016

I think the logic that should detect the theme is missing from the generated code. Would you try adding the following code to the top of addon.js just after (inside) the "$(document).ready(function () {" statement:

var theme = getQueryVariable('theme');
alert('theme = ' + theme);
if (theme === 'light' || theme === 'dark') {
  $('body').addClass(theme);
}

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return false;
}
View More Comments
Aaron Connell
Aaron Connell November 1, 2016

Adding this worked.

thanks!

 

Like
Chris Reece
Chris Reece November 1, 2016

This also worked for me and this code is definitely missing from the generated code. Would be nice if that could be added soon so others don't have this same issue. Thank you for the assistance and I am marking this answered.

Like
Dugald Morrow
Dugald Morrow
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
November 1, 2016

Thanks Chris. I have created a pull request with the changes so the template should soon be updated with the fix.

Like
Reply
0 votes
Dugald Morrow
Dugald Morrow
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
October 23, 2016

Hi Chris,

If you created your add-on using the Atlassian Connect Express framework recently, then it should come with dark theme support. Essentially, the framework uses a cutdown version of AUI available at https://aui-cdn.atlassian.com/aui-hipchat/0.1.2/css/aui-hipchat.min.css. This CSS has various styles which come into play when HipChat is in dark mode - see the styles in the CSS starting with body.dark.

Here's a link to the page showing how to build a HipChat add-on using the Atlassian Connect Express framework: https://developer.atlassian.com/hipchat/tutorials/getting-started-with-atlassian-connect-express-node-js.

Regards,

Dugald

View More Comments
Chris Reece
Chris Reece October 24, 2016

Hi Dugald,

Thanks for the response. The article you linked is exactly what I used when I was building my sidebar application. I didn't change anything in the css file as well. Here's a screenshot of my application dark theme / light theme:

dark theme sidebar.png

light theme sidebar.png

You can see in the dark theme screenshot, the text on the tabs is barely readable and the footer is a solid white background. The light theme looks great!

The layout does link in the 1.2 css as well that you mentioned.

We also have another sidebar application that was NOT written by us that has what appears to be the same issues. It is the ToDo List:

todo list dark theme sidebar.png

So while there is SOME support, the UI does not look like I would expect at all in regards to the text / colors. Is this something I should just extend in the CSS and make my own?


Thanks!

Like
Aaron Connell
Aaron Connell November 1, 2016

I am having the same issues. For giggles, I updated the <body> tag in layout.hbs to 

<body class="dark">

and it does indeed display as expected when in Dark mode. Appears that dark class is not being set on sidebar add-ons body tag. 

This is not a solution, as it looks horrible in light mode cheeky

And - this is a fresh install of everything with latest code. Using the HipChat template add-on.

Like
OE
OE March 13, 2017

As well if I add <body class="dark"> it does make the dark theme look good, but as Aaron said, this is not a fix. Im building my addon with php. Has there been any progress on detecting what theme the user is using in a non node.js way?

Like
Chris Reece
Chris Reece March 13, 2017

@Oren E. This was fixed in a later update to the template after this post. The following code is what was added by Atlassian to the addon.js file to get the themes to work properly:

var theme = getQueryVariable('theme');

   if (theme === 'light' || theme === 'dark') {
       $('body').addClass(theme);
   }

   function getQueryVariable(variable) {
       var query = window.location.search.substring(1);
       var vars = query.split("&amp;");
       for (var i=0;i&lt;vars.length;i++) {
           var pair = vars[i].split("=");
           if (pair[0] == variable) {
               return pair[1];
           }
       }
       return false;
   }
Like
OE
OE March 13, 2017

Thanks for the quick reply!

where is the addon js? Do you have a cdn link?

 

The only js Im pulling in from them currently is aui-hipchat.min.js

Like
Chris Reece
Chris Reece March 13, 2017

I reread your post and you said you are doing yours in php and need a non-nodejs way. The addon.js file is part of the node.js app on the Atlassian side. I would assume the the method is similar in php although Im not sure where you are getting your initial query string params from.

Like
Reply

Suggest an answer

Log in or Sign up to answer
Hipchat
Hipchat
TAGS
AUG Leaders

Atlassian Community Events

    See all events