minstack.rocks

MinStack Homepage

styled's People

Contributors

Stargazers

Watchers

styled's Issues

Use of the useTheme hook in the callback provided to use() breaks the rules of hooks according to eslint

Pretty much the title. Calling the useTheme() hook from the callback provided to use() causes eslint to error, citing the Rules of Hooks.

Additionally, creating a variable for the theme and referencing that variable in the use() function does not successfully update the theme when changed using the <ThemeProvider> component.

Transitions not working

I'm trying to set up a dark mode toggle in my project, but the transitions don't work when updating styles. If I manually go into DevTools and add/remove the relevant classes, the transitions work, but not when tsstyled is updating the classes. I've also tried implementing this using ThemeProvider and a "dark theme" but it seems tsstyled removes the classes before adding the new ones when the theme updates. Doesn't work when manually defining element styles for the component in use() either.

After playing around in DevTools for a bit, it seems like all styles are being cleared from the component (including element styles) before the new styles are applied. Any thoughts on this would be greatly appreciated.

Code below:

Layout.tsx

import React, { useState } from 'react';
import { styled, classNames } from 'tsstyled';
import './fonts.css';

// Theme
import { useTheme, useDarkTheme, ThemeProvider, GlobalStyles } from './theme';

// Components
import Head from './head';
import DarkModeSwitch from './darkModeSwitch';

interface LayoutProps {
    title: string;
    children?: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ title, children }) => {
    const [darkMode, setDarkMode] = useState(false);
    const darkTheme = useDarkTheme();

    const darkClass = classNames({ dark: darkMode });

    const LayoutContainer = styled('div').use(() => ({
        theme: useTheme(), // eslint-disable-line
    }))`
        position: relative;
        width: 100%;
        min-height: 100vh;
        background-color: ${props => props.theme.white};
        color: ${props => props.theme.charcoal};
        transition: background 1s ease-in-out, color 1s ease-in-out;
    `;

    const SwitchContainer = styled('div')`
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    `;

    const SwitchText = styled('p').use(() => ({
        theme: useTheme(), // eslint-disable-line
    }))`
        color: ${props => props.theme.lightFontColor};
        font-size: 1rem;
        margin: 0;
        padding: 0;
        margin-right: 0.5rem;
    `;

    return (
        <>
        <Head title={title} />
        <ThemeProvider
            value={current => {
                if (!darkMode) {
                    return current;
                }
                return darkTheme;
            }}
        >
            <GlobalStyles />
            <LayoutContainer className={darkClass}>
                <SwitchContainer>
                    <SwitchText>Dark Mode</SwitchText>
                    <DarkModeSwitch
                        initialState={darkMode}
                        stateChangeCallback={setDarkMode}
                    />
                </SwitchContainer>
                {children}
            </LayoutContainer>
        </ThemeProvider>
        </>
    );
};

export { useTheme };
export default Layout;

theme.ts

import { createTheme, styled, css } from 'tsstyled';

const colors = {
    darkBlue: '#173042',
    medBlue: '#236477',
    paleBlue: '#CFDFDA',
    medGreen: '#7CAD3E',
    darkGreen: '#4A6C2F',
    charcoal: '#333',
    paleGray: '#999',
    white: '#FFF',
    offWhite: '#E1E1E1',
};

const fonts = {
    copyFontFamily: `'Poppins', sans-serif`,
    accentFontFamily: `'Conthrax', sans-serif`,
};

const accentColor = colors.medBlue;

const [useTheme, ThemeProvider] = createTheme({
    // Colors
    darkBlue: colors.darkBlue,
    medBlue: colors.medBlue,
    paleBlue: colors.paleBlue,
    medGreen: colors.medGreen,
    darkGreen: colors.darkGreen,
    charcoal: colors.charcoal,
    paleGray: colors.paleGray,
    white: colors.white,
    offWhite: colors.offWhite,

    accentColor,

    // Fonts
    accentFontFamily: fonts.accentFontFamily,
    accentFontWeight: 500,
    accentFontColor: accentColor,

    copyFontFamily: fonts.copyFontFamily,
    copyFontWeight: 300,
    copyFontColor: colors.charcoal,

    lightFontColor: colors.paleGray,
});

const [useDarkTheme] = createTheme({
    // Colors
    darkBlue: colors.darkBlue,
    medBlue: colors.medBlue,
    paleBlue: colors.paleBlue,
    medGreen: colors.medGreen,
    darkGreen: colors.darkGreen,
    charcoal: colors.charcoal,
    paleGray: colors.paleGray,
    white: colors.white,
    offWhite: colors.offWhite,

    accentColor,

    // Fonts
    accentFontFamily: fonts.accentFontFamily,
    accentFontWeight: 500,
    accentFontColor: accentColor,

    copyFontFamily: fonts.copyFontFamily,
    copyFontWeight: 300,
    copyFontColor: colors.white,

    lightFontColor: colors.paleGray,
});

const cssReset = css`
    /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
    */

    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol,
    ul {
        list-style: none;
    }
    blockquote,
    q {
        quotes: none;
    }
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
`;

const GlobalStyles = styled('style').use(() => ({
    theme: useTheme(),
}))`
    ${cssReset}
    :root {
        font-family: ${props => props.theme.copyFontFamily};
        font-weight: ${props => props.theme.copyFontWeight};
        color: ${props => props.theme.copyFontColor};
    }

    :root .dark {
        background-color: ${props => props.theme.charcoal};
        color: ${props => props.theme.white};
    }
`;

export { useTheme, useDarkTheme, ThemeProvider, GlobalStyles };

Recommend Projects

theminstack / styled Goto Github PK

styled's Introduction

minstack.rocks

styled's People

Contributors

Stargazers

Watchers

Forkers

styled's Issues

Use of the useTheme hook in the callback provided to use() breaks the rules of hooks according to eslint

Transitions not working

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent