Use blue theme by default (rename to defaultTheme)

webapp/i18n/en.json

@@ -47,6 +47,7 @@
   "Sidebar.add-board": "+ Add Board",
   "Sidebar.add-template": "+ New template",
   "Sidebar.dark-theme": "Dark theme",
+  "Sidebar.default-theme": "Default theme",
   "Sidebar.delete-board": "Delete board",
   "Sidebar.delete-template": "Delete",
   "Sidebar.duplicate-board": "Duplicate board",
@@ -56,7 +57,6 @@
   "Sidebar.export-archive": "Export archive",
   "Sidebar.import-archive": "Import archive",
   "Sidebar.light-theme": "Light theme",
-  "Sidebar.mattermost-theme": "Mattermost theme",
   "Sidebar.no-views-in-board": "No pages inside",
   "Sidebar.select-a-template": "Select a template",
   "Sidebar.set-language": "Set language",

webapp/i18n/es.json

@@ -35,7 +35,6 @@
   "Sidebar.export-archive": "Exportar Archivo",
   "Sidebar.import-archive": "Importar Archivo",
   "Sidebar.light-theme": "Apariencia Clara",
-  "Sidebar.mattermost-theme": "Aparencia Mattermost",
   "Sidebar.no-views-in-board": "No hay páginas dentro",
   "Sidebar.set-language": "Establecer idioma",
   "Sidebar.set-theme": "Establecer apariencia",

webapp/src/components/sidebar.tsx

@@ -7,7 +7,7 @@ import {Archiver} from '../archiver'
 import {Board, MutableBoard} from '../blocks/board'
 import {BoardView, MutableBoardView} from '../blocks/boardView'
 import mutator from '../mutator'
-import {darkTheme, lightTheme, mattermostTheme, setTheme} from '../theme'
+import {defaultTheme, darkTheme, lightTheme, setTheme} from '../theme'
 import {WorkspaceTree} from '../viewModel/workspaceTree'
 import Button from '../widgets/buttons/button'
 import IconButton from '../widgets/buttons/iconButton'
@@ -302,6 +302,11 @@ class Sidebar extends React.Component<Props, State> {
                             name={intl.formatMessage({id: 'Sidebar.set-theme', defaultMessage: 'Set theme'})}
                             position='top'
                         >
+                            <Menu.Text
+                                id='default-theme'
+                                name={intl.formatMessage({id: 'Sidebar.default-theme', defaultMessage: 'Default theme'})}
+                                onClick={async () => setTheme(defaultTheme)}
+                            />
                             <Menu.Text
                                 id='dark-theme'
                                 name={intl.formatMessage({id: 'Sidebar.dark-theme', defaultMessage: 'Dark theme'})}
@@ -312,11 +317,6 @@ class Sidebar extends React.Component<Props, State> {
                                 name={intl.formatMessage({id: 'Sidebar.light-theme', defaultMessage: 'Light theme'})}
                                 onClick={async () => setTheme(lightTheme)}
                             />
-                            <Menu.Text
-                                id='mattermost-theme'
-                                name={intl.formatMessage({id: 'Sidebar.mattermost-theme', defaultMessage: 'Mattermost theme'})}
-                                onClick={async () => setTheme(mattermostTheme)}
-                            />
                         </Menu.SubMenu>
                     </Menu>
                 </MenuWrapper>

webapp/src/theme.ts

@@ -10,6 +10,15 @@ export type Theme = {
     sidebarFg: string
 }
 
+export const defaultTheme = {
+    mainBg: '255, 255, 255',
+    mainFg: '55, 53, 47',
+    buttonBg: '22, 109, 224',
+    buttonFg: '255, 255, 255',
+    sidebarBg: '20, 93, 191',
+    sidebarFg: '255, 255, 255',
+}
+
 export const darkTheme = {
     mainBg: '55, 53, 47',
     mainFg: '200, 200, 200',
@@ -28,15 +37,6 @@ export const lightTheme = {
     sidebarFg: '55, 53, 47',
 }
 
-export const mattermostTheme = {
-    mainBg: '255, 255, 255',
-    mainFg: '55, 53, 47',
-    buttonBg: '22, 109, 224',
-    buttonFg: '255, 255, 255',
-    sidebarBg: '20, 93, 191',
-    sidebarFg: '255, 255, 255',
-}
-
 export function setTheme(theme: Theme): void {
     document.documentElement.style.setProperty('--main-bg', theme.mainBg)
     document.documentElement.style.setProperty('--main-fg', theme.mainFg)
@@ -54,9 +54,9 @@ export function loadTheme(): void {
             const theme = JSON.parse(themeStr)
             setTheme(theme)
         } catch (e) {
-            setTheme(lightTheme)
+            setTheme(defaultTheme)
         }
     } else {
-        setTheme(lightTheme)
+        setTheme(defaultTheme)
     }
 }