feat: Add dark theme support

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017-2021 Chatwoot Inc.
+Copyright (c) 2017-2023 Chatwoot Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -7,7 +7,7 @@ chatwoot-react-native-widget
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)
 ![](https://img.shields.io/npm/l/@chatwoot/@chatwoot/react-native-widget)
 
-- **Supported Chatwoot version:** 1.18.0+
+- **Supported Chatwoot version:** 2.16.0+
 
 <img src="https://user-images.githubusercontent.com/12408980/203909820-938136a6-bf5b-433e-9f68-d7f28a1303be.png" alt="screenshot" width="350">
 
@@ -61,6 +61,7 @@ const App = () => {
   const websiteToken = 'WEBSITE_TOKEN';
   const baseUrl = 'CHATWOOT_INSTALLATION_URL';
   const locale = 'en';
+  const colorScheme='dark'
 
   return (
     <SafeAreaView style={styles.container}>
@@ -79,6 +80,7 @@ const App = () => {
             isModalVisible={showWidget}
             user={user}
             customAttributes={customAttributes}
+            colorScheme={colorScheme}
           />
       }
 
@@ -142,6 +144,12 @@ The whole example is in the `/example` folder.
     <td>Website channel token</td>
   </tr>
   <tr>
+    <td>colorScheme</td>
+    <td> light </td>
+    <td> String </td>
+    <td>Widget color scheme (light/dark/auto)</td>
+  </tr>
+   <tr>
     <td>locale</td>
     <td> en </td>
     <td> String </td>
@@ -180,4 +188,4 @@ Feel free to send us feedback on [Twitter](https://twitter.com/chatwootapp) or [
 
 If there's anything you'd like to chat about, please feel free to join our [Discord](https://discord.gg/cJXdrwS) chat!
 
-_Chatwoot_ &copy; 2017-2022, Chatwoot Inc - Released under the MIT License.
+_Chatwoot_ &copy; 2017-2023, Chatwoot Inc - Released under the MIT License.

examples/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

examples/.gitignore

@@ -20,6 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
+ios/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -28,32 +29,35 @@ build/
 .gradle
 local.properties
 *.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
 
 # node.js
 #
 node_modules/
 npm-debug.log
 yarn-error.log
 
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-!debug.keystore
-
 # fastlane
 #
 # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
 # screenshots whenever they are needed.
 # For more information about the recommended setup visit:
 # https://docs.fastlane.tools/best-practices/source-control/
 
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
 
 # Bundle artifact
 *.jsbundle
 
-# CocoaPods
+# Ruby / CocoaPods
 /ios/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*

examples/.node-version

@@ -0,0 +1 @@
+18

examples/.prettierrc.js

@@ -1,7 +1,7 @@
 module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
   bracketSpacing: false,
-  jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',
-  arrowParens: 'avoid',
 };

examples/App.js → examples/App.tsx

@@ -7,9 +7,9 @@ import {
   TextInput,
   TouchableOpacity,
   View,
+  StyleSheet,
 } from 'react-native';
 
-import styles from './style';
 const App = () => {
   const [showWidget, toggleWidget] = useState(false);
   const [user, setUser] = useState({
@@ -24,8 +24,8 @@ const App = () => {
     pricingPlan: 'paid',
     status: 'active',
   };
-  const websiteToken = 'gUuQpz4wKSBZ36zpWyXtShrJ';
-  const baseUrl = 'https://staging.chatwoot.com';
+  const websiteToken = 'uDDidz9scvbDBcxjCfwdWJRZ';
+  const baseUrl = 'https://mobile.chatwoot.app';
   const [locale, setLocale] = useState('en');
 
   return (
@@ -58,7 +58,7 @@ const App = () => {
         <TextInput
           style={styles.input}
           value={locale}
-          onChangeText={text => setLocale(locale)}
+          onChangeText={() => setLocale(locale)}
         />
         <Text style={styles.label}>Avatar</Text>
         <TextInput
@@ -73,15 +73,15 @@ const App = () => {
         />
         <TouchableOpacity
           style={styles.button}
-          onPress={() => toggleWidget(true)}
-          underlayColor="#fff">
+          onPress={() => toggleWidget(true)}>
           <Text style={styles.buttonText}>Open Chatwoot Widget</Text>
         </TouchableOpacity>
       </View>
       <ChatWootWidget
         websiteToken={websiteToken}
         locale={locale}
         baseUrl={baseUrl}
+        colorScheme="dark"
         closeModal={() => toggleWidget(false)}
         isModalVisible={showWidget}
         user={user}
@@ -91,4 +91,49 @@ const App = () => {
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modal: {
+    flex: 1,
+    paddingVertical: 32,
+  },
+
+  button: {
+    height: 48,
+    marginTop: 32,
+    paddingTop: 8,
+    paddingBottom: 8,
+    backgroundColor: '#1F93FF',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#fff',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    color: '#fff',
+    textAlign: 'center',
+    paddingLeft: 10,
+    fontWeight: '600',
+    fontSize: 16,
+    paddingRight: 10,
+  },
+  label: {
+    marginTop: 16,
+  },
+  input: {
+    height: 40,
+    width: 300,
+    borderColor: 'gray',
+    borderWidth: 1,
+    marginTop: 8,
+    fontWeight: '600',
+    fontSize: 16,
+    color: 'gray',
+  },
+});
+
 export default App;

examples/Gemfile

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby '>= 2.6.10'
+
+gem 'cocoapods', '>= 1.11.3'