Merge pull request #14858 from Budibase/remove-lightest-and-dark-themes
Remove lightest and dark themes and add core types and utils for themes
This commit is contained in:
commit
c110cb628d
|
@ -22,7 +22,7 @@
|
|||
} from "stores/builder"
|
||||
import { themeStore } from "stores/portal"
|
||||
import { getContext } from "svelte"
|
||||
import { Constants } from "@budibase/frontend-core"
|
||||
import { ThemeOptions } from "@budibase/shared-core"
|
||||
|
||||
const modalContext = getContext(Context.Modal)
|
||||
const commands = [
|
||||
|
@ -141,13 +141,13 @@
|
|||
icon: "ShareAndroid",
|
||||
action: () => $goto(`./automation/${automation._id}`),
|
||||
})) ?? []),
|
||||
...Constants.Themes.map(theme => ({
|
||||
...ThemeOptions.map(themeMeta => ({
|
||||
type: "Change Builder Theme",
|
||||
name: theme.name,
|
||||
name: themeMeta.name,
|
||||
icon: "ColorPalette",
|
||||
action: () =>
|
||||
themeStore.update(state => {
|
||||
state.theme = theme.class
|
||||
state.theme = themeMeta.id
|
||||
return state
|
||||
}),
|
||||
})),
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
import { Label } from "@budibase/bbui"
|
||||
import { onMount, createEventDispatcher } from "svelte"
|
||||
import { themeStore } from "stores/portal"
|
||||
import { Theme } from "@budibase/types"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
|
@ -116,7 +117,7 @@
|
|||
readOnly,
|
||||
autoCloseBrackets: true,
|
||||
autoCloseTags: true,
|
||||
theme: $themeStore.theme.includes("light") ? THEMES.LIGHT : THEMES.DARK,
|
||||
theme: $themeStore.theme === Theme.LIGHT ? THEMES.LIGHT : THEMES.DARK,
|
||||
}
|
||||
|
||||
if (!tab)
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
<script>
|
||||
import { ModalContent, Select } from "@budibase/bbui"
|
||||
import { themeStore } from "stores/portal"
|
||||
import { Constants } from "@budibase/frontend-core"
|
||||
import { ThemeOptions } from "@budibase/shared-core"
|
||||
</script>
|
||||
|
||||
<ModalContent title="Theme">
|
||||
<Select
|
||||
options={Constants.Themes}
|
||||
options={ThemeOptions}
|
||||
bind:value={$themeStore.theme}
|
||||
placeholder={null}
|
||||
getOptionLabel={x => x.name}
|
||||
getOptionValue={x => x.class}
|
||||
getOptionValue={x => x.id}
|
||||
/>
|
||||
</ModalContent>
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<script>
|
||||
import { notifications } from "@budibase/bbui"
|
||||
import { themeStore, appStore } from "stores/builder"
|
||||
import { Constants } from "@budibase/frontend-core"
|
||||
import { ThemeOptions, getThemeClassNames } from "@budibase/shared-core"
|
||||
|
||||
const onChangeTheme = async theme => {
|
||||
try {
|
||||
await themeStore.save(`spectrum--${theme}`, $appStore.appId)
|
||||
await themeStore.save(theme, $appStore.appId)
|
||||
} catch (error) {
|
||||
notifications.error("Error updating theme")
|
||||
}
|
||||
|
@ -15,17 +15,14 @@
|
|||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="container">
|
||||
{#each Constants.Themes as theme}
|
||||
{#each ThemeOptions as themeMeta}
|
||||
<div
|
||||
class="theme"
|
||||
class:selected={`spectrum--${theme.class}` === $themeStore.theme}
|
||||
on:click={() => onChangeTheme(theme.class)}
|
||||
class:selected={themeMeta.id === $themeStore.theme}
|
||||
on:click={() => onChangeTheme(themeMeta.id)}
|
||||
>
|
||||
<div
|
||||
style="background: {theme.preview}"
|
||||
class="color spectrum--{theme.class}"
|
||||
/>
|
||||
{theme.name}
|
||||
<div class="color {getThemeClassNames(themeMeta.id)}" />
|
||||
{themeMeta.name}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
@ -19,6 +19,7 @@
|
|||
import { findComponent, findComponentPath } from "helpers/components"
|
||||
import { isActive, goto } from "@roxi/routify"
|
||||
import { ClientAppSkeleton } from "@budibase/frontend-core"
|
||||
import { getThemeClassNames, ThemeClassPrefix } from "@budibase/shared-core"
|
||||
|
||||
let iframe
|
||||
let layout
|
||||
|
@ -47,7 +48,9 @@
|
|||
layout,
|
||||
screen,
|
||||
selectedComponentId,
|
||||
theme: $themeStore.theme,
|
||||
theme: $appStore.clientFeatures.unifiedThemes
|
||||
? $themeStore.theme
|
||||
: `${ThemeClassPrefix}${$themeStore.theme}`,
|
||||
customTheme: $themeStore.customTheme,
|
||||
previewDevice: $previewStore.previewDevice,
|
||||
messagePassing: $appStore.clientFeatures.messagePassing,
|
||||
|
@ -257,7 +260,7 @@
|
|||
class:mobile={$previewStore.previewDevice === "mobile"}
|
||||
>
|
||||
{#if loading}
|
||||
<div class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}>
|
||||
<div class={`loading ${getThemeClassNames($themeStore.theme)}`}>
|
||||
<ClientAppSkeleton
|
||||
sideNav={$navigationStore?.navigation === "Left"}
|
||||
hideFooter
|
||||
|
|
|
@ -18,10 +18,10 @@
|
|||
TooltipPosition,
|
||||
TooltipType,
|
||||
} from "@budibase/bbui"
|
||||
import { sdk } from "@budibase/shared-core"
|
||||
import { sdk, getThemeClassNames } from "@budibase/shared-core"
|
||||
import { API } from "api"
|
||||
import ErrorSVG from "./ErrorSVG.svelte"
|
||||
import { getBaseTheme, ClientAppSkeleton } from "@budibase/frontend-core"
|
||||
import { ClientAppSkeleton } from "@budibase/frontend-core"
|
||||
import { contextMenuStore } from "stores/builder"
|
||||
|
||||
$: app = $enrichedApps.find(app => app.appId === $params.appId)
|
||||
|
@ -163,9 +163,7 @@
|
|||
class:hide={!loading || !app?.features?.skeletonLoader}
|
||||
class="loading"
|
||||
>
|
||||
<div
|
||||
class={`loadingThemeWrapper ${getBaseTheme(app.theme)} ${app.theme}`}
|
||||
>
|
||||
<div class="loadingThemeWrapper {getThemeClassNames(app.theme)}">
|
||||
<ClientAppSkeleton
|
||||
noAnimation
|
||||
hideDevTools={app?.status === "published"}
|
||||
|
|
|
@ -1,24 +1,19 @@
|
|||
import { writable, get } from "svelte/store"
|
||||
import { API } from "api"
|
||||
import { getBaseTheme } from "@budibase/frontend-core"
|
||||
import { ensureValidTheme, DefaultAppTheme } from "@budibase/shared-core"
|
||||
|
||||
const INITIAL_THEMES_STATE = {
|
||||
theme: "",
|
||||
customTheme: {},
|
||||
}
|
||||
|
||||
export const themes = () => {
|
||||
export const createThemeStore = () => {
|
||||
const store = writable({
|
||||
...INITIAL_THEMES_STATE,
|
||||
theme: DefaultAppTheme,
|
||||
customTheme: {},
|
||||
})
|
||||
|
||||
const syncAppTheme = app => {
|
||||
store.update(state => {
|
||||
const theme = app.theme || "spectrum--light"
|
||||
const theme = ensureValidTheme(app.theme, DefaultAppTheme)
|
||||
return {
|
||||
...state,
|
||||
theme,
|
||||
baseTheme: getBaseTheme(theme),
|
||||
customTheme: app.customTheme,
|
||||
}
|
||||
})
|
||||
|
@ -51,7 +46,7 @@ export const themes = () => {
|
|||
const { theme, customTheme } = metadata
|
||||
store.update(state => ({
|
||||
...state,
|
||||
theme,
|
||||
theme: ensureValidTheme(theme, DefaultAppTheme),
|
||||
customTheme,
|
||||
}))
|
||||
}
|
||||
|
@ -66,4 +61,4 @@ export const themes = () => {
|
|||
}
|
||||
}
|
||||
|
||||
export const themeStore = themes()
|
||||
export const themeStore = createThemeStore()
|
||||
|
|
|
@ -1,38 +1,37 @@
|
|||
import { Constants, createLocalStorageStore } from "@budibase/frontend-core"
|
||||
import { createLocalStorageStore } from "@budibase/frontend-core"
|
||||
import { derived } from "svelte/store"
|
||||
import {
|
||||
DefaultBuilderTheme,
|
||||
ensureValidTheme,
|
||||
getThemeClassNames,
|
||||
ThemeOptions,
|
||||
ThemeClassPrefix,
|
||||
} from "@budibase/shared-core"
|
||||
|
||||
export const getThemeStore = () => {
|
||||
const themeElement = document.documentElement
|
||||
|
||||
const initialValue = {
|
||||
theme: "darkest",
|
||||
theme: DefaultBuilderTheme,
|
||||
}
|
||||
const store = createLocalStorageStore("bb-theme", initialValue)
|
||||
const derivedStore = derived(store, $store => ({
|
||||
...$store,
|
||||
theme: ensureValidTheme($store.theme, DefaultBuilderTheme),
|
||||
}))
|
||||
|
||||
// Update theme class when store changes
|
||||
store.subscribe(state => {
|
||||
// Handle any old local storage values - this can be removed after the update
|
||||
if (state.darkMode !== undefined) {
|
||||
store.set(initialValue)
|
||||
return
|
||||
}
|
||||
|
||||
// Update global class names to use the new theme and remove others
|
||||
Constants.Themes.forEach(option => {
|
||||
themeElement.classList.toggle(
|
||||
`spectrum--${option.class}`,
|
||||
option.class === state.theme
|
||||
)
|
||||
derivedStore.subscribe(({ theme }) => {
|
||||
const classNames = getThemeClassNames(theme).split(" ")
|
||||
ThemeOptions.forEach(option => {
|
||||
const className = `${ThemeClassPrefix}${option.id}`
|
||||
themeElement.classList.toggle(className, classNames.includes(className))
|
||||
})
|
||||
})
|
||||
|
||||
// Add base theme if required
|
||||
const selectedTheme = Constants.Themes.find(x => x.class === state.theme)
|
||||
if (selectedTheme?.base) {
|
||||
themeElement.classList.add(`spectrum--${selectedTheme.base}`)
|
||||
return {
|
||||
...store,
|
||||
subscribe: derivedStore.subscribe,
|
||||
}
|
||||
})
|
||||
|
||||
return store
|
||||
}
|
||||
|
||||
// ?? confusion
|
||||
export const themeStore = getThemeStore()
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"features": {
|
||||
"spectrumThemes": true,
|
||||
"unifiedTheme": true,
|
||||
"intelligentLoading": true,
|
||||
"deviceAwareness": true,
|
||||
"state": true,
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
import { Layout, Heading, Body } from "@budibase/bbui"
|
||||
import ErrorSVG from "@budibase/frontend-core/assets/error.svg"
|
||||
import { Constants, CookieUtils } from "@budibase/frontend-core"
|
||||
import { getThemeClassNames } from "@budibase/shared-core"
|
||||
import Component from "./Component.svelte"
|
||||
import SDK from "sdk"
|
||||
import {
|
||||
|
@ -154,7 +155,7 @@
|
|||
id="spectrum-root"
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
class="spectrum spectrum--medium {$themeStore.baseTheme} {$themeStore.theme}"
|
||||
class="spectrum spectrum--medium {getThemeClassNames($themeStore.theme)}"
|
||||
class:builder={$builderStore.inBuilder}
|
||||
class:show={fontsLoaded && dataLoaded}
|
||||
>
|
||||
|
|
|
@ -1,12 +1,11 @@
|
|||
import { derived } from "svelte/store"
|
||||
import { appStore } from "./app"
|
||||
import { builderStore } from "./builder"
|
||||
import { getBaseTheme } from "@budibase/frontend-core"
|
||||
import { ensureValidTheme, DefaultAppTheme } from "@budibase/shared-core"
|
||||
|
||||
// This is the good old acorn bug where having the word "g l o b a l" makes it
|
||||
// think that this is not ES6 compatible and starts throwing errors when using
|
||||
// optional chaining. Piss off acorn.
|
||||
const defaultTheme = "spectrum--light"
|
||||
const defaultCustomTheme = {
|
||||
primaryColor: "var(--spectrum-glo" + "bal-color-blue-600)",
|
||||
primaryColorHover: "var(--spectrum-glo" + "bal-color-blue-500)",
|
||||
|
@ -27,7 +26,7 @@ const createThemeStore = () => {
|
|||
}
|
||||
|
||||
// Ensure theme is set
|
||||
theme = theme || defaultTheme
|
||||
theme = ensureValidTheme(theme, DefaultAppTheme)
|
||||
|
||||
// Delete and nullish keys from the custom theme
|
||||
if (customTheme) {
|
||||
|
@ -52,7 +51,6 @@ const createThemeStore = () => {
|
|||
|
||||
return {
|
||||
theme,
|
||||
baseTheme: getBaseTheme(theme),
|
||||
customTheme,
|
||||
customThemeCss,
|
||||
}
|
||||
|
|
|
@ -108,35 +108,6 @@ export const Roles = {
|
|||
CREATOR: "CREATOR",
|
||||
}
|
||||
|
||||
export const Themes = [
|
||||
{
|
||||
class: "lightest",
|
||||
name: "Lightest",
|
||||
},
|
||||
{
|
||||
class: "light",
|
||||
name: "Light",
|
||||
},
|
||||
{
|
||||
class: "dark",
|
||||
name: "Dark",
|
||||
},
|
||||
{
|
||||
class: "darkest",
|
||||
name: "Darkest",
|
||||
},
|
||||
{
|
||||
class: "nord",
|
||||
name: "Nord",
|
||||
base: "darkest",
|
||||
},
|
||||
{
|
||||
class: "midnight",
|
||||
name: "Midnight",
|
||||
base: "darkest",
|
||||
},
|
||||
]
|
||||
|
||||
export const EventPublishType = {
|
||||
ENV_VAR_UPGRADE_PANEL_OPENED: "environment_variable_upgrade_panel_opened",
|
||||
}
|
||||
|
|
|
@ -9,7 +9,6 @@ export * as SchemaUtils from "./schema"
|
|||
export { memo, derivedMemo } from "./memo"
|
||||
export { createWebsocket } from "./websocket"
|
||||
export * from "./download"
|
||||
export * from "./theme"
|
||||
export * from "./settings"
|
||||
export * from "./relatedColumns"
|
||||
export * from "./table"
|
||||
|
|
|
@ -1,12 +0,0 @@
|
|||
import { Themes } from "../constants.js"
|
||||
|
||||
export const getBaseTheme = theme => {
|
||||
if (!theme) {
|
||||
return ""
|
||||
}
|
||||
let base = Themes.find(x => `spectrum--${x.class}` === theme)?.base || ""
|
||||
if (base) {
|
||||
base = `spectrum--${base}`
|
||||
}
|
||||
return base
|
||||
}
|
|
@ -63,7 +63,7 @@ import {
|
|||
import { BASE_LAYOUT_PROP_IDS } from "../../constants/layouts"
|
||||
import sdk from "../../sdk"
|
||||
import { builderSocket } from "../../websockets"
|
||||
import { sdk as sharedCoreSDK } from "@budibase/shared-core"
|
||||
import { DefaultAppTheme, sdk as sharedCoreSDK } from "@budibase/shared-core"
|
||||
import * as appMigrations from "../../appMigrations"
|
||||
|
||||
// utility function, need to do away with this
|
||||
|
@ -302,7 +302,7 @@ async function performAppCreate(ctx: UserCtx<CreateAppRequest, App>) {
|
|||
navBackground: "var(--spectrum-global-color-gray-100)",
|
||||
links: [],
|
||||
},
|
||||
theme: "spectrum--light",
|
||||
theme: DefaultAppTheme,
|
||||
customTheme: {
|
||||
buttonBorderRadius: "16px",
|
||||
},
|
||||
|
|
|
@ -1,5 +1,9 @@
|
|||
export const getThemeVariables = (theme: string) => {
|
||||
if (theme === "spectrum--lightest") {
|
||||
import { ensureValidTheme } from "@budibase/shared-core"
|
||||
import { Theme } from "@budibase/types"
|
||||
|
||||
export const getThemeVariables = (theme: Theme) => {
|
||||
theme = ensureValidTheme(theme, Theme.LIGHT)
|
||||
if (theme === Theme.LIGHTEST) {
|
||||
return `
|
||||
--spectrum-global-color-gray-50: rgb(255, 255, 255);
|
||||
--spectrum-global-color-gray-200: rgb(244, 244, 244);
|
||||
|
@ -7,16 +11,15 @@ export const getThemeVariables = (theme: string) => {
|
|||
--spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50);
|
||||
`
|
||||
}
|
||||
if (theme === "spectrum--light") {
|
||||
if (theme === Theme.LIGHT) {
|
||||
return `
|
||||
--spectrum-global-color-gray-50: rgb(255, 255, 255);
|
||||
--spectrum-global-color-gray-200: rgb(234, 234, 234);
|
||||
--spectrum-global-color-gray-300: rgb(225, 225, 225);
|
||||
--spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50);
|
||||
|
||||
`
|
||||
}
|
||||
if (theme === "spectrum--dark") {
|
||||
if (theme === Theme.DARK) {
|
||||
return `
|
||||
--spectrum-global-color-gray-100: rgb(50, 50, 50);
|
||||
--spectrum-global-color-gray-200: rgb(62, 62, 62);
|
||||
|
@ -24,7 +27,7 @@ export const getThemeVariables = (theme: string) => {
|
|||
--spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
|
||||
`
|
||||
}
|
||||
if (theme === "spectrum--darkest") {
|
||||
if (theme === Theme.DARKEST) {
|
||||
return `
|
||||
--spectrum-global-color-gray-100: rgb(30, 30, 30);
|
||||
--spectrum-global-color-gray-200: rgb(44, 44, 44);
|
||||
|
@ -32,7 +35,7 @@ export const getThemeVariables = (theme: string) => {
|
|||
--spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
|
||||
`
|
||||
}
|
||||
if (theme === "spectrum--nord") {
|
||||
if (theme === Theme.NORD) {
|
||||
return `
|
||||
--spectrum-global-color-gray-100: #3b4252;
|
||||
|
||||
|
@ -41,7 +44,7 @@ export const getThemeVariables = (theme: string) => {
|
|||
--spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
|
||||
`
|
||||
}
|
||||
if (theme === "spectrum--midnight") {
|
||||
if (theme === Theme.MIDNIGHT) {
|
||||
return `
|
||||
--hue: 220;
|
||||
--sat: 10%;
|
||||
|
|
|
@ -3,6 +3,7 @@ export * from "./api"
|
|||
export * from "./fields"
|
||||
export * from "./rows"
|
||||
export * from "./colors"
|
||||
export * from "./themes"
|
||||
|
||||
export const OperatorOptions = {
|
||||
Equals: {
|
||||
|
|
|
@ -0,0 +1,28 @@
|
|||
import { ThemeMeta, Theme } from "@budibase/types"
|
||||
|
||||
export const ThemeClassPrefix = "spectrum--"
|
||||
export const DefaultBuilderTheme = Theme.DARKEST
|
||||
export const DefaultAppTheme = Theme.LIGHT
|
||||
|
||||
// Currently available theme options for builder and apps
|
||||
export const ThemeOptions: ThemeMeta[] = [
|
||||
{
|
||||
id: Theme.LIGHT,
|
||||
name: "Light",
|
||||
},
|
||||
{
|
||||
// We call this dark for simplicity, but we want to use the spectrum darkest style
|
||||
id: Theme.DARKEST,
|
||||
name: "Dark",
|
||||
},
|
||||
{
|
||||
id: Theme.NORD,
|
||||
name: "Nord",
|
||||
base: Theme.DARKEST,
|
||||
},
|
||||
{
|
||||
id: Theme.MIDNIGHT,
|
||||
name: "Midnight",
|
||||
base: Theme.DARKEST,
|
||||
},
|
||||
]
|
|
@ -4,3 +4,4 @@ export * as helpers from "./helpers"
|
|||
export * as utils from "./utils"
|
||||
export * as sdk from "./sdk"
|
||||
export * from "./table"
|
||||
export * from "./themes"
|
||||
|
|
|
@ -0,0 +1,28 @@
|
|||
import { getThemeClassNames, ensureValidTheme } from "../themes"
|
||||
import { Theme } from "@budibase/types"
|
||||
|
||||
describe("theme class names", () => {
|
||||
it("generates class names for a theme without base theme", () => {
|
||||
expect(getThemeClassNames(Theme.LIGHT)).toStrictEqual("spectrum--light")
|
||||
})
|
||||
it("generates class names for a theme with base theme", () => {
|
||||
expect(getThemeClassNames(Theme.NORD)).toStrictEqual(
|
||||
"spectrum--darkest spectrum--nord"
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe("theme validity checking", () => {
|
||||
it("handles no theme", () => {
|
||||
expect(ensureValidTheme(undefined)).toStrictEqual(Theme.DARKEST)
|
||||
})
|
||||
it("allows specifiying a fallback", () => {
|
||||
expect(ensureValidTheme(undefined, Theme.NORD)).toStrictEqual(Theme.NORD)
|
||||
})
|
||||
it("migrates lightest to light", () => {
|
||||
expect(ensureValidTheme(Theme.LIGHTEST)).toStrictEqual(Theme.LIGHT)
|
||||
})
|
||||
it("migrates dark to darkest", () => {
|
||||
expect(ensureValidTheme(Theme.DARK)).toStrictEqual(Theme.DARKEST)
|
||||
})
|
||||
})
|
|
@ -0,0 +1,44 @@
|
|||
import { ThemeOptions, ThemeClassPrefix } from "./constants/themes"
|
||||
import { Theme } from "@budibase/types"
|
||||
|
||||
// Gets the CSS class names for the specified theme
|
||||
export const getThemeClassNames = (theme: Theme): string => {
|
||||
theme = ensureValidTheme(theme)
|
||||
let classNames = `${ThemeClassPrefix}${theme}`
|
||||
|
||||
// Prefix with base class if required
|
||||
const base = ThemeOptions.find(x => x.id === theme)?.base
|
||||
if (base) {
|
||||
classNames = `${ThemeClassPrefix}${base} ${classNames}`
|
||||
}
|
||||
|
||||
return classNames
|
||||
}
|
||||
|
||||
// Ensures a theme value is a valid option
|
||||
export const ensureValidTheme = (
|
||||
theme?: Theme,
|
||||
fallback: Theme = Theme.DARKEST
|
||||
): Theme => {
|
||||
if (!theme) {
|
||||
return fallback
|
||||
}
|
||||
|
||||
// Ensure we aren't using the spectrum prefix
|
||||
if (theme.startsWith(ThemeClassPrefix)) {
|
||||
theme = theme.split(ThemeClassPrefix)[1] as Theme
|
||||
}
|
||||
|
||||
// Check we aren't using a deprecated theme, and migrate
|
||||
// to the nearest valid theme if we are
|
||||
if (!ThemeOptions.some(x => x.id === theme)) {
|
||||
if (theme === Theme.LIGHTEST) {
|
||||
return Theme.LIGHT
|
||||
} else if (theme === Theme.DARK) {
|
||||
return Theme.DARKEST
|
||||
} else {
|
||||
return fallback
|
||||
}
|
||||
}
|
||||
return theme
|
||||
}
|
|
@ -17,3 +17,4 @@ export * from "./component"
|
|||
export * from "./sqlite"
|
||||
export * from "./snippet"
|
||||
export * from "./rowAction"
|
||||
export * from "./theme"
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
export enum Theme {
|
||||
LIGHTEST = "lightest",
|
||||
LIGHT = "light",
|
||||
DARK = "dark",
|
||||
DARKEST = "darkest",
|
||||
NORD = "nord",
|
||||
MIDNIGHT = "midnight",
|
||||
}
|
||||
|
||||
export type ThemeMeta = {
|
||||
id: string
|
||||
name: string
|
||||
base?: Theme
|
||||
}
|
Loading…
Reference in New Issue