fix: new radio buttons, fix background bugs etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/modals/main/settings/sections/Appearance.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
+import Radio from '../Radio';
 
 import { toast } from 'react-toastify';
 
@@ -55,11 +56,24 @@ export default class AppearanceSettings extends React.PureComponent {
   render() {
     const { appearance } = this.language.sections;
 
+    let themeOptions = [
+      {
+        'name': 'Auto',
+        'value': 'auto'
+      },
+      {
+        'name': 'Light',
+        'value': 'light'
+      }, {
+        'name': 'Dark',
+        'value': 'dark'
+      }
+    ]
+
     return (
       <div>
         <h2>{appearance.title}</h2>
-        <Checkbox name='darkTheme' text={appearance.dark_theme} />
-        <Checkbox name='brightnessTime' text={appearance.night_mode} />
+        <Radio name='theme' title='Theme' options={themeOptions} />
 
         <h3>{appearance.navbar.title}</h3>
         <Checkbox name='notesEnabled' text={appearance.navbar.notes} />
@@ -70,7 +84,7 @@ export default class AppearanceSettings extends React.PureComponent {
           <p>{appearance.font.custom} <span className='modalLink' onClick={() => this.resetItem('font')}>{this.language.buttons.reset}</span></p>
           <input type='text' value={this.state.font} onChange={(e) => this.setState({ font: e.target.value })}></input>
         </ul>
-        <br />
+        <br/>
         <Dropdown
             label='Font Weight'
             name='fontweight'