import { type InjectionKey, type Ref } from "vue";
/**
 * A composable for managing dark mode that automatically takes care of saving the user's preference.
 *
 * See the returned utilities for more details.
 *
 * It also provides `isDarkModeInjectonKey` with a ref so it can be accessed in deep nested components if needed.
 *
 * ```ts
 * import { isDarkModeInjectionKey } from "@alanscodelog/vue-components/composables/useDarkMode.js"
 * const isDarkMode = inject(isDarkModeInjectionKey)
 * ```
 */
export declare const useDarkMode: ({ useLocalStorage, darkModeOrder }?: DarkModeOptions) => {
    /** Whether the dark mode should be enabled or not */
    darkMode: Ref<boolean>;
    /** The current state of the darkMode but as a string (dark, light, system) */
    darkModeState: Ref<"dark" | "light" | "system">;
    /** The value of the manuably controllable dark mode. You can set this to true/false or undefined to allow the systemDarkMode to take priority. Alternatively use setDarkMode instead. */
    manualDarkMode: Ref<boolean | undefined>;
    /** The value of the system dark mode. This is automatically set depending on the user's `prefer-color-scheme` and should not be set directly. */
    systemDarkMode: Ref<boolean>;
    setDarkMode: (value: "dark" | "light" | "system") => void;
    cycleDarkMode: () => void;
};
export declare const defaultDarkModeOrder: readonly ["system", "dark", "light"];
export declare const isDarkModeInjectionKey: InjectionKey<Ref<boolean, boolean>>;
export type DarkModeOptions = {
    useLocalStorage?: boolean | string;
    darkModeOrder?: readonly ("system" | "dark" | "light")[];
};
//# sourceMappingURL=useDarkMode.d.ts.map