Gradio dark theme

This commit is contained in:
space-nuko
2023-05-12 11:22:35 -05:00
parent 34c18dea90
commit 3bf774ba0c
11 changed files with 735 additions and 492 deletions

View File

@@ -7,8 +7,33 @@ body {
overscroll-behavior-y: contain;
}
#app {
background: var(--body-background-fill);
}
:root {
--color-blue-500: #3985f5;
--comfy-splitpanes-background-fill: var(--secondary-100);
--comfy-splitpanes-background-fill-hover: var(--secondary-300);
--comfy-splitpanes-background-fill-active: var(--secondary-400);
--comfy-dropdown-item-color-hover: white;
--comfy-dropdown-item-background-hover: var(--neutral-400);
--comfy-dropdown-item-color-active: var(--neutral-100);
--comfy-dropdown-item-background-active: var(--secondary-600);
}
.dark {
color-scheme: dark;
--comfy-splitpanes-background-fill: var(--panel-border-color);
--comfy-splitpanes-background-fill-hover: var(--secondary-500);
--comfy-splitpanes-background-fill-active: var(--secondary-300);
--comfy-dropdown-list-background: var(--neutral-800);
--comfy-dropdown-item-color-hover: var(--neutral-400);
--comfy-dropdown-item-background-hover: var(--neutral-600);
--comfy-dropdown-item-background-active: var(--secondary-600);
--comfy-dropdown-border-color: var(--neutral-600);
}
@mixin disable-input {
@@ -18,3 +43,48 @@ body {
box-shadow: 0 0 0 var(--shadow-spread) transparent, rgba(0, 0, 0, 0.08) 0px 2px 4px 0px inset;
cursor: not-allowed;
}
select {
color: var(--body-text-color);
background: var(--block-background-fill);
}
.container {
background: var(--body-background-fill) !important;
&.selected {
background: var(--ae-primary-color) !important;
> .block.padded {
background: var(--ae-primary-color) !important;
}
}
> .block {
background: var(--body-background-fill) !important;
// border-radius: var(--ae-panel-border-radius) !important;
}
&.z-index0 {
> .block {
background: var(--panel-background-fill) !important;
}
}
// &:not(.edit) {
// &.z-index1 > .block {
// padding: calc(var(--ae-outside-gap-size) / 2) !important;
// border-width: 0px !important;
// }
// > .block {
// border: solid var(--ae-panel-border-width) var(--ae-panel-border-color) !important;
// }
// }
}
.widget {
// padding: var(--ae-outside-gap-size);
// border: 1px solid var(--ae-panel-border-color);
.block {
// background: var(--ae-frame-bg-color) !important;
background: var(--block-background-fill) !important;
}
}