你已经搭好了颜色选择器的基础结构，现在只需要在switchOutputColor函数里补充按钮背景色的控制逻辑就行。这里给你两种符合Angular开发习惯的实现方案，按需选择：

方案一：Angular数据绑定（推荐） #

这种方式更贴合Angular的设计理念，无需直接操作DOM，维护性更强。

第一步：修改按钮HTML，添加ng-style绑定 #

在按钮元素上绑定背景色的变量：

<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" 
        ng-style="{'background-color': selectedBtnColor}"></button>

第二步：更新switchOutputColor函数 #

在函数里新增对selectedBtnColor变量的赋值：

// Update output color.
$scope.updateOutputColor = function (color) {
    ProjectService.editProjectOutputColor($scope.project, color).then(function () {
        $scope.switchOutputColor(color);
    });
};

// Output color switcher.
$scope.switchOutputColor = function (color) {
    // if color is empty or undefined, fallback to original css.
    if ((color === '') || (color === null) || (color === undefined)) {
        color = '';
    }
    $scope.outputFontColor = {'color': color};
    // 新增：设置按钮背景色的绑定变量，空值时恢复默认样式
    $scope.selectedBtnColor = color ? color : '';
    document.styleSheets[document.styleSheets.length - 1].addRule('.output-header i:before', 'color: ' + color);
};

说明：当selectedBtnColor为空时，按钮会自动恢复到btn-primary的默认样式，无需额外处理。

方案二：直接操作DOM（适合特殊场景） #

如果你的项目有特殊需求，需要直接操作DOM元素，可以用这种方式，还能顺便处理按钮文字的对比度问题：

// Update output color.
$scope.updateOutputColor = function (color) {
    ProjectService.editProjectOutputColor($scope.project, color).then(function () {
        $scope.switchOutputColor(color);
    });
};

// Output color switcher.
$scope.switchOutputColor = function (color) {
    // if color is empty or undefined, fallback to original css.
    if ((color === '') || (color === null) || (color === undefined)) {
        color = '';
    }
    $scope.outputFontColor = {'color': color};
    document.styleSheets[document.styleSheets.length - 1].addRule('.output-header i:before', 'color: ' + color);
    
    // 新增：获取按钮元素并修改背景色
    const colorPickerBtn = document.querySelector('.color-picker-dd .dropdown-toggle');
    if (colorPickerBtn) {
        if (color) {
            colorPickerBtn.style.backgroundColor = color;
            // 自动计算文字对比色，避免浅色背景下文字看不清
            colorPickerBtn.style.color = getContrastTextColor(color);
        } else {
            // 恢复默认样式，移除行内样式
            colorPickerBtn.style.backgroundColor = '';
            colorPickerBtn.style.color = '';
        }
    }
};

// 辅助函数：根据背景色计算适合的文字颜色（黑/白）
function getContrastTextColor(hexColor) {
    // 将十六进制颜色转为RGB值
    const r = parseInt(hexColor.slice(1, 3), 16);
    const g = parseInt(hexColor.slice(3, 5), 16);
    const b = parseInt(hexColor.slice(5, 7), 16);
    // 计算亮度值，判断用黑色还是白色文字
    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
    return brightness > 128 ? '#000000' : '#ffffff';
}

说明：辅助函数getContrastTextColor可以保证按钮文字在任何背景色下都清晰可读，提升用户体验。

内容的提问来源于stack exchange，提问作者christopher-haugaard