Timeless Night is great, I thank the devs for building it! However I’ve always found the contrast between the very white text and dark background a bit harsh. Also the bright orange in form customisation.
If anyone is interested, below is a very minimally customised Timeless Night style sheet that addresses these things.
/home/bench/frappe/apps/frappe/frappe/public/scss/desk/dark.scss
Run bench build after updating dark.scss
[data-theme="dark"] {
--gray-50: #{$gray-50};
--gray-100: #f7fafc;
--gray-200: #edf2f7;
--gray-300: #c9d0d6;
--gray-400: #7a838c;
--gray-500: #575e66;
--gray-600: #434a52;
--gray-700: #242a30;
--gray-800: #1c2126;
--gray-900: #161a1f;
--shadow-sm: 0px 1px 2px rgba(17, 19, 20, 0.651), 0px 0px 4px rgba(20, 30, 39, 0.747);
// Type Colors
--text-muted: var(--gray-400);
--text-light: var(--gray-300);
--text-dark: var(--gray-900);
--text-color: #90949f;
--heading-color: #b2b7c5;
// SVG Colors
--icon-fill: transparent;
--icon-stroke: var(--gray-300);
// Error colors
--error-bg: var(--red-70);
--error-border: var(--red-400);
// Layout Colors
--bg-color: var(--gray-900);
--fg-color: var(--gray-800);
--navbar-bg: var(--gray-800);
--fg-hover-color: var(--gray-700);
--card-bg: var(--gray-800);
--disabled-text-color: var(--gray-400);
--disabled-control-bg: var(--gray-700);
--control-bg: var(--gray-700);
--control-bg-on-gray: var(--gray-800);
--awesomebar-focus-bg: var(--control-bg);
--awesomplete-hover-bg: var(--gray-700);
--modal-bg: var(--gray-700);
--toast-bg: var(--modal-bg);
--popover-bg: var(--bg-color);
// Button Colors
--btn-default-bg: var(--gray-700);
--btn-default-hover-bg: var(--gray-500);
// Background Text Color Pairs
--bg-blue: var(--blue-600);
--bg-light-blue: var(--blue-600);
--bg-dark-blue: var(--blue-900);
--bg-green: var(--green-800);
--bg-yellow: var(--yellow-700);
--bg-orange: var(--orange-700);
--bg-red: var(--red-600);
--bg-gray: var(--gray-400);
--bg-grey: var(--gray-400);
--bg-darkgrey: var(--gray-600);
--bg-dark-gray: var(--gray-600);
--bg-light-gray: var(--gray-700);
--bg-purple: var(--purple-700);
--bg-pink: var(--pink-700);
--bg-cyan: var(--cyan-800);
--text-on-blue: var(--blue-50);
--text-on-light-blue: var(--blue-50);
--text-on-dark-blue: var(--blue-300);
--text-on-green: var(--dark-green-50);
--text-on-yellow: var(--yellow-50);
--text-on-orange: var(--orange-100);
--text-on-red: var(--red-50);
--text-on-gray: var(--gray-50);
--text-on-grey: var(--gray-50);
--text-on-darkgrey: var(--gray-200);
--text-on-dark-gray: var(--gray-200);
--text-on-light-gray: var(--gray-100);
--text-on-purple: var(--purple-100);
--text-on-pink: var(--pink-100);
--text-on-cyan: var(--cyan-100);
// alert colors
--alert-text-danger: var(--red-300);
--alert-text-warning: var(--yellow-300);
--alert-text-info: var(--blue-300);
--alert-text-success: var(--green-300);
--alert-bg-danger: var(--red-900);
--alert-bg-warning: var(--yellow-900);
--alert-bg-info: var(--blue-900);
--alert-bg-success: var(--green-900);
--sidebar-select-color: var(--gray-800);
--scrollbar-thumb-color: var(--gray-600);
--scrollbar-track-color: var(--gray-700);
--shadow-inset: var(--fg-color);
--border-color: var(--gray-700);
--dark-border-color: var(--gray-600);
--table-border-color: var(--gray-600);
--highlight-color: var(--gray-700);
--yellow-highlight-color: var(--gray-800);
--btn-group-border-color: var(--gray-800);
--field-placeholder-color: var(--gray-700);
--highlight-shadow: 1px 1px 10px var(--blue-900), 0px 0px 4px var(--blue-500);
--shadow-base: 0px 4px 8px rgba(114, 176, 233, 0.06), 0px 0px 4px rgba(112, 172, 228, 0.12);
// "diff" colors
--diff-added: var(--green-800);
--diff-removed: var(--red-800);
// input
--input-disabled-bg: none;
// checkbox
--checkbox-focus-shadow: 0 0 0 2px var(--gray-600);
color-scheme: dark;
.datatable {
--dt-orange: var(--blue-300);
}
.frappe-card {
.btn-default {
background-color: var(--bg-color);
&:hover {
background-color: var(--fg-hover-color);
}
}
}
.modal,
.form-in-grid {
--control-bg: var(--gray-800);
--border-color: var(--gray-600);
}
.print-format {
--text-color: var(--gray-900);
--border-color: var(--gray-100);
}
.ql-editor {
color: var(--text-on-gray);
&.read-mode {
span:not(.mention),
p,
u,
strong {
background-color: inherit !important;
color: inherit !important;
}
}
}
// --appreciation-color: var(--dark-green-100);
// --appreciation-bg: var(--dark-green-600);
// --criticism-color: var(--red-100);
// --criticism-bg: var(--red-600);
// Frappe Charts Colors
.chart-container {
--charts-label-color: var(--gray-300);
--charts-axis-line-color: var(--gray-500);
--charts-stroke-width: 5px;
--charts-dataset-circle-stroke: #ffffff;
--charts-dataset-circle-stroke-width: var(--charts-stroke-width);
--charts-tooltip-title: var(--charts-label-color);
--charts-tooltip-label: var(--charts-label-color);
--charts-tooltip-value: white;
--charts-tooltip-bg: var(--gray-900);
--charts-legend-label: var(--charts-label-color);
}
// find better fix
.heatmap-chart {
g > rect[fill="#ebedf0"] {
fill: var(--gray-700);
}
}
.rating {
// rating
--star-fill: var(--gray-500);
.star-hover {
--star-fill: var(--gray-400);
}
}
// skeleton
--skeleton-bg: var(--gray-800);
--right-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/></svg>");
--left-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'></path></svg>");
::selection {
color: var(--text-color);
background: var(--gray-500);
}
$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple, light-blue;
@each $color in $indicator-colors {
.indicator {
--indicator-dot-#{"" + $color}: var(--bg-#{$color});
}
}
}
Frappe Framework: v14.46.0 (version-14)
