Anique

Theming

You can avoid all theming by using this component preferably in Head component or maybe in Body

import {AniqueThemeAutoSetup} from '@qinetik/anique/theme'
                        
// Use it in your Head or Body
<AniqueThemeAutoSetup />

Manual Theming

Anique at the moment provides two themes, Dark & Light, Any theme you want to use in Anique you must include in your Page.

import {AniqueThemeLight, AniqueThemeDark} from "@qinetik/anique"

// Themes will be applied to .light or .dark class name containers
<AniqueThemeLight containerCssSelector={".light"} />
<AniqueThemeDark containerCssSelector={".dark"} />

// Apply color scheme like with this
// This will change scrollbars on the page to have dark / light theme as well
const ColorSchemeStyles = css`
    :root.dark {
        color-scheme: dark;
    }
    
    :root.light {
        color-scheme: light;
    }
`

// You should use .light or .dark class name on html element like this
<html class={"light"}>
<head>
    <ColorSchemeStyles />

Changing Theme

When user wants to update the theme, You should just update the class of the html element

document.documentElement.className = 'light' // or dark
saveThemeIntoLocalStorage('light') // imported from @qinetik/anique/theme, uses key 'anique-theme-key'

Styling

You'll find that Anique is very simple to use with CSS in JS Here's a very simple code snippet to create a `div` with styling

import {styled} from "@qinetik/emotion";
import {Anique} from "@qinetik/anique";

const MyContainer = styled("div")`
    border-radius : 6px;
    padding : 1rem;
    background : ${Anique.colors.bg200};
`

const Extended = styled(MyContainer)`
    padding : 1em;
`

// as prop is not supported, use withComponent
const Different = MyContainer.withComponent("div")

// Let's use our created div
export function Use() {
    return (
        <MyContainer>
            Hello Mate! I am the container
        </MyContainer>
    )
}

CSS in JS supports Server Side Rendering with solid-start

This was a very basic example ofcourse. All the theme styling is done using Anique object which uses css variables under the hood.Anique also has the ability to get theme from context, You just need to provide the theme via ThemeProvider which is also available in @qinetik/emotion packageLet's go over more ways to use Anique's CSS in JS library

CSS

import {css} from "@qinetik/emotion";

const CssStyles = css`
    color: blue;
`

// To use context theme inside css, You must make it a function
const InvokeMeTwice = (theme) => css`
    color: blue;
`

// Let's use our created div
export function Use() {
    return (
        <div class={CssStyles()}>
            Hello Mate! I am the container
        </div>
    )
}

You must invoke CssStyles inside the component because its a hook

Global Styles

Only createGlobalStyle supports CssStyles & Keyframes selectors

const GlobalStyles = createGlobalStyle`
.global-para {
    color: red;
}

${CssStyles} {
    background: green;
    animation: ${Keyframes} 1s ease-in;
    animation-iteration-count: infinite;
}`

Animation

Here we will create a keyframes animation, which gets assigned a name when you create it

import {keyframes,styled} from "@qinetik/emotion";

const SpinnerAnimation = keyframes`
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}`

// Mount the component once / twice, Only first instance counts
<SpinnerAnimation />

Hydration Error

Hydration error can occur if you use component like this

const MyComp = <StyledCompo />
return (
   <div>
     {MyComp}
   </div>
)

To fix this you must invoke it as a function

const MyComp = () => <StyledCompo />
return (
   <div>
     <MyComp />
   </div>
)

A note for Astro

Astro with CSS in JS library does not support SSR, This will be done in future, If you want to develop with AstroYou must either not use SSR or override StyledEngineContext Configuration AniqueStyledEngineContext, And use injectionStrategy of Sibling for it to work

Input

Layout

Navigation

Text

Data

Display

Feedback