fix text color in native select

src/__screenshot_tests__/form-select-screenshot-test.tsx

@@ -151,6 +151,21 @@ test('Select - display all options', async () => {
     expect(image).toMatchImageSnapshot();
 });
 
+test('Select - display all options in dark mode', async () => {
+    const page = await openStoryPage({
+        id: 'components-select--controlled',
+        isDarkMode: true,
+        device: 'DESKTOP',
+    });
+
+    const field = await screen.findByRole('button', {name: 'Select a fruit'});
+    await field.click();
+
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
+
 test('Select - display all options over inverse', async () => {
     const page = await openStoryPage({
         id: 'components-select--controlled',
@@ -181,6 +196,22 @@ test('Select - display all options with native select', async () => {
     expect(image).toMatchImageSnapshot();
 });
 
+test('Select - display all options with native select in dark mode', async () => {
+    const page = await openStoryPage({
+        id: 'components-select--controlled',
+        device: 'DESKTOP',
+        isDarkMode: true,
+        args: {native: true},
+    });
+
+    const field = await screen.findByLabelText('Select a fruit');
+    await field.click();
+
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
+
 test('Select - display all options with native select over inverse', async () => {
     const page = await openStoryPage({
         id: 'components-select--controlled',

src/select.tsx

@@ -365,7 +365,9 @@ const Select: React.FC<SelectProps> = ({
                             <option value="" style={{display: 'none'}} />
                         )}
                         {options.map(({value: val, text}) => (
-                            <option key={val} value={val}>
+                            // Set color: 'initial' to avoid wrong text color in some browsers when using dark mode.
+                            // Similar issue in another lib: https://github.com/chakra-ui/chakra-ui/issues/417#issue-566611352
+                            <option key={val} value={val} style={{color: 'initial'}}>
                                 {text}
                             </option>
                         ))}