fix: don't show theme picker if not logged in (#967)

Also tweak some of the styles and layout in the theme picker itself

src/routes/_components/settings/instance/ThemeSettings.html

@@ -2,11 +2,9 @@
   <div class="theme-groups">
     {#each themeGroups as themeGroup}
     <div class="theme-group">
-      {#if themeGroup.dark}
+      <h3>
-        <h2>Dark Background</h2>
+        {themeGroup.dark ? 'Dark background' : 'Light background' }
-      {:else}
+      </h3>
-        <h2>Light Background</h2>
-      {/if}
       {#each themeGroup.themes as theme}
       <div class="theme-picker">
         <input type="radio" id="choice-theme-{theme.name}"
@@ -65,10 +63,18 @@
     border: 2px solid #dadada;
   }
 
+  h3 {
+    font-size: 1.4em;
+  }
+
   @media (max-width: 479px) {
     .theme-groups {
       grid-template-columns: 1fr;
     }
+
+    h3 {
+      margin-top: 0.5em;
+    }
   }
 </style>
 <script>

src/routes/_pages/settings/general.html

@@ -63,8 +63,10 @@
     </div>
   </form>
 
-  <h2>{themeTitle}</h2>
+  {#if $isUserLoggedIn }
-  <ThemeSettings instanceName={$currentInstance} />
+    <h2>{themeTitle}</h2>
+    <ThemeSettings instanceName={$currentInstance} />
+  {/if}
 </SettingsLayout>
 <style>
   .ui-settings {