HipChat Addon Dark Theme Support

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!

2 answers

1 accepted

2 votes
Accepted answer

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;
}

Adding this worked.

thanks!

 

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.

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

0 votes

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

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!

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.

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?

@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;
   }

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

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.

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Nov 14, 2018 in Hipchat Cloud

Hipchat Cloud and Stride End of Life: Just over 90 days away

Earlier this year we made the difficult decision to discontinue our team messaging tools, Stride and Hipchat. The end of life date for Stride and Hipchat Cloud is quickly approaching - February 15, 2...

464 views 0 2
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you