chore: replace theme button with settings

I plan to add more user settings so theme options should be inside
settings.

2 files changed, 5 insertions, 1 deletions

diff --git a/src/components/ThemeToggle/ThemeToggle.module.scss b/src/components/ThemeToggle/ThemeToggle.module.scss
index c780b96..36c91f7 100644
--- a/src/components/ThemeToggle/ThemeToggle.module.scss
+++ b/src/components/ThemeToggle/ThemeToggle.module.scss
@@ -9,6 +9,10 @@
   align-items: center;
 }
 
+.title {
+  margin-right: var(--spacing-xs);
+}
+
 .toggle {
   display: inline-flex;
   align-items: center;
diff --git a/src/components/ThemeToggle/ThemeToggle.tsx b/src/components/ThemeToggle/ThemeToggle.tsx
index 015201b..4b93ac9 100644
--- a/src/components/ThemeToggle/ThemeToggle.tsx
+++ b/src/components/ThemeToggle/ThemeToggle.tsx
@@ -22,7 +22,7 @@ const ThemeToggle = () => {
         onChange={() => setIsDarkTheme(!isDarkTheme)}
       />
       <label htmlFor="dark-theme" className={styles.label}>
-        <span className="screen-reader-text">{t`Activate dark theme`}</span>
+        <span className={styles.title}>{t`Theme:`}</span>
         <SunIcon />
         <span className={styles.toggle}></span>
         <MoonIcon />