apply scss

apps/app/src/components/Me/ColorModeSettings.module.scss

@@ -0,0 +1,15 @@
+@use '@growi/core/scss/bootstrap/init' as *;
+
+.color-settings :global {
+  .btn {
+    font-weight: bold;
+    color: var(--color-global);
+    background-color: transparent;
+    border-width: 3px;
+  }
+
+  .btn-outline-secondary {
+    border-color: $gray-400;
+  }
+}
+

apps/app/src/components/Me/ColorModeSettings.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from 'react-i18next';
 
 import { Themes, useNextThemes } from '~/stores/use-next-themes';
 
+import styles from './ColorModeSettings.module.scss';
+
 export const ColorModeSettings = (): JSX.Element => {
   const { t } = useTranslation();
 
@@ -14,7 +16,7 @@ export const ColorModeSettings = (): JSX.Element => {
   }, [theme]);
 
   return (
-    <>
+    <div className={`color-settings ${styles['color-settings']}`}>
       <h2 className="border-bottom mb-4">{t('color_mode_settings.settings')}</h2>
 
       <div className="offset-md-3">
@@ -23,7 +25,7 @@ export const ColorModeSettings = (): JSX.Element => {
             type="button"
             onClick={() => { setTheme(Themes.LIGHT) }}
             // eslint-disable-next-line max-len
-            className={`btn py-2 px-4 me-3 d-flex align-items-center justify-content-center ${isActive(Themes.LIGHT) ? 'btn-outline-primary' : 'btn-outline-secondary'}`}
+            className={`btn py-2 px-4 me-4 d-flex align-items-center justify-content-center ${isActive(Themes.LIGHT) ? 'btn-outline-primary' : 'btn-outline-secondary'}`}
           >
             <span className="material-symbols-outlined fs-5 me-1">light_mode</span>
             <span>{t('color_mode_settings.light')}</span>
@@ -33,7 +35,7 @@ export const ColorModeSettings = (): JSX.Element => {
             type="button"
             onClick={() => { setTheme(Themes.DARK) }}
             // eslint-disable-next-line max-len
-            className={`btn py-2 px-4 me-3 d-flex align-items-center justify-content-center ${isActive(Themes.DARK) ? 'btn-outline-primary' : 'btn-outline-secondary'}`}
+            className={`btn py-2 px-4 me-4 d-flex align-items-center justify-content-center ${isActive(Themes.DARK) ? 'btn-outline-primary' : 'btn-outline-secondary'}`}
           >
             <span className="material-symbols-outlined fs-5 me-1">dark_mode</span>
             <span>{t('color_mode_settings.dark')}</span>
@@ -55,6 +57,6 @@ export const ColorModeSettings = (): JSX.Element => {
           <span dangerouslySetInnerHTML={{ __html: t('color_mode_settings.description') }} />
         </div>
       </div>
-    </>
+    </div>
   );
 };