diff --git a/draftlogs/8130_fix.md b/draftlogs/8130_fix.md
new file mode 100644
index 00000000000..d4c8f110441
--- /dev/null
+++ b/draftlogs/8130_fix.md
@@ -0,0 +1 @@
+ - Fix initial active color for modebar toggle buttons [[#8130](https://github.com/plotly/plotly.js/pull/8130)]
diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index 4a2ce19ffcc..653245679e9 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -274,11 +274,14 @@ proto.updateActiveButton = function(buttonClicked) {
         // Use 'data-toggle' and 'buttonClicked' to toggle buttons
         // that have no one-to-one equivalent in fullLayout
         if(isToggleButton) {
-            if(dataAttr === dataAttrClicked) {
-                var isActive = !button3.classed('active');
+            var isActive = button3.classed('active');
+
+            if(buttonClicked !== undefined && dataAttr === dataAttrClicked) {
+                isActive = !isActive;
                 button3.classed('active', isActive);
-                updateButtonStyle(button, isActive);
             }
+
+            updateButtonStyle(button, isActive);
         } else {
             var val = (dataAttr === null) ?
                 dataAttr :
diff --git a/test/jasmine/tests/modebar_test.js b/test/jasmine/tests/modebar_test.js
index 64ce1f20be1..8c1495c4b74 100644
--- a/test/jasmine/tests/modebar_test.js
+++ b/test/jasmine/tests/modebar_test.js
@@ -1619,6 +1619,37 @@ describe('ModeBar', function() {
             .then(done, done.fail);
         });
 
+        it('applies active color to toggle buttons on initial render', function(done) {
+            Plotly.newPlot(gd, [{
+                type: 'scatterternary',
+                a: [1],
+                b: [2],
+                c: [3]
+            }], {
+                modebar: {
+                    color: colors[0],
+                    activecolor: colors[1]
+                }
+            }, {
+                modeBarButtonsToAdd: ['toggleHover']
+            })
+            .then(function() {
+                button = selectButton(gd._fullLayout._modeBar, 'toggleHover');
+
+                expect(button.node.classList.contains('active')).toBe(true);
+                checkButtonColor(button, colors[1]);
+
+                button.click();
+                expect(button.node.classList.contains('active')).toBe(false);
+                checkButtonColor(button, colors[0]);
+
+                button.click();
+                expect(button.node.classList.contains('active')).toBe(true);
+                checkButtonColor(button, colors[1]);
+            })
+            .then(done, done.fail);
+        });
+
         it('changes hover icon colors', function(done) {
             Plotly.newPlot(gd, [], {
                 modebar: {