Preferences: Add theme preference to match system theme (#61986)

* user essentials mob! 🔱

lastFile:pkg/api/preferences.go

* user essentials mob! 🔱

* user essentials mob! 🔱

lastFile:packages/grafana-data/src/types/config.ts

* user essentials mob! 🔱

lastFile:public/app/core/services/echo/utils.test.ts

* user essentials mob! 🔱

* user essentials mob! 🔱

lastFile:public/views/index-template.html

* user essentials mob! 🔱

* Restore currentUser.lightTheme for backwards compat

* fix types

* Apply suggestions from code review

Co-authored-by: Christopher Moyer <35463610+chri2547@users.noreply.github.com>

* cleanup

* cleanup

---------

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
Co-authored-by: Joao Silva <joao.silva@grafana.com>
Co-authored-by: Christopher Moyer <35463610+chri2547@users.noreply.github.com>

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -71,6 +71,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
       { value: '', label: t('shared-preferences.theme.default-label', 'Default') },
       { value: 'dark', label: t('shared-preferences.theme.dark-label', 'Dark') },
       { value: 'light', label: t('shared-preferences.theme.light-label', 'Light') },
+      { value: 'system', label: t('shared-preferences.theme.system-label', 'System') },
     ];
   }
 

public/app/core/services/context_srv.ts

@@ -7,14 +7,14 @@ import { CurrentUserInternal } from 'app/types/config';
 
 import config from '../../core/config';
 
-export class User implements CurrentUserInternal {
+export class User implements Omit<CurrentUserInternal, 'lightTheme'> {
   isSignedIn: boolean;
   id: number;
   login: string;
   email: string;
   name: string;
   externalUserId: string;
-  lightTheme: boolean;
+  theme: string;
   orgCount: number;
   orgId: number;
   orgName: string;
@@ -43,7 +43,7 @@ export class User implements CurrentUserInternal {
     this.timezone = '';
     this.fiscalYearStartMonth = 0;
     this.helpFlags1 = 0;
-    this.lightTheme = false;
+    this.theme = 'dark';
     this.hasEditPermissionInFolders = false;
     this.email = '';
     this.name = '';

public/app/core/services/echo/utils.test.ts

@@ -8,7 +8,8 @@ const baseUser: CurrentUserDTO = {
   login: 'myUsername',
   email: 'email@example.com',
   name: 'My Name',
-  lightTheme: false,
+  theme: 'dark',
+  lightTheme: false, // deprecated
   orgCount: 1,
   orgId: 1,
   orgName: 'Main Org.',