Add (partial) dark theme

software-mansion · May 28, 2024 · 45add19 · 45add19
1 parent f1dfe3e
commit 45add19
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 17 deletions.
diff --git a/docs/static/examples/BottomSheet.js b/docs/static/examples/BottomSheet.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useColorScheme } from '@mui/material';
 import {
   Pressable,
   SafeAreaView,
@@ -16,13 +17,15 @@ import Animated, {
 } from 'react-native-reanimated';
 
 function BottomSheet({ isOpen, toggleSheet, duration = 500, children }) {
+  const { colorScheme } = useColorScheme();
   const height = useSharedValue(0);
   const progress = useDerivedValue(() =>
     withTiming(isOpen.value ? 0 : 1, { duration })
   );
 
   const sheetStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: progress.value * 2 * height.value }],
+    backgroundColor: colorScheme === 'light' ? '#f8f9ff' : '#272B3C',
   }));
 
   const backdropStyle = useAnimatedStyle(() => ({
@@ -50,7 +53,6 @@ function BottomSheet({ isOpen, toggleSheet, duration = 500, children }) {
 
 const sheetStyles = StyleSheet.create({
   sheet: {
-    backgroundColor: '#f8f9ff',
     padding: 16,
     paddingRight: '2rem',
     paddingLeft: '2rem',
@@ -71,12 +73,18 @@ const sheetStyles = StyleSheet.create({
 });
 
 export default function App() {
+  const { colorScheme } = useColorScheme();
   const isOpen = useSharedValue(false);
 
   const toggleSheet = () => {
     isOpen.value = !isOpen.value;
   };
 
+  const contentStyle = useAnimatedStyle(() => ({
+    color: colorScheme === 'light' ? '#001a72' : '#f8f9ff',
+    textDecorationColor: colorScheme === 'light' ? '#001a72' : '#f8f9ff',
+  }));
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.safeArea}>
@@ -87,14 +95,16 @@ export default function App() {
         <View style={styles.flex} />
       </View>
       <BottomSheet isOpen={isOpen} toggleSheet={toggleSheet}>
-        <Text style={styles.bottomSheetContent}>
+        <Animated.Text style={contentStyle}>
           Discover the indispensable convenience of a bottom sheet in mobile
           app. Seamlessly integrated, it provides quick access to supplementary
           features and refined details.
-        </Text>
+        </Animated.Text>
         <View style={styles.buttonContainer}>
-          <Pressable style={styles.bottomSheetButton}>
-            <Text style={styles.bottomSheetButtonText}>Read more</Text>
+          <Pressable style={[styles.bottomSheetButton]}>
+            <Animated.Text style={[styles.bottomSheetButtonText, contentStyle]}>
+              Read more
+            </Animated.Text>
           </Pressable>
         </View>
       </BottomSheet>
@@ -136,15 +146,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: '#001a72',
     paddingBottom: 2,
   },
   bottomSheetButtonText: {
     fontWeight: 600,
-    color: '#001a72',
-  },
-  bottomSheetContent: {
-    color: '#001a72',
+    textDecorationLine: 'underline',
   },
 });
diff --git a/docs/static/examples/SectionList.js b/docs/static/examples/SectionList.js
@@ -1,5 +1,6 @@
 import { FlashList } from '@shopify/flash-list';
 import React, { useRef, useState } from 'react';
+import { useColorScheme } from '@mui/material';
 import { Pressable, StyleSheet, Text, View, SafeAreaView } from 'react-native';
 import Animated, {
   useAnimatedStyle,
@@ -105,16 +106,30 @@ const TableOfContentsElement = ({
   visibleIndex,
   sectionCardsRef,
 }) => {
+  const { colorScheme } = useColorScheme();
   const style = useSelectedStyle(visibleIndex, index);
 
+  const tableOfContentsElementTextStyle = useAnimatedStyle(() => ({
+    color: colorScheme === 'light' ? '#001a72' : '#f8f9ff',
+  }));
+
+  const tableOfContentsElementStyle = useAnimatedStyle(() => ({
+    borderBottomColor: colorScheme === 'light' ? '#001a72' : '#f8f9ff',
+  }));
+
   return (
     <Pressable
       onPress={() => {
         sectionCardsRef.current?.scrollToIndex({ index, animated: true });
         visibleIndex.value = index;
       }}
-      style={sectionListStyles.tableOfContentsElement}>
-      <Animated.Text style={[style, sectionListStyles.tableOfContentsElement]}>
+      style={[sectionListStyles.tableOfContentsElement]}>
+      <Animated.Text
+        style={[
+          style,
+          sectionListStyles.tableOfContentsElement,
+          tableOfContentsElementTextStyle,
+        ]}>
         {item}
       </Animated.Text>
     </Pressable>
@@ -184,10 +199,9 @@ const sectionListStyles = StyleSheet.create({
   },
   tableOfContentsElement: {
     padding: 4,
-    color: '#001a72',
     marginHorizontal: 4,
-    borderBottomColor: '#001a72',
     margin: 8,
+    borderBottomColor: '#001a72',
     overflow: 'hidden',
   },
   tableOfContents: {
@@ -201,6 +215,7 @@ const SectionCards = ({
   sectionCardsRef,
   tableOfContentsRef,
 }) => {
+  const { colorScheme } = useColorScheme();
   const heights = sections.map((_) => SECTION_HEIGHT);
 
   const getOffsetStarts = () =>
@@ -226,10 +241,16 @@ const SectionCards = ({
     }
   };
 
+  const sectionNameStyle = useAnimatedStyle(() => ({
+    color: colorScheme === 'light' ? '#001a72' : '#f8f9ff',
+  }));
+
   const renderItem = ({ item }) => {
     return (
       <View>
-        <Text style={sectionCardStyles.header}> {item.name}</Text>
+        <Animated.Text style={[sectionCardStyles.header, sectionNameStyle]}>
+          {item.name}
+        </Animated.Text>
         <SectionCardsElement>
           <Text style={sectionCardStyles.content}>{item.content}</Text>
         </SectionCardsElement>
@@ -287,7 +308,6 @@ const sectionCardStyles = StyleSheet.create({
     borderRadius: 24,
   },
   header: {
-    color: '#001a72',
     textAlign: 'center',
     fontSize: 24,
     fontWeight: 'bold',