feat: add dark mode support
This commit is contained in:
BHznJNs
parent
1d024dcb55
commit
be1c875222
@ -62,6 +62,12 @@ var gantt = new Gantt("#gantt", tasks, {
|
||||
});
|
||||
```
|
||||
|
||||
You can add `dark` class to the container element to apply dark theme.
|
||||
|
||||
```html
|
||||
<div class="gantt-target dark"></div>
|
||||
```
|
||||
|
||||
### Contributing
|
||||
If you want to contribute enhancements or fixes:
|
||||
|
||||
|
||||
68
dist/frappe-gantt.css
vendored
68
dist/frappe-gantt.css
vendored
@ -1,3 +1,71 @@
|
||||
.dark > .gantt-container .gantt .grid-header {
|
||||
fill: #252525;
|
||||
stroke: #616161;
|
||||
}
|
||||
.dark > .gantt-container .gantt .grid-row {
|
||||
fill: #252525;
|
||||
}
|
||||
.dark > .gantt-container .gantt .grid-row:nth-child(even) {
|
||||
fill: #3e3e3e;
|
||||
}
|
||||
.dark > .gantt-container .gantt .row-line {
|
||||
stroke: #3e3e3e;
|
||||
}
|
||||
.dark > .gantt-container .gantt .tick {
|
||||
stroke: #616161;
|
||||
}
|
||||
.dark > .gantt-container .gantt .today-highlight {
|
||||
opacity: 0.2;
|
||||
}
|
||||
.dark > .gantt-container .gantt .arrow {
|
||||
stroke: #eee;
|
||||
}
|
||||
.dark > .gantt-container .gantt .bar {
|
||||
fill: #616161;
|
||||
stroke: none;
|
||||
}
|
||||
.dark > .gantt-container .gantt .bar-progress {
|
||||
fill: #8a8aff;
|
||||
}
|
||||
.dark > .gantt-container .gantt .bar-invalid {
|
||||
fill: transparent;
|
||||
stroke: #c6ccd2;
|
||||
}
|
||||
.dark > .gantt-container .gantt .bar-invalid ~ .bar-label {
|
||||
fill: #ececec;
|
||||
}
|
||||
.dark > .gantt-container .gantt .bar-label.big {
|
||||
fill: #ececec;
|
||||
}
|
||||
.dark > .gantt-container .gantt .bar-wrapper:hover .bar {
|
||||
fill: #6e6e6e;
|
||||
}
|
||||
.dark > .gantt-container .gantt .bar-wrapper:hover .bar-progress {
|
||||
fill: #a4a4ff;
|
||||
}
|
||||
.dark > .gantt-container .gantt .bar-wrapper.active .bar {
|
||||
fill: #6e6e6e;
|
||||
}
|
||||
.dark > .gantt-container .gantt .bar-wrapper.active .bar-progress {
|
||||
fill: #a4a4ff;
|
||||
}
|
||||
.dark > .gantt-container .gantt .upper-text {
|
||||
fill: #a2a2a2;
|
||||
}
|
||||
.dark > .gantt-container .gantt .lower-text {
|
||||
fill: #f7f7f7;
|
||||
}
|
||||
|
||||
.dark > .gantt-container .popup-wrapper {
|
||||
background-color: #333;
|
||||
}
|
||||
.dark > .gantt-container .popup-wrapper .title {
|
||||
border-color: #a4a4ff;
|
||||
}
|
||||
.dark > .gantt-container .popup-wrapper .pointer {
|
||||
border-top-color: #333;
|
||||
}
|
||||
|
||||
.gantt .grid-background {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
2
dist/frappe-gantt.js.map
vendored
2
dist/frappe-gantt.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-gantt.min.css
vendored
2
dist/frappe-gantt.min.css
vendored
@ -1 +1 @@
|
||||
.gantt .grid-background{fill:none}.gantt .grid-header{fill:#fff;stroke:#e0e0e0;stroke-width:1.4}.gantt .grid-row{fill:#fff}.gantt .grid-row:nth-child(even){fill:#f5f5f5}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#e0e0e0;stroke-width:.2}.gantt .tick.thick{stroke-width:.4}.gantt .today-highlight{fill:#fcf8e3;opacity:.5}.gantt .arrow{fill:none;stroke:#666;stroke-width:1.4}.gantt .bar{fill:#b8c2cc;stroke:#8d99a6;stroke-width:0;transition:stroke-width .3s ease;user-select:none}.gantt .bar-progress{fill:#a3a3ff}.gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#8d99a6;stroke-width:1;stroke-dasharray:5}.gantt .bar-invalid~.bar-label{fill:#555}.gantt .bar-label{fill:#fff;dominant-baseline:central;text-anchor:middle;font-size:12px;font-weight:lighter}.gantt .bar-label.big{fill:#555;text-anchor:start}.gantt .handle{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden;transition:opacity .3s ease}.gantt .bar-wrapper{cursor:pointer;outline:none}.gantt .bar-wrapper:hover .bar{fill:#a9b5c1}.gantt .bar-wrapper:hover .bar-progress{fill:#8a8aff}.gantt .bar-wrapper:hover .handle{visibility:visible;opacity:1}.gantt .bar-wrapper.active .bar{fill:#a9b5c1}.gantt .bar-wrapper.active .bar-progress{fill:#8a8aff}.gantt .lower-text,.gantt .upper-text{font-size:12px;text-anchor:middle}.gantt .upper-text{fill:#555}.gantt .lower-text{fill:#333}.gantt .hide{display:none}.gantt-container{position:relative;overflow:auto;font-size:12px}.gantt-container .popup-wrapper{position:absolute;top:0;left:0;background:rgba(0,0,0,.8);padding:0;color:#959da5;border-radius:3px}.gantt-container .popup-wrapper .title{border-bottom:3px solid #a3a3ff;padding:10px}.gantt-container .popup-wrapper .subtitle{padding:10px;color:#dfe2e5}.gantt-container .popup-wrapper .pointer{position:absolute;height:5px;margin:0 0 0 -5px;border:5px solid rgba(0,0,0,0);border-top-color:rgba(0,0,0,.8)}
|
||||
.dark>.gantt-container .gantt .grid-header{fill:#252525;stroke:#616161}.dark>.gantt-container .gantt .grid-row{fill:#252525}.dark>.gantt-container .gantt .grid-row:nth-child(even){fill:#3e3e3e}.dark>.gantt-container .gantt .row-line{stroke:#3e3e3e}.dark>.gantt-container .gantt .tick{stroke:#616161}.dark>.gantt-container .gantt .today-highlight{opacity:.2}.dark>.gantt-container .gantt .arrow{stroke:#eee}.dark>.gantt-container .gantt .bar{fill:#616161;stroke:none}.dark>.gantt-container .gantt .bar-progress{fill:#8a8aff}.dark>.gantt-container .gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#c6ccd2}.dark>.gantt-container .gantt .bar-invalid~.bar-label{fill:#ececec}.dark>.gantt-container .gantt .bar-label.big{fill:#ececec}.dark>.gantt-container .gantt .bar-wrapper:hover .bar{fill:#6e6e6e}.dark>.gantt-container .gantt .bar-wrapper:hover .bar-progress{fill:#a4a4ff}.dark>.gantt-container .gantt .bar-wrapper.active .bar{fill:#6e6e6e}.dark>.gantt-container .gantt .bar-wrapper.active .bar-progress{fill:#a4a4ff}.dark>.gantt-container .gantt .upper-text{fill:#a2a2a2}.dark>.gantt-container .gantt .lower-text{fill:#f7f7f7}.dark>.gantt-container .popup-wrapper{background-color:#333}.dark>.gantt-container .popup-wrapper .title{border-color:#a4a4ff}.dark>.gantt-container .popup-wrapper .pointer{border-top-color:#333}.gantt .grid-background{fill:none}.gantt .grid-header{fill:#fff;stroke:#e0e0e0;stroke-width:1.4}.gantt .grid-row{fill:#fff}.gantt .grid-row:nth-child(even){fill:#f5f5f5}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#e0e0e0;stroke-width:.2}.gantt .tick.thick{stroke-width:.4}.gantt .today-highlight{fill:#fcf8e3;opacity:.5}.gantt .arrow{fill:none;stroke:#666;stroke-width:1.4}.gantt .bar{fill:#b8c2cc;stroke:#8d99a6;stroke-width:0;transition:stroke-width .3s ease;user-select:none}.gantt .bar-progress{fill:#a3a3ff}.gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#8d99a6;stroke-width:1;stroke-dasharray:5}.gantt .bar-invalid~.bar-label{fill:#555}.gantt .bar-label{fill:#fff;dominant-baseline:central;text-anchor:middle;font-size:12px;font-weight:lighter}.gantt .bar-label.big{fill:#555;text-anchor:start}.gantt .handle{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden;transition:opacity .3s ease}.gantt .bar-wrapper{cursor:pointer;outline:none}.gantt .bar-wrapper:hover .bar{fill:#a9b5c1}.gantt .bar-wrapper:hover .bar-progress{fill:#8a8aff}.gantt .bar-wrapper:hover .handle{visibility:visible;opacity:1}.gantt .bar-wrapper.active .bar{fill:#a9b5c1}.gantt .bar-wrapper.active .bar-progress{fill:#8a8aff}.gantt .lower-text,.gantt .upper-text{font-size:12px;text-anchor:middle}.gantt .upper-text{fill:#555}.gantt .lower-text{fill:#333}.gantt .hide{display:none}.gantt-container{position:relative;overflow:auto;font-size:12px}.gantt-container .popup-wrapper{position:absolute;top:0;left:0;background:rgba(0,0,0,.8);padding:0;color:#959da5;border-radius:3px}.gantt-container .popup-wrapper .title{border-bottom:3px solid #a3a3ff;padding:10px}.gantt-container .popup-wrapper .subtitle{padding:10px;color:#dfe2e5}.gantt-container .popup-wrapper .pointer{position:absolute;height:5px;margin:0 0 0 -5px;border:5px solid rgba(0,0,0,0);border-top-color:rgba(0,0,0,.8)}
|
||||
2
dist/frappe-gantt.min.js.map
vendored
2
dist/frappe-gantt.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -19,6 +19,9 @@
|
||||
.heading {
|
||||
text-align: center;
|
||||
}
|
||||
.gantt-target.dark {
|
||||
background-color: #252525;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="dist/frappe-gantt.css" />
|
||||
<script src="dist/frappe-gantt.js"></script>
|
||||
|
||||
97
src/dark.scss
Normal file
97
src/dark.scss
Normal file
@ -0,0 +1,97 @@
|
||||
$bar-color-dark: #616161;
|
||||
$bar-stroke-dark: #c6ccd2;
|
||||
$border-color-dark: #616161;
|
||||
$light-bg-dark: #3e3e3e;
|
||||
$light-border-color-dark: #3e3e3e;
|
||||
$text-muted-dark: #eee;
|
||||
$text-light-dark: #ececec;
|
||||
$text-color-dark: #f7f7f7;
|
||||
$blue-dark: #8a8aff;
|
||||
|
||||
.dark > .gantt-container .gantt {
|
||||
.grid-header {
|
||||
fill: #252525;
|
||||
stroke: $border-color-dark;
|
||||
}
|
||||
.grid-row {
|
||||
fill: #252525;
|
||||
}
|
||||
.grid-row:nth-child(even) {
|
||||
fill: $light-bg-dark;
|
||||
}
|
||||
.row-line {
|
||||
stroke: $light-border-color-dark;
|
||||
}
|
||||
.tick {
|
||||
stroke: $border-color-dark;
|
||||
}
|
||||
.today-highlight {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
stroke: $text-muted-dark;
|
||||
}
|
||||
|
||||
.bar {
|
||||
fill: $bar-color-dark;
|
||||
stroke: none;
|
||||
}
|
||||
.bar-progress {
|
||||
fill: $blue-dark;
|
||||
}
|
||||
.bar-invalid {
|
||||
fill: transparent;
|
||||
stroke: $bar-stroke-dark;
|
||||
|
||||
&~.bar-label {
|
||||
fill: $text-light-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-label.big {
|
||||
fill: $text-light-dark;
|
||||
}
|
||||
|
||||
.bar-wrapper {
|
||||
&:hover {
|
||||
.bar {
|
||||
fill: lighten($bar-color-dark, 5);
|
||||
}
|
||||
|
||||
.bar-progress {
|
||||
fill: lighten($blue-dark, 5);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.bar {
|
||||
fill: lighten($bar-color-dark, 5);
|
||||
}
|
||||
|
||||
.bar-progress {
|
||||
fill: lighten($blue-dark, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upper-text {
|
||||
fill: #a2a2a2;
|
||||
}
|
||||
.lower-text {
|
||||
fill: $text-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.dark > .gantt-container {
|
||||
.popup-wrapper {
|
||||
background-color: #333;
|
||||
|
||||
.title {
|
||||
border-color: lighten($blue-dark, 5);;
|
||||
}
|
||||
.pointer {
|
||||
border-top-color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
@import "./dark.scss";
|
||||
|
||||
$bar-color: #b8c2cc !default;
|
||||
$bar-stroke: #8D99A6 !default;
|
||||
$border-color: #e0e0e0 !default;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user