Skip to content

Instantly share code, notes, and snippets.

@seksenov
Forked from Gr8Gatsby/changeAppTitleBarColors.js
Created December 10, 2015 23:51
Show Gist options
  • Save seksenov/c2983e233c7cdd62ab4c to your computer and use it in GitHub Desktop.
Save seksenov/c2983e233c7cdd62ab4c to your computer and use it in GitHub Desktop.
This Gist shows how to set the application titlebar colors. There is a helper function that accepts an HTML hexString and converts it to an RGBA color object for Windows.
/*
This function expects two hexStrings and relies on hexStrToRGBA to convert
to a JSON object that represents RGBA for the underlying Windows API to
understand.
Examples of valid values:
setAppBarColors('#FFFFFF','#000000');
setAppBarColors('#FFF','#000');
setAppBarColors('FFFFFF','000000');
setAppBarColors('FFF','000');
*/
function setAppBarColors(brandColorHex, brandColorInactiveHex) {
// Detect if the Windows namespace exists in the global object
if (typeof Windows !== 'undefined' &&
typeof Windows.UI !== 'undefined' &&
typeof Windows.UI.ViewManagement !== 'undefined') {
var brandColor = hexStrToRGBA(brandColorHex);
var brandColorInactive = hexStrToRGBA(brandColorInactiveHex);
// Get a reference to the App Title Bar
var appTitleBar = Windows.UI.ViewManagement.ApplicationView.getForCurrentView().titleBar;
var black = hexStrToRGBA('#000');
var white = hexStrToRGBA('#FFF');
appTitleBar.foregroundColor = white;
appTitleBar.backgroundColor = brandColor;
appTitleBar.buttonForegroundColor = white;
appTitleBar.buttonBackgroundColor = brandColor;
appTitleBar.buttonHoverForegroundColor = white;
appTitleBar.buttonHoverBackgroundColor = brandColor;
appTitleBar.buttonPressedForegroundColor = brandColor;
appTitleBar.buttonPressedBackgroundColor = white;
appTitleBar.inactiveBackgroundColor = brandColorInactive;
appTitleBar.inactiveForegroundColor = brandColor;
appTitleBar.buttonInactiveForegroundColor = brandColor;
appTitleBar.buttonInactiveBackgroundColor = brandColorInactive;
appTitleBar.buttonInactiveHoverForegroundColor = brandColor;
appTitleBar.buttonInactiveHoverBackgroundColor = brandColorInactive;
appTitleBar.buttonPressedForegroundColor = brandColor;
appTitleBar.buttonPressedBackgroundColor = brandColorInactive;
}
}
// Helper function to support HTML hexColor Strings
function hexStrToRGBA(hexStr){
// RGBA color object
var colorObject = { r: 255, g: 255, b: 255, a: 255 };
// remove hash if it exists
hexStr = hexStr.replace('#', '');
if (hexStr.length === 6) {
// No Alpha
colorObject.r = parseInt(hexStr.slice(0, 2),16);
colorObject.g = parseInt(hexStr.slice(2, 4),16);
colorObject.b = parseInt(hexStr.slice(4, 6),16);
colorObject.a = parseInt('0xFF',16);
} else if (hexStr.length === 8) {
// Alpha
colorObject.r = parseInt(hexStr.slice(0, 2),16);
colorObject.g = parseInt(hexStr.slice(2, 4),16);
colorObject.b = parseInt(hexStr.slice(4, 6),16);
colorObject.a = parseInt(hexStr.slice(6, 8),16);
} else if (hexStr.length === 3) {
// Shorthand hex color
var rVal = hexStr.slice(0, 1);
var gVal = hexStr.slice(1, 2);
var bVal = hexStr.slice(2, 3);
colorObject.r = parseInt(rVal + rVal,16);
colorObject.g = parseInt(gVal + gVal,16);
colorObject.b = parseInt(bVal + bVal,16);
} else {
throw new Error('Invalid HexString length. Expected either 8, 6, or 3. The actual length was ' + hexStr.length);
}
return colorObject;
}
// Initialize when the Window loads
addEventListener('load', function(){
var brandColor = '#16A085';
var brandColorInactive = '#ECF0F1';
setAppBarColors(brandColor,brandColorInactive);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment