@hishprorg/iste-voluptatum-ipsa NPM | npm.io

5.8.67 • Published 1 year ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

1 year ago

Tailwind Dark Theme

A Tailwind CSS plugin designed to assist you in swiftly creating your own dark theme. The underlying technique is quite straightforward: convert your tokens into CSS variables and apply them to two classes each paired color has same variable names.

Installation

install the plugin from npm:

npm i @hishprorg/iste-voluptatum-ipsa

docs

Usage

import themePlugin, {registerThemeVariant} from '@hishprorg/iste-voluptatum-ipsa';

// your own design tokens
const tokens = {
  "light-font-color": "black",
  "light-background-color": "white",
  "light-shine-color": "black",
  "light-shine-color-rgb": "0, 0, 0",
  "light-lamp-color": "black",
  "light-link-color": "#4e1e86",
  "light-primary-color": "#bd93f9",
  "light-secondary-color": "#9547b7",
  "light-background-color-1": "white",
  "light-background-color-2": "#bd93f917",
  "dark-font-color": "white",
  "dark-background-color": "#0e0027",
  "dark-shine-color": "#5fb0f7",
  "dark-shine-color-rgb": "95, 176, 247",
  "dark-lamp-color": "white",
  "dark-link-color": "#7651ff",
  "dark-primary-color": "#bd93f9",
  "dark-secondary-color": "#9547b7",
  "dark-background-color-1": "white",
  "dark-background-color-2": "#bd93f917",
};

/**
 * @param tokens: Object
 * @return [cssVariable, themeExtend]
 * @description convert your token to valid CSSrule Object and tailwind theme config object
 */
function tokenSplit(tokens) {
  // ...
}

// add yourown theme variant and use it like `dark:`
registerThemeVariant('light');

module.exports = {
  darkMode: 'class',
  plugins: [
    themePlugin(tokens, tokenSplit || "DEFAULT"),
  ],
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .link {
        color: var(--link-color);
    }
}

in HTML

const Demo = () => {
  const [ theme, setTheme ] = useState('light');

  //  add tailwind class name
  return <body class={ `${ theme }` }>
  <div class={ "link" }>
    wrapped in utilities
  </div>
  <div class={ "text-link-color" }>
    directly using
  </div>
  <div class={"light:text-red"}>
    you may want use theme-variant to control style in some situations, you can add your own theme-variant  
  </div>
  <button onclick={ setTheme('dark') }>theme</button>
  </body>
};

Configuration

todo

End

If you have any questions feel, free to open an issue.

eslintplugin nodejs __proto__assign trimRight date own signed tc39 npmignore rgb sham AsyncIterator defineProperty spinner shrinkwrap es2018 stream Array.prototype.filter async const quote flag crypt preserve-symlinks protocol-buffers globalThis CSS rds description callback querystring argument emr css nesting censor globals $.extend Set stringify WeakSet form-validation byteOffset typeerror chai gestures superstruct Iterator String.prototype.trim Reflect.getPrototypeOf ES route53 call guid ReactiveExtensions directory chrome read typed circular installer whatwg json-schema flat self deep importexport Observables ECMAScript 2022 -0 phone forms enumerable route storagegateway banner concat form flatMap east-asian-width file execfile properties ES2016 chromium 0 generics concatMap express i18n some byteLength BigInt64Array Object.entries pipe execute ECMAScript 7 joi RegExp.prototype.flags spinners extend tdd json-schema-validation postcss-plugin buffer native vars ajv eventDispatcher ESnext Microsoft move expression trimEnd Rx streams flatten gradients css call-bound number iterator rangeerror sigterm parser module iteration inference equal elb fast has ES6 symbol lint minimal matchAll getOwnPropertyDescriptor window styled-components setter remove array map idle findLast bdd uninstall browserslist length regular expression amazon toStringTag tools xterm asserts sns starter TypeBox real-time certificates channel error redux-toolkit fetch cloudfront Uint32Array consume invariant Int32Array sort Push random view bound metadata RxJS user-streams asterisks a11y beanstalk values es2015 iterate eslint-plugin parsing test react-testing-library acorn merge css variable eventEmitter JSON-Schema request nope ECMAScript 2019 classnames fast-clone every var full dependency manager apollo RegExp#flags Array.prototype.includes loadbalancing immer predictable telephone babel Object.fromEntries openssl jest es2016 accessor deterministic slice fps compare lockfile BigUint64Array error-handling terminal Observable sorted Array.prototype.flatten regular-expression pose es6 data JSON utilities assert configurable string es-shims util settings commander ECMAScript utils qs glob stringifier require Object.values extra readablestream setImmediate mixins es5 jsonschema redux coercible tty Array wait fork jshint fast-deep-clone [[Prototype]]Object.getPrototypeOf glacier react animation japanese scheme-validation rfc4122 .gitignore toolkit YAML writable shebang http reverse String.prototype.matchAll rules ES5 arrays pino simpledb effect-ts linux config syntaxerror names popmotion ramda symlinks shell spawn trimLeft deep-copy busy browser classname replay omit babel-core curl bin zero dom-testing-library Symbol.toStringTag columns filter structuredClone helper polyfill name 6to5 superagent electron lesscss toArray private sequence css-in-js accessibility Int16Array ES2019 negative zero callbound inspect typesafe global object drag fixed-width dynamodb airbnb call-bind ES3 colour css cloudsearch key ts signals windows typed array npm ES2021 patch argv wget scheme prefix clone recursive shared stable TypeScript regex figlet Object bind performance resolve browserlist protobuf RFC-6455 push Stream language kinesis intrinsic password curried autoscaling worker touch zod walk proto promise in handlers import fantasy-land delete mapreduce es text file system input url compile less deepcopy Array.prototype.findLast less.js local findLastIndex class-validator offset ArrayBuffer.prototype.slice StyleSheet WebSocket es-shim API sameValueZero cloudwatch is persistent Uint8Array hot side operating-system binaries Uint8ClampedArray less css upload reversed define internal ES2017 ie xhr hash Array.prototype.contains visual Object.defineProperty logging toReversed harmony regexp manager awesomesauce workspace:*three preprocessor style option signal positive queue binary json-schema-validator arktype monorepo ES7 es2017 env emit isConcatSpreadable dependencies exit-code Float64Array hookform s3 pnpm9 keys serialization URLSearchParams codes runtime bcrypt interrupts take mkdirp spring ArrayBuffer#slice symlink lazy cloudtrail ES2020 ECMAScript 5 reducer flags sigint modules Object.assign global this value find deep-clone match ansi state forEach reduce agent Underscore libphonenumber link transport collection tslib buffers swf Promise mkdir Streams testing waf ebs json point-free valid color toSorted l10n WebSockets listeners prototype js validator groupBy styles classes process ES2023 dataview command jsdiff events immutable ECMAScript 2017 descriptor environments weakset robust core client vpc width has-own escape uuid check fullwidth redact dotenv mobile hasOwn react-hooks System.global multi-package

@hishprorg/alias-quia-occaecati @hishprorg/aliquid-ad-vero @hishprorg/autem-sint-quas @hishprorg/commodi-distinctio-alias @hishprorg/cum-rem-consequuntur @hishprorg/cupiditate-quaerat-qui @hishprorg/earum-sint-veritatis @hishprorg/eius-vero-dicta @hishprorg/est-dicta-quis @hishprorg/et-pariatur-a @hishprorg/expedita-quo-accusamus @hishprorg/expedita-ut-iste @hishprorg/fuga-sit-corrupti @hishprorg/hic-repellendus-hic @hishprorg/incidunt-quibusdam-tempore @hishprorg/itaque-esse-accusamus @hishprorg/iure-optio-nihil @hishprorg/magni-amet-id @hishprorg/magni-nisi-aperiam @hishprorg/maxime-voluptates-enim @hishprorg/natus-eligendi-consequuntur @hishprorg/nihil-ad-ratione @hishprorg/perspiciatis-ratione-unde @hishprorg/quis-perferendis-culpa @hishprorg/reprehenderit-excepturi-sed @hishprorg/sint-nam-consequuntur @hishprorg/sunt-officia-eligendi @hishprorg/sunt-voluptatem-nobis @hishprorg/unde-vitae-reprehenderit @hishprorg/wafflejs

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago