diff --git a/src/style/_theme.scss b/src/style/_theme.scss
new file mode 100644
index 00000000..c01f3551
--- /dev/null
+++ b/src/style/_theme.scss
@@ -0,0 +1,4 @@
+$ans-color: #fcce02 !default;
+$dark: #343434 !default;
+$primary: #015999 !default;
+$info: #01998f !default;
\ No newline at end of file
diff --git a/src/style/custom.scss b/src/style/custom.scss
index 66e97aec..fe7749f6 100644
--- a/src/style/custom.scss
+++ b/src/style/custom.scss
@@ -1,10 +1,12 @@
+@use "sass:color";
+@use "theme";
+
 /* custom colors */
 $theme-colors: (
-  "ans-color": #fcce02,
-  "dark": #343434,
-  "primary": #015999,
-  "primary-05": rgba(1, 89, 153, 0.5), 
-  "info": #01998f,
+  "ans-color": theme.$ans-color,
+  "dark": theme.$dark,
+  "primary": theme.$primary,
+  "info": theme.$info,
 );
 
 ol.breadcrumb {
@@ -360,20 +362,21 @@ $breadcrumb-bg: transparent;
 }
 
 .annotation-card-container.new-annotation {
-  border: 1px solid theme-color("primary-05") !important;
+  border: 1px solid color.adjust(theme-color("primary"), $alpha: -0.5) !important;
 }
 
-.annotation-card-container.new-annotation .line1, .annotation-card-container.new-annotation .line2 {
-  background-color: theme-color("primary-05") !important;
+.annotation-card-container.new-annotation .line1,
+.annotation-card-container.new-annotation .line2 {
+  background-color: color.adjust(theme-color("primary"), $alpha: -0.5) !important;
   z-index: 3;
 }
 
 .annotation-card-container.new-annotation .annotation-pointer-background-left {
-  border-left-color: theme-color("primary-05") !important;
+  border-left-color: color.adjust(theme-color("primary"), $alpha: -0.5) !important;
 }
 
 .annotation-card-container.new-annotation .annotation-pointer-background-right {
-  border-right-color: theme-color("primary-05") !important;
+  border-right-color: color.adjust(theme-color("primary"), $alpha: -0.5) !important;
 }
 
 .annotation-body textarea:focus {