Repositório do projeto:

Inicialmente, dentro de styles criamos um arquivo chamado themes.js com a estilização de ambos os temas.

Para iniciar com os temas no nosso projeto “warship”, no componente da home onde selecionamos a ordem que queremos seguir vamos passar a ordem selecionada por parâmetro através da url (query params).

Dentro do arquivo da sua página do “board do jogo” importamos o ThemeProvider da biblioteca styled-components, e também o useRouter do next.

Dentro da função do board, vamos criar as seguintes variáveis:

A router é criada para podermos utilizar as funcionalidades fornecidas pelo useRouter.
A segunda variável, side, é desestruturada de router.query, seria o mesmo que utilizar o router.query.side.

Para setar o tema, criaremos outra variável que receberá um objeto de temas, as chaves do objeto serão: play e comp (que identifica um jogador e o computador), a chave “play” recebe como valor Themes[side], onde Themes vem do arquivo de estilização e side vem da query param. A chave “comp” receberá o valor inverso do recebido pela chave “play”, para isso foi feita a validação: se o side for igual a “jedi” então, recebe “sith” senão, recebe “jedi”.

Para passar o tema para os componentes, precisamos utilizar em volta do componente do nosso board o ThemeProvider (importado do styled-components), como se este fosse uma tag HTML.Dentro deste ThemeProvider, coloca-se o componente Board.

O ThemeProvider recebe o parâmetro theme, que receberá como valor a variável criada acima, theme.

Links úteis:

Desestruturação

Temas com styled-components