Skip to content

Commit

Permalink
Add docs for themes, remove experimental tab, rebuild frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
@Stax124
Stax124 committed Oct 27, 2023
1 parent c7d1497 commit 65dcde3
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 79 deletions.
1 change: 1 addition & 0 deletions docs/.vitepress/config.mts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export default defineConfig({
{
text: "WebUI",
items: [
{ text: "Themes", link: "/webui/themes" },
{ text: "Image to Image", link: "/webui/img2img" },
{ text: "Downloading Models", link: "/webui/download" },
{ text: "Image browser", link: "/webui/imagebrowser" },
Expand Down
54 changes: 54 additions & 0 deletions docs/webui/themes.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# Themes

Volta includes 4 themes as of the time of writing:

- Dark (_default_)
- Dark Flat
- Light
- Light Flat

Dark and Light have neon-ish vibes, while Flat themes are more minimalistic and lack a background.

## Changing the theme

Theme can be changed on the settings page: `Settings > Theme > Theme`

## Importing themes

Any themes that you download should be placed in the `data/themes` directory and they should be picked up automatically (refresh the UI page for them to show up there).

## Creating a theme

I would recommend setting `Settings > Theme > Enable Theme Editor` to `true` to make the process of creating a theme easier.
This should enable the theme editor inside the UI, you should be able to see it in the bottom right corner of the screen.

Changes are cached, so I would recommend pressing the `Clear All Variables` button first to just be sure.

Now, you can start changing the variables and see the changes in real time. Once you are happy with the result, you can press the `Export` button and save the theme to a file.

Then, open either `data/themes/dark.json` or `data/themes/light.json` and copy the `volta` object to your theme file.

```json{3-7}
{
// Feel free to change these settings once you copy them!
"volta": {
"base": "dark",
"blur": "6px",
"backgroundImage": "https://raw.githubusercontent.com/VoltaML/voltaML-fast-stable-diffusion/2cf7a8abf1e5035a0dc57a67cd13505653c492f6/static/volta-dark-background.svg"
},
"common": {
"fontSize": "15px",
"fontWeight": "600"
},
"Card": {
"color": "rgba(24, 24, 28, 0.6)"
},
"Layout": {
"color": "rgba(16, 16, 20, 0.6)",
"siderColor": "rgba(24, 24, 28, 0)"
},
"Tabs": {
"colorSegment": "rgba(24, 24, 28, 0.6)"
}
}
```
109 changes: 36 additions & 73 deletions frontend/dist/assets/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1552,7 +1552,7 @@ function renderComponentRoot(instance) {
slots,
attrs,
emit: emit2,
render: render16,
render: render15,
renderCache,
data,
setupState,
Expand All @@ -1566,7 +1566,7 @@ function renderComponentRoot(instance) {
if (vnode.shapeFlag & 4) {
const proxyToUse = withProxy || proxy;
result = normalizeVNode(
render16.call(
render15.call(
proxyToUse,
proxyToUse,
renderCache,
Expand Down Expand Up @@ -2668,7 +2668,7 @@ function applyOptions(instance) {
beforeUnmount,
destroyed,
unmounted,
render: render16,
render: render15,
renderTracked,
renderTriggered,
errorCaptured,
Expand Down Expand Up @@ -2767,8 +2767,8 @@ function applyOptions(instance) {
instance.exposed = {};
}
}
if (render16 && instance.render === NOOP) {
instance.render = render16;
if (render15 && instance.render === NOOP) {
instance.render = render15;
}
if (inheritAttrs != null) {
instance.inheritAttrs = inheritAttrs;
Expand Down Expand Up @@ -3000,7 +3000,7 @@ function createAppContext() {
};
}
let uid$1 = 0;
function createAppAPI(render16, hydrate) {
function createAppAPI(render15, hydrate) {
return function createApp2(rootComponent, rootProps = null) {
if (!isFunction$2(rootComponent)) {
rootComponent = extend({}, rootComponent);
Expand Down Expand Up @@ -3069,7 +3069,7 @@ function createAppAPI(render16, hydrate) {
if (isHydrate && hydrate) {
hydrate(vnode, rootContainer);
} else {
render16(vnode, rootContainer, isSVG2);
render15(vnode, rootContainer, isSVG2);
}
isMounted2 = true;
app2._container = rootContainer;
Expand All @@ -3079,7 +3079,7 @@ function createAppAPI(render16, hydrate) {
},
unmount() {
if (isMounted2) {
render16(null, app2._container);
render15(null, app2._container);
delete app2._container.__vue_app__;
}
},
Expand Down Expand Up @@ -4794,7 +4794,7 @@ function baseCreateRenderer(options, createHydrationFns) {
}
return hostNextSibling(vnode.anchor || vnode.el);
};
const render16 = (vnode, container, isSVG2) => {
const render15 = (vnode, container, isSVG2) => {
if (vnode == null) {
if (container._vnode) {
unmount2(container._vnode, null, null, true);
Expand Down Expand Up @@ -4826,9 +4826,9 @@ function baseCreateRenderer(options, createHydrationFns) {
);
}
return {
render: render16,
render: render15,
hydrate,
createApp: createAppAPI(render16, hydrate)
createApp: createAppAPI(render15, hydrate)
};
}
function toggleRecurse({ effect, update }, allowed) {
Expand Down Expand Up @@ -27556,8 +27556,8 @@ const NDropdownRenderOption = defineComponent({
}
},
render() {
const { rawNode: { render: render16, props } } = this.tmNode;
return h("div", props, [render16 === null || render16 === void 0 ? void 0 : render16()]);
const { rawNode: { render: render15, props } } = this.tmNode;
return h("div", props, [render15 === null || render15 === void 0 ? void 0 : render15()]);
}
});
const NDropdownMenu = defineComponent({
Expand Down Expand Up @@ -37770,12 +37770,12 @@ const NThemeEditor = defineComponent({
});
}
});
const _hoisted_1$i = {
const _hoisted_1$h = {
xmlns: "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink",
viewBox: "0 0 512 512"
};
const _hoisted_2$g = /* @__PURE__ */ createBaseVNode(
const _hoisted_2$f = /* @__PURE__ */ createBaseVNode(
"path",
{
d: "M368 96H144a16 16 0 0 1 0-32h224a16 16 0 0 1 0 32z",
Expand All @@ -37785,7 +37785,7 @@ const _hoisted_2$g = /* @__PURE__ */ createBaseVNode(
-1
/* HOISTED */
);
const _hoisted_3$f = /* @__PURE__ */ createBaseVNode(
const _hoisted_3$e = /* @__PURE__ */ createBaseVNode(
"path",
{
d: "M400 144H112a16 16 0 0 1 0-32h288a16 16 0 0 1 0 32z",
Expand All @@ -37795,7 +37795,7 @@ const _hoisted_3$f = /* @__PURE__ */ createBaseVNode(
-1
/* HOISTED */
);
const _hoisted_4$c = /* @__PURE__ */ createBaseVNode(
const _hoisted_4$b = /* @__PURE__ */ createBaseVNode(
"path",
{
d: "M419.13 448H92.87A44.92 44.92 0 0 1 48 403.13V204.87A44.92 44.92 0 0 1 92.87 160h326.26A44.92 44.92 0 0 1 464 204.87v198.26A44.92 44.92 0 0 1 419.13 448z",
Expand All @@ -37805,48 +37805,11 @@ const _hoisted_4$c = /* @__PURE__ */ createBaseVNode(
-1
/* HOISTED */
);
const _hoisted_5$7 = [_hoisted_2$g, _hoisted_3$f, _hoisted_4$c];
const _hoisted_5$7 = [_hoisted_2$f, _hoisted_3$e, _hoisted_4$b];
const Albums = defineComponent({
name: "Albums",
render: function render2(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$i, _hoisted_5$7);
}
});
const _hoisted_1$h = {
xmlns: "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink",
viewBox: "0 0 512 512"
};
const _hoisted_2$f = /* @__PURE__ */ createBaseVNode(
"path",
{
d: "M64 164v244a56 56 0 0 0 56 56h272a56 56 0 0 0 56-56V164a4 4 0 0 0-4-4H68a4 4 0 0 0-4 4zm267 151.63l-63.69 63.68a16 16 0 0 1-22.62 0L181 315.63c-6.09-6.09-6.65-16-.85-22.38a16 16 0 0 1 23.16-.56L240 329.37V224.45c0-8.61 6.62-16 15.23-16.43A16 16 0 0 1 272 224v105.37l36.69-36.68a16 16 0 0 1 23.16.56c5.8 6.37 5.24 16.29-.85 22.38z",
fill: "currentColor"
},
null,
-1
/* HOISTED */
);
const _hoisted_3$e = /* @__PURE__ */ createBaseVNode(
"rect",
{
x: "32",
y: "48",
width: "448",
height: "80",
rx: "32",
ry: "32",
fill: "currentColor"
},
null,
-1
/* HOISTED */
);
const _hoisted_4$b = [_hoisted_2$f, _hoisted_3$e];
const Archive = defineComponent({
name: "Archive",
render: function render3(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$h, _hoisted_4$b);
return openBlock(), createElementBlock("svg", _hoisted_1$h, _hoisted_5$7);
}
});
const _hoisted_1$g = {
Expand Down Expand Up @@ -37887,7 +37850,7 @@ const _hoisted_4$a = /* @__PURE__ */ createBaseVNode(
const _hoisted_5$6 = [_hoisted_2$e, _hoisted_3$d, _hoisted_4$a];
const Create = defineComponent({
name: "Create",
render: function render4(_ctx, _cache) {
render: function render3(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$g, _hoisted_5$6);
}
});
Expand Down Expand Up @@ -37929,7 +37892,7 @@ const _hoisted_4$9 = /* @__PURE__ */ createBaseVNode(
const _hoisted_5$5 = [_hoisted_2$d, _hoisted_3$c, _hoisted_4$9];
const Cube = defineComponent({
name: "Cube",
render: function render5(_ctx, _cache) {
render: function render4(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$f, _hoisted_5$5);
}
});
Expand Down Expand Up @@ -37961,7 +37924,7 @@ const _hoisted_3$b = /* @__PURE__ */ createBaseVNode(
const _hoisted_4$8 = [_hoisted_2$c, _hoisted_3$b];
const DocumentText = defineComponent({
name: "DocumentText",
render: function render6(_ctx, _cache) {
render: function render5(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$e, _hoisted_4$8);
}
});
Expand Down Expand Up @@ -37993,7 +37956,7 @@ const _hoisted_3$a = /* @__PURE__ */ createBaseVNode(
const _hoisted_4$7 = [_hoisted_2$b, _hoisted_3$a];
const Duplicate = defineComponent({
name: "Duplicate",
render: function render7(_ctx, _cache) {
render: function render6(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$d, _hoisted_4$7);
}
});
Expand All @@ -38015,7 +37978,7 @@ const _hoisted_2$a = /* @__PURE__ */ createBaseVNode(
const _hoisted_3$9 = [_hoisted_2$a];
const Image$1 = defineComponent({
name: "Image",
render: function render8(_ctx, _cache) {
render: function render7(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$c, _hoisted_3$9);
}
});
Expand Down Expand Up @@ -38047,7 +38010,7 @@ const _hoisted_3$8 = /* @__PURE__ */ createBaseVNode(
const _hoisted_4$6 = [_hoisted_2$9, _hoisted_3$8];
const Images = defineComponent({
name: "Images",
render: function render9(_ctx, _cache) {
render: function render8(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$b, _hoisted_4$6);
}
});
Expand Down Expand Up @@ -38079,7 +38042,7 @@ const _hoisted_3$7 = /* @__PURE__ */ createBaseVNode(
const _hoisted_4$5 = [_hoisted_2$8, _hoisted_3$7];
const PowerSharp = defineComponent({
name: "PowerSharp",
render: function render10(_ctx, _cache) {
render: function render9(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$a, _hoisted_4$5);
}
});
Expand All @@ -38101,7 +38064,7 @@ const _hoisted_2$7 = /* @__PURE__ */ createBaseVNode(
const _hoisted_3$6 = [_hoisted_2$7];
const SettingsSharp = defineComponent({
name: "SettingsSharp",
render: function render11(_ctx, _cache) {
render: function render10(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$9, _hoisted_3$6);
}
});
Expand All @@ -38123,7 +38086,7 @@ const _hoisted_2$6 = /* @__PURE__ */ createBaseVNode(
const _hoisted_3$5 = [_hoisted_2$6];
const Speedometer = defineComponent({
name: "Speedometer",
render: function render12(_ctx, _cache) {
render: function render11(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$8, _hoisted_3$5);
}
});
Expand Down Expand Up @@ -38175,7 +38138,7 @@ const _hoisted_5$4 = /* @__PURE__ */ createBaseVNode(
const _hoisted_6$2 = [_hoisted_2$5, _hoisted_3$4, _hoisted_4$4, _hoisted_5$4];
const StatsChart = defineComponent({
name: "StatsChart",
render: function render13(_ctx, _cache) {
render: function render12(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$7, _hoisted_6$2);
}
});
Expand Down Expand Up @@ -38229,7 +38192,7 @@ const _hoisted_4$3 = /* @__PURE__ */ createBaseVNode(
const _hoisted_5$3 = [_hoisted_2$4, _hoisted_3$3, _hoisted_4$3];
const SyncSharp = defineComponent({
name: "SyncSharp",
render: function render14(_ctx, _cache) {
render: function render13(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$6, _hoisted_5$3);
}
});
Expand Down Expand Up @@ -38283,7 +38246,7 @@ const _hoisted_5$2 = /* @__PURE__ */ createBaseVNode(
const _hoisted_6$1 = [_hoisted_2$3, _hoisted_3$2, _hoisted_4$2, _hoisted_5$2];
const Wifi = defineComponent({
name: "Wifi",
render: function render15(_ctx, _cache) {
render: function render14(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$5, _hoisted_6$1);
}
});
Expand Down Expand Up @@ -40136,11 +40099,11 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
key: "plugins",
icon: renderIcon(Speedometer)
},
{
label: () => h(RouterLink, { to: "/extra" }, { default: () => "Extra" }),
key: "extra",
icon: renderIcon(Archive)
},
// {
// label: () => h(RouterLink, { to: "/extra" }, { default: () => "Extra" }),
// key: "extra",
// icon: renderIcon(Archive),
// },
{
label: () => h(RouterLink, { to: "/settings" }, { default: () => "Settings" }),
key: "settings",
Expand Down
11 changes: 5 additions & 6 deletions frontend/src/components/CollapsibleNavbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@
<script lang="ts" setup>
import {
Albums,
Archive,
Create,
Cube,
Duplicate,
Expand Down Expand Up @@ -106,11 +105,11 @@ const menuOptionsMain: MenuOption[] = [
key: "plugins",
icon: renderIcon(Speedometer),
},
{
label: () => h(RouterLink, { to: "/extra" }, { default: () => "Extra" }),
key: "extra",
icon: renderIcon(Archive),
},
// {
// label: () => h(RouterLink, { to: "/extra" }, { default: () => "Extra" }),
// key: "extra",
// icon: renderIcon(Archive),
// },
{
label: () =>
h(RouterLink, { to: "/settings" }, { default: () => "Settings" }),
Expand Down

0 comments on commit 65dcde3

Please sign in to comment.