diff --git a/index.html b/index.html
index 79335716..e3b8a8fc 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,9 @@
         sgds-sidenav {
             --sidenav-sticky-top: 1.5rem;
         }
-
+        sgds-accordion {
+            --accordion-active-color: blue;
+        }
         /* sgds-sidenav-item::part(sidenav-btn) {
             color: red;
             border-left-color: red;
diff --git a/src/components/Accordion/sgds-accordion-item.scss b/src/components/Accordion/sgds-accordion-item.scss
index bd4e5f83..4a678cc7 100644
--- a/src/components/Accordion/sgds-accordion-item.scss
+++ b/src/components/Accordion/sgds-accordion-item.scss
@@ -19,6 +19,9 @@
 
 .accordion-button {
   line-height: var(--accordion-item-line-height);
+  &:not(.collapsed){
+    color: var(--accordion-active-color);
+  }
 }
 
 .accordion-button:not(.collapsed) {
diff --git a/src/components/Accordion/sgds-accordion.scss b/src/components/Accordion/sgds-accordion.scss
new file mode 100644
index 00000000..8c506da9
--- /dev/null
+++ b/src/components/Accordion/sgds-accordion.scss
@@ -0,0 +1,4 @@
+:host {
+    /** NEW in 1.2.4 */
+    --accordion-active-color: var(--sgds-primary);
+  }
\ No newline at end of file
diff --git a/src/components/Accordion/sgds-accordion.ts b/src/components/Accordion/sgds-accordion.ts
index d85f926e..fbad0db7 100644
--- a/src/components/Accordion/sgds-accordion.ts
+++ b/src/components/Accordion/sgds-accordion.ts
@@ -3,14 +3,18 @@ import { property, queryAssignedNodes } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import SgdsElement from "../../base/sgds-element";
 import type SgdsAccordionItem from "./sgds-accordion-item";
+import styles from "./sgds-accordion.scss";
 
 /**
  * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
  * @slot default - slot for accordion-item
+ *
+ * @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state
+ *
  */
 
 export class SgdsAccordion extends SgdsElement {
-  static styles = [SgdsElement.styles];
+  static styles = [SgdsElement.styles, styles];
 
   /** Allows multiple accordion items to be opened at the same time */
   @property({ type: Boolean, reflect: true }) allowMultiple = false;