Theming - Light

Themes

CronLight ships two themes, which are selected with the theme prop.

value	description
`ant`	default theme, inspired by Ant Design Vue
`legacy`	the styles used before the `ant` theme was introduced

<template>
  <cron-light v-model="value" theme="legacy" />
</template>

Dark mode

Dark mode is activated by adding the dark class to any parent element.

<body class="dark">
  <cron-light v-model="value" />
</body>

<template>
  <div>
    <p class="pb-1">theme: ant (default)</p>
    <CronLight v-model="value" />

    <p class="pb-1 pt-4">theme: legacy</p>
    <CronLight v-model="value" theme="legacy" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '0 9 * * 1-5',
    }
  },
}
</script>

Use the toggle at the top-right to switch between light and dark mode.

theme: ant (default)

Every

every month

every day

and

every day of the week

every hour

every minute

theme: legacy