@codedoc/core/dist/es6/components/darkmode/darklight/index.js

Create beautiful modern documentation websites.

import { themedStyle } from '@connectv/jss-theme';
export const DarkLightStyle = /*#__PURE__*/ themedStyle(theme => ({
    darklight: {
        position: 'relative',
        overflow: 'hidden',
        'body.dark-mode-animate &>.light, &>.dark': {
            transition: 'opacity .3s, z-index .3s',
        },
        '&>.light': {
            'body.dark &': {
                opacity: 0,
            },
            '@media (prefers-color-scheme: dark)': {
                'body:not(.dark-mode-animate) &': {
                    opacity: 0,
                }
            },
        },
        '&>.dark': {
            position: 'absolute',
            opacity: 0,
            top: 0, left: 0, right: 0,
            zIndex: -1,
            'body.dark &': {
                opacity: 1,
                zIndex: 1,
            },
            '@media (prefers-color-scheme: dark)': {
                'body:not(.dark-mode-animate) &': {
                    opacity: 1,
                    zIndex: 1,
                }
            },
        },
    },
}));
export function InLight(_, renderer, content) {
    return renderer.create("div", { class: "light" }, content);
}
export function InDark(_, renderer, content) {
    return renderer.create("div", { class: "dark" }, content);
}
export function DarkLight(_, renderer, content) {
    const classes = this.theme.classes(DarkLightStyle);
    return renderer.create("div", { class: classes.darklight }, content);
}
//# sourceMappingURL=index.js.map