Use mx_SettingsTab_subsectionText for the text under the top header of appearance user settings tab (#8822)

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss

@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 .mx_AppearanceUserSettingsTab {
-    > .mx_SettingsTab_SubHeading {
+    .mx_SettingsTab_subsectionText {
         margin-block: $spacing-12 $spacing-32;
+        color: $primary-content; // Same as mx_SettingsTab
     }
 
     .mx_Field {

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -143,7 +143,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         return (
             <div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{ _t("Customise your appearance") }</div>
-                <div className="mx_SettingsTab_SubHeading">
+                <div className="mx_SettingsTab_subsectionText">
                     { _t("Appearance Settings only affect this %(brand)s session.", { brand }) }
                 </div>
                 <ThemeChoicePanel />