From ec86282403ea34704d0faab7b04ca033bd3a0650 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 6 Feb 2024 11:43:51 -0800
Subject: Options for selecting dark theme, fix some white flashes when in dark
 mode (#2722)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add dark theme selection to settings/schema

* use `useThemePrefs` where needed

* adjust theme providers to support various themes

* update storybook

* handle web themes

* better themeing for web

* dont show dark theme prefs when color mode is light

* drop the inverted text change on oled theme

* get the color mode inside of `useColorModeTheme`

* use `ThemeName` type everywhere

* typo

* use dim/dark instead of dark/oled

* prevent any fickers on web

* fix styles

* use `dim` for dark default

* more cleanup

* 🤔

* set system background color

* ts
---
 src/lib/ThemeContext.tsx | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

(limited to 'src/lib/ThemeContext.tsx')

diff --git a/src/lib/ThemeContext.tsx b/src/lib/ThemeContext.tsx
index 38bd199cb..63e2beeb1 100644
--- a/src/lib/ThemeContext.tsx
+++ b/src/lib/ThemeContext.tsx
@@ -1,11 +1,7 @@
 import React, {ReactNode, createContext, useContext} from 'react'
-import {
-  TextStyle,
-  useColorScheme,
-  ViewStyle,
-  ColorSchemeName,
-} from 'react-native'
-import {darkTheme, defaultTheme} from './themes'
+import {TextStyle, ViewStyle} from 'react-native'
+import {darkTheme, defaultTheme, dimTheme} from './themes'
+import {ThemeName} from '#/alf/themes'
 
 export type ColorScheme = 'light' | 'dark'
 
@@ -84,23 +80,31 @@ export interface Theme {
 
 export interface ThemeProviderProps {
   children?: ReactNode
-  theme?: 'light' | 'dark' | 'system'
+  theme: ThemeName
 }
 
 export const ThemeContext = createContext<Theme>(defaultTheme)
 
 export const useTheme = () => useContext(ThemeContext)
 
-function getTheme(theme: ColorSchemeName) {
-  return theme === 'dark' ? darkTheme : defaultTheme
+function getTheme(theme: ThemeName) {
+  switch (theme) {
+    case 'light':
+      return defaultTheme
+    case 'dim':
+      return dimTheme
+    case 'dark':
+      return darkTheme
+    default:
+      return defaultTheme
+  }
 }
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   theme,
   children,
 }) => {
-  const colorScheme = useColorScheme()
-  const themeValue = getTheme(theme === 'system' ? colorScheme : theme)
+  const themeValue = getTheme(theme)
 
   return (
     <ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>
-- 
cgit 1.4.1

