Example of using attrs method from styled

get-prefers-color-scheme.js

const getPrefersColorScheme = () => {
  if ('matchMedia' in window) {
    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    return isDark ? 'dark' : 'light';
  }

  return 'light';
};

export default getPrefersColorScheme;

index.js

import { useState } from 'react';
import { Logo } from './styles';
import getPrefersColorScheme from './get-prefers-color-scheme'

const Example = () => {
  const [mode, setMode] = useState(getPrefersColorScheme());
  
  const toggle = () => {
    setMode(prevMode => prevMode === 'light' ? 'dark' : 'light');
  };

  return (
    <div>
      <Logo mode={mode} />
      <button onClick={toggle}>Toggle</button>
    </div>
  );
};

export default Example;

styles.js

import styled from 'styled-components';
import { DarkLogo, LightLogo } from 'path-to-logos';

const logos = {
  dark: DarkLogo,
  light: LightLogo,
};

export const Logo = styled.img.attrs(({ mode = 'light' }) => ({
  src: logos[mode],
  alt: 'Logo',
}))`
  /* ... */
`;