diff --git a/static/usage/v7/input/theming/css-properties/angular/example_component_css.md b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md
index 3aa7fddda86..4885a193f87 100644
--- a/static/usage/v7/input/theming/css-properties/angular/example_component_css.md
+++ b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md
@@ -10,9 +10,4 @@ ion-input.custom {
   --padding-start: 10px;
   --padding-top: 10px;
 }
-
-ion-input.custom .helper-text,
-ion-input.custom .counter {
-  color: var(--ion-color-step-700, #373737);
-}
 ```
diff --git a/static/usage/v7/input/theming/css-properties/angular/global_css.md b/static/usage/v7/input/theming/css-properties/angular/global_css.md
new file mode 100644
index 00000000000..ba3ec022284
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/angular/global_css.md
@@ -0,0 +1,14 @@
+```css
+/**
+ * Since we are styling elements inside of ion-input
+ * we need to move this CSS to a global stylesheet. Otherwise,
+ * Angular components with encapsulation enabled will add
+ * scoped style attributes to these selectors.
+ */
+ion-input.custom.ios .input-bottom .helper-text,
+ion-input.custom.ios .input-bottom .counter,
+ion-input.custom.md .input-bottom .helper-text,
+ion-input.custom.md .input-bottom .counter {
+  color: var(--ion-color-primary);
+}
+```
diff --git a/static/usage/v7/input/theming/css-properties/demo.html b/static/usage/v7/input/theming/css-properties/demo.html
index 9acf641e5ff..8a6088ee7a3 100644
--- a/static/usage/v7/input/theming/css-properties/demo.html
+++ b/static/usage/v7/input/theming/css-properties/demo.html
@@ -27,9 +27,11 @@
         --padding-top: 10px;
       }
 
-      ion-input.custom .helper-text,
-      ion-input.custom .counter {
-        color: var(--ion-color-step-700, #373737);
+      ion-input.custom.ios .input-bottom .helper-text,
+      ion-input.custom.ios .input-bottom .counter,
+      ion-input.custom.md .input-bottom .helper-text,
+      ion-input.custom.md .input-bottom .counter {
+        color: var(--ion-color-primary);
       }
     </style>
   </head>
diff --git a/static/usage/v7/input/theming/css-properties/index.md b/static/usage/v7/input/theming/css-properties/index.md
index db7ffd5f993..b87bfe5194c 100644
--- a/static/usage/v7/input/theming/css-properties/index.md
+++ b/static/usage/v7/input/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_global_css from './angular/global_css.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/global.css': angular_global_css,
       },
     },
   }}
diff --git a/static/usage/v7/input/theming/css-properties/javascript.md b/static/usage/v7/input/theming/css-properties/javascript.md
index 168adce6d2d..5f81aae2da0 100644
--- a/static/usage/v7/input/theming/css-properties/javascript.md
+++ b/static/usage/v7/input/theming/css-properties/javascript.md
@@ -21,9 +21,11 @@
     --padding-top: 10px;
   }
 
-  ion-input.custom .helper-text,
-  ion-input.custom .counter {
-    color: var(--ion-color-step-700, #373737);
+  ion-input.custom.ios .input-bottom .helper-text,
+  ion-input.custom.ios .input-bottom .counter,
+  ion-input.custom.md .input-bottom .helper-text,
+  ion-input.custom.md .input-bottom .counter {
+    color: var(--ion-color-primary);
   }
 </style>
 ```
diff --git a/static/usage/v7/input/theming/css-properties/react/main_css.md b/static/usage/v7/input/theming/css-properties/react/main_css.md
index 45406a59340..6dd25be2d40 100644
--- a/static/usage/v7/input/theming/css-properties/react/main_css.md
+++ b/static/usage/v7/input/theming/css-properties/react/main_css.md
@@ -11,8 +11,10 @@ ion-input.custom {
   --padding-top: 10px;
 }
 
-ion-input.custom .helper-text,
-ion-input.custom .counter {
-  color: #373737;
+ion-input.custom.ios .input-bottom .helper-text,
+ion-input.custom.ios .input-bottom .counter,
+ion-input.custom.md .input-bottom .helper-text,
+ion-input.custom.md .input-bottom .counter {
+  color: var(--ion-color-primary);
 }
 ```
diff --git a/static/usage/v7/input/theming/css-properties/vue.md b/static/usage/v7/input/theming/css-properties/vue.md
index 898bc493e16..77ab74eeeab 100644
--- a/static/usage/v7/input/theming/css-properties/vue.md
+++ b/static/usage/v7/input/theming/css-properties/vue.md
@@ -32,9 +32,11 @@
     --padding-top: 10px;
   }
 
-  ion-input.custom .helper-text,
-  ion-input.custom .counter {
-    color: var(--ion-color-step-700, #373737);
+  ion-input.custom.ios .input-bottom .helper-text,
+  ion-input.custom.ios .input-bottom .counter,
+  ion-input.custom.md .input-bottom .helper-text,
+  ion-input.custom.md .input-bottom .counter {
+    color: var(--ion-color-primary);
   }
 </style>
 ```
diff --git a/static/usage/v7/textarea/theming/angular/example_component_css.md b/static/usage/v7/textarea/theming/angular/example_component_css.md
index dae0d52310e..37a2f874cdc 100644
--- a/static/usage/v7/textarea/theming/angular/example_component_css.md
+++ b/static/usage/v7/textarea/theming/angular/example_component_css.md
@@ -7,9 +7,4 @@ ion-textarea.custom {
   --placeholder-color: #ddd;
   --placeholder-opacity: 0.8;
 }
-
-ion-textarea.custom .helper-text,
-ion-textarea.custom .counter {
-  color: #373737;
-}
 ```
diff --git a/static/usage/v7/textarea/theming/angular/global_css.md b/static/usage/v7/textarea/theming/angular/global_css.md
new file mode 100644
index 00000000000..c9c9c107cc6
--- /dev/null
+++ b/static/usage/v7/textarea/theming/angular/global_css.md
@@ -0,0 +1,14 @@
+```css
+/**
+ * Since we are styling elements inside of ion-textarea
+ * we need to move this CSS to a global stylesheet. Otherwise,
+ * Angular components with encapsulation enabled will add
+ * scoped style attributes to these selectors.
+ */
+ion-textarea.custom.ios .textarea-bottom .helper-text,
+ion-textarea.custom.ios .textarea-bottom .counter,
+ion-textarea.custom.md .textarea-bottom .helper-text,
+ion-textarea.custom.md .textarea-bottom .counter {
+  color: var(--ion-color-primary);
+}
+```
diff --git a/static/usage/v7/textarea/theming/demo.html b/static/usage/v7/textarea/theming/demo.html
index 4a0f043efb4..4cab52e4e47 100644
--- a/static/usage/v7/textarea/theming/demo.html
+++ b/static/usage/v7/textarea/theming/demo.html
@@ -22,9 +22,11 @@
         --placeholder-opacity: 0.8;
       }
 
-      ion-textarea.custom .helper-text,
-      ion-textarea.custom .counter {
-        color: #373737;
+      ion-textarea.custom.ios .textarea-bottom .helper-text,
+      ion-textarea.custom.ios .textarea-bottom .counter,
+      ion-textarea.custom.md .textarea-bottom .helper-text,
+      ion-textarea.custom.md .textarea-bottom .counter {
+        color: var(--ion-color-primary);
       }
     </style>
   </head>
diff --git a/static/usage/v7/textarea/theming/index.md b/static/usage/v7/textarea/theming/index.md
index 9042fb29fa4..3a50362dcee 100644
--- a/static/usage/v7/textarea/theming/index.md
+++ b/static/usage/v7/textarea/theming/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_global_css from './angular/global_css.md';
 
 <Playground
   version="7"
@@ -26,6 +27,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
       },
     },
   }}
diff --git a/static/usage/v7/textarea/theming/javascript.md b/static/usage/v7/textarea/theming/javascript.md
index c654ae883a9..7e2da7069e1 100644
--- a/static/usage/v7/textarea/theming/javascript.md
+++ b/static/usage/v7/textarea/theming/javascript.md
@@ -18,9 +18,11 @@
     --placeholder-opacity: 0.8;
   }
 
-  ion-textarea.custom .helper-text,
-  ion-textarea.custom .counter {
-    color: #373737;
+  ion-textarea.custom.ios .textarea-bottom .helper-text,
+  ion-textarea.custom.ios .textarea-bottom .counter,
+  ion-textarea.custom.md .textarea-bottom .helper-text,
+  ion-textarea.custom.md .textarea-bottom .counter {
+    color: var(--ion-color-primary);
   }
 </style>
 ```
diff --git a/static/usage/v7/textarea/theming/react/main_css.md b/static/usage/v7/textarea/theming/react/main_css.md
index dae0d52310e..68e9b031149 100644
--- a/static/usage/v7/textarea/theming/react/main_css.md
+++ b/static/usage/v7/textarea/theming/react/main_css.md
@@ -8,8 +8,10 @@ ion-textarea.custom {
   --placeholder-opacity: 0.8;
 }
 
-ion-textarea.custom .helper-text,
-ion-textarea.custom .counter {
-  color: #373737;
+ion-textarea.custom.ios .textarea-bottom .helper-text,
+ion-textarea.custom.ios .textarea-bottom .counter,
+ion-textarea.custom.md .textarea-bottom .helper-text,
+ion-textarea.custom.md .textarea-bottom .counter {
+  color: var(--ion-color-primary);
 }
 ```
diff --git a/static/usage/v7/textarea/theming/vue.md b/static/usage/v7/textarea/theming/vue.md
index c7cef62ba4a..8af2efe5c45 100644
--- a/static/usage/v7/textarea/theming/vue.md
+++ b/static/usage/v7/textarea/theming/vue.md
@@ -9,9 +9,11 @@
     --placeholder-opacity: 0.8;
   }
 
-  ion-textarea.custom .helper-text,
-  ion-textarea.custom .counter {
-    color: #373737;
+  ion-textarea.custom.ios .textarea-bottom .helper-text,
+  ion-textarea.custom.ios .textarea-bottom .counter,
+  ion-textarea.custom.md .textarea-bottom .helper-text,
+  ion-textarea.custom.md .textarea-bottom .counter {
+    color: var(--ion-color-primary);
   }
 </style>