How to customize Confluence editor's color palette
Platform notice: Server and Data Center only. This article only applies to Atlassian products on the Server and Data Center platforms.
Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.
*Except Fisheye and Crucible
Please be aware that this material is provided for your information only, and that you use it at your own risk.
Purpose
In some cases, you might like to change or edit the default Confluence editor's text color palette. Be it by limiting to certain colors only, or maybe add additional custom colors. This is how it looks like by default:
There is no simple configuration to change this. But it is still can be done by following this workaround.
Solution
We’re preparing dark theme for an upcoming release of Confluence. The workaround below won’t work when dark theme is released because all colors on a page will default to the existing theme color palettes.
For Confluence 4.x up to Confluence 5.6.x
The following steps were tested against Confluence 4.3.3 and 5.2.3 as the time this document was written. There could be slight changes or difference in other versions.
Edit the following files
For Confluence 4.x<confluence-install>/confluence/WEB-INF/classes/com/atlassian/confluence/setup/atlassian-bundled-plugins.zip/atlassian-editor-plugin-x.x.jar/templates/color-picker.vmFor Confluence 5.x<confluence-install>/confluence/WEB-INF/atlassian-bundled-plugins.zip/atlassian-editor-x.x.jar/templates/color-picker.vm- You might either use a decent archiving tools that can auto update the ZIP/JAR files upon modification (e.g. WinRAR, 7zip in Windows, or GNOME Archiver tool in Linux), or follow How to edit files in Confluence JAR files
Modify these lines:
#set ($colors = ['000000','993300','333300','003300','003366','000080','333399','333333', '800000','FF6600','808000','008000','008080','0000FF','666699','808080', 'FF0000','FF9900','99CC00','339966','33CCCC','3366FF','800080','999999', 'FF00FF','FFCC00','FFFF00','00FF00','00FFFF','00CCFF','993366','C0C0C0', 'FF99CC','FFCC99','FFFF99','CCFFCC','CCFFFF','99CCFF','CC99FF','FFFFFF'])This site http://www.colorpicker.com/ can be handy in getting the hex color code you are looking for.
For example, this change:
#set ($colors = ['000000','993300','333300','003300','003366','000080','333399','333333', '817339','827B60','C9C299','C8B560','ECD672','FFE87C','ECE5B6','FFF8C6'])will change the colour picker to be like this:
- Save it.
- Clear Confluence plugins cache
For Confluence 5.7 onwards The following steps were tested against Confluence 6.15.7. There could be slight changes or difference in other versions.
Edit the following file
For Confluence 5.7 and Above<confluence-install>/confluence/WEB-INF/atlassian-bundled-plugins/atlassian-editor-x.x.jar/templates/color-picker.soyLocate the following block:
{let $colors: [ [ 'hex' : '000000', 'name' : getText('tinymce.colorpicker.black') ], [ 'hex' : '993300', 'name' : getText('tinymce.colorpicker.burntOrange') ], [ 'hex' : '333300', 'name' : getText('tinymce.colorpicker.darkOlive') ], [ 'hex' : '003300', 'name' : getText('tinymce.colorpicker.darkGreen') ], [ 'hex' : '003366', 'name' : getText('tinymce.colorpicker.darkAzure') ], [ 'hex' : '000080', 'name' : getText('tinymce.colorpicker.navyBlue') ], [ 'hex' : '333399', 'name' : getText('tinymce.colorpicker.indigo') ], [ 'hex' : '333333', 'name' : getText('tinymce.colorpicker.veryDarkGray') ], [ 'hex' : '800000', 'name' : getText('tinymce.colorpicker.maroon') ], [ 'hex' : 'FF6600', 'name' : getText('tinymce.colorpicker.orange') ], [ 'hex' : '808000', 'name' : getText('tinymce.colorpicker.olive') ], [ 'hex' : '008000', 'name' : getText('tinymce.colorpicker.green') ], [ 'hex' : '008080', 'name' : getText('tinymce.colorpicker.teal') ], [ 'hex' : '0000FF', 'name' : getText('tinymce.colorpicker.blue') ], [ 'hex' : '666699', 'name' : getText('tinymce.colorpicker.grayishBlue') ], [ 'hex' : '7A869A', 'name' : getText('tinymce.colorpicker.gray') ], [ 'hex' : 'FF0000', 'name' : getText('tinymce.colorpicker.red') ], [ 'hex' : 'FF9900', 'name' : getText('tinymce.colorpicker.amber') ], [ 'hex' : '99CC00', 'name' : getText('tinymce.colorpicker.yellowGreen') ], [ 'hex' : '339966', 'name' : getText('tinymce.colorpicker.seaGreen') ], [ 'hex' : '33CCCC', 'name' : getText('tinymce.colorpicker.turquoise') ], [ 'hex' : '3366FF', 'name' : getText('tinymce.colorpicker.royalBlue') ], [ 'hex' : '800080', 'name' : getText('tinymce.colorpicker.purple') ], [ 'hex' : 'A5ADBA', 'name' : getText('tinymce.colorpicker.mediumGray') ], [ 'hex' : 'FF00FF', 'name' : getText('tinymce.colorpicker.magenta') ], [ 'hex' : 'FFCC00', 'name' : getText('tinymce.colorpicker.gold') ], [ 'hex' : 'FFFF00', 'name' : getText('tinymce.colorpicker.yellow') ], [ 'hex' : '00FF00', 'name' : getText('tinymce.colorpicker.lime') ], [ 'hex' : '00FFFF', 'name' : getText('tinymce.colorpicker.aqua') ], [ 'hex' : '00CCFF', 'name' : getText('tinymce.colorpicker.skyBlue') ], [ 'hex' : '993366', 'name' : getText('tinymce.colorpicker.redViolet') ], [ 'hex' : 'C1C7D0', 'name' : getText('tinymce.colorpicker.lightGray') ], [ 'hex' : 'FF99CC', 'name' : getText('tinymce.colorpicker.pink') ], [ 'hex' : 'FFCC99', 'name' : getText('tinymce.colorpicker.peach') ], [ 'hex' : 'FFFF99', 'name' : getText('tinymce.colorpicker.lightYellow') ], [ 'hex' : 'CCFFCC', 'name' : getText('tinymce.colorpicker.paleGreen') ], [ 'hex' : 'CCFFFF', 'name' : getText('tinymce.colorpicker.paleCyan') ], [ 'hex' : '99CCFF', 'name' : getText('tinymce.colorpicker.lightSkyBlue') ], [ 'hex' : 'CC99FF', 'name' : getText('tinymce.colorpicker.plum') ], [ 'hex' : 'FFFFFF', 'name' : getText('tinymce.colorpicker.white') ] ] /}You can add and remove colours from the above array. For example if you would like to add skyBlue, just add the following into the above array.
[ 'hex' : '0770e3', 'name' : getText('tinymce.colorpicker.skyBlue') ]Please note that not all colours has their labels defined in
tinymce.colorpicker. As such, to ensure that the colours would display with the correct labels you can instead add the colour into the array with this format[ 'hex' : '0770e3', 'name' : 'skyBlue']
- Save it.