Integrate new Theme Context into project

jastornig commented

2023-12-18 19:02:17 +01:00

(Migrated from git-ainf.aau.at)

Wie ihr vielleicht mitbekommen habt, gibt es einen neuen weg, das Theming in der App zu ändern. Damit das funktioniert und auch global übernommen wird, musste ein neuer Context eingefügt werden. Bisher ist dieser Context nur in der Settings Page integriert. Funktionieren sollte er allerdings überall. Muss halt nurmehr integriert werden.

Was ist also zu tun?

In sämtlichen files, die useThemeColor(color: string) verwenden, muss die alte hook durch die neue ersetzt werden:

//alt
import { useThemeColor } from '../hooks/useThemeColor';

//neu
import { useTheme } from '../../contexts/ThemeContext'

ACHTUNG!!
Es gibt eine weitere useTheme hook von "@react-navigation/native"; Das ist die Falsche.

Die neue Hook stellt verschiedene Werte bzw Funktionalitäten bereit:

interface ThemeProps {
  isSystemTheme?: boolean
  theme: "light" | "dark";
  colors: typeof themeColors.light & typeof themeColors.dark;
  applySystemTheme?: () => void;
  applyTheme?: (theme: "light" | "dark") => void;
}

relevant ist für diesen Task aber nur colors. colors ist ein Objekt, das alle spezifizierten Farben des aktuellen Themes beeinhaltet. Man kann folgendermaßen darauf zugreifen:

import { useTheme } from '../../contexts/ThemeContext' //import path natürlich anpassen

//Signatur des Components, der die Farben verwenden soll
export function myComponent(){
  const {colors} = useTheme();

  return (
   <Text style={{color: colors.primaryText}}>Mein Theme Text</Text>
  )
}

Wurde der Import ausgetauscht, und das die colors variable ausgelesen, sind dann nur mehr die Entsprechenden useThemeColor aufrufe zu ersetzten.

In login.tsx würde das dann so aussehen:

//...
//import { useThemeColor } from '../hooks/useThemeColor';
import { useTheme } from "./contexts/ThemeContext";
//...

export default function login() {
  //...
  //const backgroundColor = useThemeColor("backgroundColor")
  //const textColor = useThemeColor("primaryText");
  //const elementDefaultColor = useThemeColor("elementDefaultColor")
  const {colors} = useTheme();
  const backgroundColor = colors.backgroundColor
  const textColor = colors.primaryText
  const elementDefaultColor = colors.elementDefaultColor

  //...

Referenzen sind in app/home/userSettings.tsx und components/home/userSettings/Setting.tsx zu finden.

Falls ihr Fragen habt fragt

Wie ihr vielleicht mitbekommen habt, gibt es einen neuen weg, das Theming in der App zu ändern. Damit das funktioniert und auch global übernommen wird, musste ein neuer Context eingefügt werden. Bisher ist dieser Context nur in der Settings Page integriert. Funktionieren sollte er allerdings überall. Muss halt nurmehr integriert werden. **Was ist also zu tun?** In sämtlichen files, die useThemeColor(color: string) verwenden, muss die alte hook durch die neue ersetzt werden: ```ts //alt import { useThemeColor } from '../hooks/useThemeColor'; //neu import { useTheme } from '../../contexts/ThemeContext' ``` **ACHTUNG!!** Es gibt eine weitere useTheme hook von `"@react-navigation/native";` Das ist die Falsche. Die neue Hook stellt verschiedene Werte bzw Funktionalitäten bereit: ```ts interface ThemeProps { isSystemTheme?: boolean theme: "light" | "dark"; colors: typeof themeColors.light & typeof themeColors.dark; applySystemTheme?: () => void; applyTheme?: (theme: "light" | "dark") => void; } ``` relevant ist für diesen Task aber nur `colors`. `colors` ist ein Objekt, das alle spezifizierten Farben des aktuellen Themes beeinhaltet. Man kann folgendermaßen darauf zugreifen: ```tsx import { useTheme } from '../../contexts/ThemeContext' //import path natürlich anpassen //Signatur des Components, der die Farben verwenden soll export function myComponent(){ const {colors} = useTheme(); return ( <Text style={{color: colors.primaryText}}>Mein Theme Text</Text> ) } ``` Wurde der Import ausgetauscht, und das die `colors` variable ausgelesen, sind dann nur mehr die Entsprechenden useThemeColor aufrufe zu ersetzten. In login.tsx würde das dann so aussehen: ```tsx //... //import { useThemeColor } from '../hooks/useThemeColor'; import { useTheme } from "./contexts/ThemeContext"; //... export default function login() { //... //const backgroundColor = useThemeColor("backgroundColor") //const textColor = useThemeColor("primaryText"); //const elementDefaultColor = useThemeColor("elementDefaultColor") const {colors} = useTheme(); const backgroundColor = colors.backgroundColor const textColor = colors.primaryText const elementDefaultColor = colors.elementDefaultColor //... ``` Referenzen sind in app/home/userSettings.tsx und components/home/userSettings/Setting.tsx zu finden. Falls ihr Fragen habt fragt

jastornig commented

2023-12-18 19:02:46 +01:00

(Migrated from git-ainf.aau.at)

@carolinai wäre das was für dich?

jastornig commented

2023-12-30 14:04:47 +01:00

(Migrated from git-ainf.aau.at)

assigned to @jastornig

jastornig commented

2023-12-30 14:05:31 +01:00

(Migrated from git-ainf.aau.at)

created branch 44-integrate-new-theme-context-into-project to address this issue

created branch [`44-integrate-new-theme-context-into-project`](/thschleicher/interaktive-systeme/-/compare/main...44-integrate-new-theme-context-into-project) to address this issue

jastornig commented

2023-12-30 14:05:48 +01:00

(Migrated from git-ainf.aau.at)

mentioned in merge request !32