Synology Dark Mode Beta

[Mike R]

Yesssss. Dark mode for Syno.

DSM_Dark_Theme_Beta_01-1.zip

(3.89 KiB) Downloaded 178 times

Extract on the NAS. You will have two files and a readme.txt:

ssh into the nas and make yourself root

Code: Select all

ssh username@ip.add.re.ss
sudo -i

Navigate to the directory witih the files.
Move both desktopstyle.css and setcolors.css into /usr/syno/synoman/webman/resources/css/ and confirm.

Code: Select all

mv desktopstyle.css setcolors.css /usr/syno/synoman/webman/resources/css/
cd /usr/syno/synoman/webman/resources/css/
ls -lart

Edit /usr/syno/synoman/webman/desktop.html
Search for the "{CSS}"and add the following entry underneath:
<link rel="stylesheet" type="text/css" href="/webman/resources/css/desktopstyle.css">

Code: Select all

vim /usr/syno/synoman/webman/desktop.html

• Use vim to edit the file.
• Use \i to insert text.
• Use esc to exit 'insert' mode.
• Use :, then x, then 'enter' to save and exit.

Change ownership if they are not root and change mod to 644
chown and chmod

Save file. Reload DSM page. Complete.

You can make color adjustments in setcolors.css. The desktopstyle.css file does not need to be edited.

[Mike R]

This is the text of desktopstyle.css

/* DSM 7.2. Dark THEME - BETA 0.1 - by ramires */
/* You don't have to change here anything. Loading default settings from setcolors.css */
/* Only RGB change in line 28 have to be modified if needed */
@import url("setcolors.css"); /* Load default color settings. Change Values there */

body, .normal-font, .sds-window-v5 .ext-el-mask-msg .x-loading-message-inner, .sds-window-v5.x-window-dlg, .sds-window-v5.x-window-dlg input, .sds-window-v5.x-window-dlg textarea {
color: var(--v1-mod-color7)
}

.tab-panel {
background-color: var(--v1-mod-color2)
}

.only-one-tab .tab-label {
color: var(--v2-mod-color1)
}

.tab-label.active {
border-top: 3px solid var(--v2-mod-color1);
color: var(--v2-mod-color1)
}

.login-title span {
color: var(--v2-mod-color2)
}

.login-textfield .active-border {
background-color: var(--v2-mod-color1)
}

.login-btn {
background-color: var(--v2-mod-color2);
box-shadow: 0 5px 14px 0 rgb(4 253 0 / 34%) !important; /* Change rgb color to your needs. This is green. Only entry here to change if needed! */
}

.login-btn .login-btn-animation {
background-color: var(--v2-mod-color1)
}

.login-btn .grow-bg {
background-color: var(--v2-mod-color1)
}

.login-textfield .input-container input {
background-color: var(--v1-mod-color3);
padding: 12px 10px 14px 10px
}

.v-window .v-window-header-wrapper {
background-color: var(--v1-mod-color4)
}

.v-window .v-window-header-wrapper .v-window-header-text {
color: var(--v3-mod-color1)
}

.v-fieldset .v-fieldset-title-wrapper {
background-color: var(--v1-mod-color5);
color: var(--v1-mod-color3)
}

.docker-package .overview-page {
background-color: var(--v1-mod-color5) !important
}

.docker-package .overview-page .row .overview-panel {
background-color: var(--v1-mod-color5) !important
}

.repo-desc {
color: var(--v2-mod-color1) !important
}

.overview-stats-chart {
background-color: var(--v1-mod-color6) !important
}

.syno-ux-tab-panel .x-tab-strip-top li.x-tab-strip-active .x-tab-strip-text {
color: var(--v2-mod-color3)
}

.x-panel-bwrap {
background-color: var(--v1-mod-color4) !important
}

.syno-ux-gridpanel div, .syno-ux-editorgridpanel div, .syno-ux-grid-hd-menu .x-menu-list-item .x-menu-item-text, .syno-ux-editorgrid-hd-menu .x-menu-list-item .x-menu-item-text, .syno-ux-groupcheck-menu .x-menu-list-item .x-menu-item-text, .syno-ux-check-menu .x-menu-list-item .x-menu-item-text, .syno-ux-searchfield-menu .x-menu-list-item .x-menu-item-text, .syno-ux-menu .x-menu-list-item .x-menu-item-text, .syno-ux-schedule-menu .x-menu-list-item .x-menu-item-text, .syno-ux-button-menu .x-menu-list-item .x-menu-item-text, .syno-ux-datefield-menu .x-menu-list-item .x-menu-item-text, .syno-ux-grid-hd-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-editorgrid-hd-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-groupcheck-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-check-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-searchfield-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-schedule-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-button-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-datefield-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-textfield, .ext-strict .x-small-editor .syno-ux-textfield.x-form-text, .syno-ux-numberfield, .x-form-item .x-form-item-label.syno-ux-item-label, .syno-ux-triggerfield, .syno-ux-combobox, .syno-ux-colorfield, .syno-ux-schedulefield, .syno-ux-datefield, .syno-ux-timefield, .syno-ux-superboxselect, .syno-ux-checkbox-label, .syno-ux-displayfield.x-form-display-field, .syno-ux-combobox-list .x-combo-list-item, .syno-ux-button .x-btn-text, .syno-ux-button-grey.x-btn .x-btn-text, .syno-ux-button-grey.x-btn-over.x-btn .x-btn-text, .syno-ux-button-grey:hover.x-btn .x-btn-text, .syno-ux-button-grey.x-btn-focus.x-btn .x-btn-text, .syno-ux-button-grey.x-btn-click.x-btn .x-btn-text, .syno-ux-button-grey:active.x-btn .x-btn-text, .syno-ux-button-grey.x-item-disabled.x-btn .x-btn-text, .syno-ux-button.syno-ux-statebuttongroup-right.x-btn button, .syno-ux-button.syno-ux-statebuttongroup-left.x-btn button, .syno-ux-button.syno-ux-statebuttongroup-middle.x-btn button, .syno-ux-modulelist .x-tree-node-leaf a span, .syno-ux-modulelist .x-tree-node-ct .x-tree-node-leaf.x-tree-selected a span, .syno-ux-datefield-menu table.x-date-inner tbody tr td span, .syno-ux-datefield-menu .x-date-bottom .x-btn-noicon .x-btn-small button, .syno-ux-datefield-menu .x-date-bottom .x-btn-over.x-btn-noicon .x-btn-small button, .syno-ux-datefield-menu .x-date-bottom .x-btn-click.x-btn-noicon .x-btn-small button, .syno-ux-datefield-menu .x-date-mp tr td a, .syno-ux-datefield-menu .x-date-mp-btns button.x-date-mp-cancel, .syno-ux-datefield-menu .x-date-mp-btns button.x-date-mp-cancel:hover, .syno-ux-textarea, .syno-textfilter .x-form-field-wrap .syno-textfilter-text, .syno-ux-textfilter .x-form-field-wrap .syno-ux-textfilter-text.x-form-text, .syno-ux-tab-panel .x-tab-strip-top li .x-tab-strip-text, .syno-ux-expandable-listview .item-summary .item-title, .syno-ux-treepanel .x-tree-node a span, .syno-ux-treepanel .x-tree-node .x-tree-node-over, .syno-ux-superboxselect-item, .grid-dd-drag-proxy .x-dd-drag-ghost {
color: var(--v1-mod-color7)
}

.syno-ux-fieldset .x-fieldset-header:hover,.syno-ux-fieldset .x-fieldset-header:focus,.syno-ux-fieldset .x-fieldset-bottomlegend:hover,.syno-ux-fieldset .x-fieldset-bottomlegend:focus {
color: var(--v2-mod-color4)
}

.syno-ux-tab-panel .x-tab-strip-top li.x-tab-strip-over .x-tab-strip-text {
color: var(--v2-mod-color4)
}

.syno-ux-fieldset .x-fieldset-header, .syno-ux-fieldset .x-fieldset-bottomlegend {
color: var(--v2-mod-color5)
}

.syno-ux-button-blue {
border: solid 1px var(--v1-mod-color8);
background-color: var(--v2-mod-color1)
}

.syno-ux-button-blue.x-btn-over, .syno-x-button-blue:hover, .syno-ux-button-blue.x-btn-focus {
border: solid 1px var(--v3-mod-color1);
background-color: var(--v2-mod-color5)
}

.link-font {
color: var(--v2-mod-color6)
}

.link-font:hover {
color: var(--v2-mod-color4)
}

.syno-ux-displayfield.x-form-display-field .syno-ux-note {
color: var(--v2-mod-color2)
}

.x-form-text.syno-ux-triggerfield, .x-form-text.syno-ux-combobox, .x-form-text.syno-ux-colorfield, .x-form-text.syno-ux-schedulefield, .x-form-text.syno-ux-datefield, .x-form-text.syno-ux-timefield, .x-form-text.syno-ux-superboxselect {
background-color: var(--v1-mod-color2);
border-color: var(--v1-mod-color8)
}

.x-form-text.syno-ux-textfield, .ext-strict .x-small-editor .x-form-text.syno-ux-textfield, .x-form-text.syno-ux-numberfield {
background-color: var(--v1-mod-color2);
border-color: var(--v1-mod-color8)
}

.v-textfield-wrapper {
--v-input-bkg-color: var(--v1-mod-color2);
--v-input-color: var(--v3-mod-color1);
--v-input-bkg-color--hover: var(--v1-mod-color9);
--v-input-border-color--focus: var(--v3-mod-color1);
--v-input-border-color--hover: var(--v3-mod-color1);
--v-input-bkg-color--focus: var(--v1-mod-color9)
}
.v-btn {
--v-button-action-bkg-color--normal: var(--v2-mod-color1);
--v-button-action-color--normal: var(--v3-mod-color1);
--v-button-blue-border-color--normal: var(--v1-mod-color8);
--v-button-action-bkg-color--hover: var(--v2-mod-color5);
--v-button-action-color--hover: var(--v3-mod-color1);
--v-button-action-border-color--hover: var(--v3-mod-color1)
}

.v-select2-wrapper {
--v-select-bkg-color: var(--v1-mod-color8);
--v-select-bkg-color--focus: var(--v1-mod-color8);
--v-select-bkg-color--hover: var(--v1-mod-color3);
--v-select-border-color--focus: var(--v3-mod-color1);
--v-select-bkg-color__dropdown: var(--v3-mod-color2)

}

.v-select2-dropdown, .v-select2-advanced {
background-color: var(--v1-mod-color9);
color: var(--v3-mod-color1)
}

.v-select2-dropdown .v-select2-dropdown-menu-item {
color: var(--v3-mod-color1)
}

.v-select2-dropdown .v-select2-dropdown-menu-item.selected, .v-select2-dropdown .v-select2-dropdown-menu-item.activated {
color: var(--v1-mod-color7);
background-color: var(--v1-mod-color4)
}

.admin-center-search-box-dropdown .v-select2-dropdown-menu-item-group-label {
color:var(--v2-mod-color5)
}

.synopkg-empty-pkglist-mask {
background-color: var(--v1-mod-color4)
}

.synopkg-empty-pkglist-msg {
color: var(--v2-mod-color1)
}

.sds-window-v5 .x-window-tl {
background-color: var(--v1-mod-color4);
color: var(--v3-mod-color1)
}

.sds-window-v5 .x-window-header-text {
color: var(--v3-mod-color1)
}

.sds-window-v5 .x-window-tbar {
background-color: var(--v1-mod-color4)
}

.sds-window-v5 .x-window-tbar .x-toolbar {
background-color: var(--v1-mod-color4)
}

.sds-window-v5 .x-window-body {
background-color: var(--v3-mod-color3)
}

.sds-window-v5 .x-window-bl {
background-color: var(--v3-mod-color3)
}

.syno-pkg-note {
color:var(--v2-mod-color2)
}
.syno-ux-note {
color:var(--v2-mod-color2)
}

.syno-textfilter .x-trigger-wrap-focus.x-form-field-wrap, .syno-ux-textfilter .x-trigger-wrap-focus.x-form-field-wrap {
background-color: var(--v1-mod-color8);
border-color: var(--v3-mod-color1)
}

.syno-textfilter .x-form-field-wrap, .syno-ux-textfilter .x-form-field-wrap {
background-color: var(--v1-mod-color8);
border-color: var(--v1-mod-color7)
}

.v-icon {
--v-icon-set-set21-normal: var(--v2-mod-color7);
--v-icon-set-set21-hover: var(--v2-mod-color2);
--v-icon-set-set21-active: var(--v3-mod-color1)
}

.v-menu {
--v-menu-bkg-color: var(--v1-mod-color5)
}

.x-layer.syno-ux-grid-hd-menu, .x-layer.syno-ux-editorgrid-hd-menu, .x-layer.syno-ux-groupcheck-menu, .x-layer.syno-ux-check-menu, .x-layer.syno-ux-searchfield-menu, .x-layer.syno-ux-menu, .x-layer.syno-ux-schedule-menu, .x-layer.syno-ux-button-menu, .x-layer.syno-ux-datefield-menu {
background-color: var(--v1-mod-color5)
}

.syno-ux-grid-hd-menu .x-menu-list-item, .syno-ux-editorgrid-hd-menu .x-menu-list-item, .syno-ux-groupcheck-menu .x-menu-list-item, .syno-ux-check-menu .x-menu-list-item, .syno-ux-searchfield-menu .x-menu-list-item, .syno-ux-menu .x-menu-list-item, .syno-ux-schedule-menu .x-menu-list-item, .syno-ux-button-menu .x-menu-list-item, .syno-ux-datefield-menu .x-menu-list-item {
background-color: var(--v1-mod-color5)
}

.sds-notify-tray-panel .x-panel-header {
background-color:var(--v3-mod-color3);
color:var(--v3-mod-color3)
}

.sds-tray-panel .x-panel-body {
background-color: var(--v1-mod-color4);
color: var(--v3-mod-color1)
}

.sds-notify-tray-panel .sds-notify-empty-text {
color: var(--v3-mod-color1)
}

.sds-tray-msg-window .x-plain-body, .sds-tray-panel .x-panel-header .x-panel-header-text, .sds-user-menu .sds-user-menu-username {
color: var(--v1-mod-color7)
}

.sds-notify-tray-panel .x-panel-bbar {
background-color:var(--v3-mod-color3)
}

.sds-notify-tray-panel .x-toolbar .x-toolbar-ct {
background-color:var(--v3-mod-color3)
}

.sds-notify-tray-panel .item .title {
color: var(--v2-mod-color7)
}

.sds-notify-tray-panel .msg {
color: var(--v3-mod-color1)
}

.sds-notify-tray-panel .item .time {
color: var(--v1-mod-color7)
}

.v-form-item-label {
color:var(--v2-mod-color2)
}

.taskbar-menu.v-menu::before {
background: none
}

.taskbar-menu.v-menu .taskbar-title {
color:var(--v2-mod-color2);
background-color: var(--v1-mod-color4)
}

.v-trap-focus-body {
background-color: var(--v1-mod-color4)
}

.taskbar-menu.v-menu {
background-color: var(--v1-mod-color4)
}

.v-menu-item, .v-menu-submenu-title {
color: var(--v1-mod-color7)
}

.v-menu-item.active {
color: var(--v3-mod-color1)
}

.v-widget-item {
background:var(--v3-mod-color3);
color: var(--v1-mod-color7)
}

.v-widget-item-header .v-widget-item-header-title .v-widget-item-header-title-text {
color: var(--v3-mod-color1)
}

.syno-finder .result-list .list-entry {
color: var(--v1-mod-color7)
}

.syno-finder .search-bar .text-field {
color:var(--v3-mod-color1)
}

.syno-finder .search-bar .dummy-searchfield .suggestion {
color: var(--v1-mod-color1)
}

.syno-pkglist-card {
outline: 1px solid var(--v1-mod-color9)
}

.syno-pkglist-header {
color: var(--v2-mod-color4)
}

.syno-pkglist-card .syno-pkglist-infoarea .syno-pkglist-info .syno-pkglist-title {
color: var(--v1-mod-color7)
}

.syno-pkglist-card .syno-pkglist-infoarea .syno-pkglist-info .syno-pkglist-subtitle {
color: var(--v2-mod-color1)
}

.syno-pkglist-card .syno-pkglist-infoarea .syno-pkglist-btn .syno-pkg-button-open .x-btn-text {
color: var(--v2-mod-color4)
}

.syno-pkglist-card:hover {
background-color: var(--v3-mod-color3)
}

.syno-pkglist-card:hover .syno-pkglist-infoarea>.syno-pkglist-info>.syno-pkglist-title:after {
background-color: var(--v3-mod-color3)
}


.v-module-list .module-item-section .module-item .module-section-item-text {
color: var(--v2-mod-color9)
}

.syno-ux-expandable-listview .item-summary .item-status {
color: var(--v1-mod-color8)
}

[Mike R]

This is the text of setcolors.css:

/* DSM 7.2. Dark THEME - BETA 0.1 - by ramires */

:root {
/* Override main DSM colors with modifications. No need to change anything here!! */

--v-color-white: var(--v1-mod-color4); /* Change the most backgrounds to grey */
--v-color-blue: var(--v1-mod-color7); /* Change the most headings to grey */
--v-color-font-tier1: var(--v1-mod-color7); /* Change fontcolor to light grey */
--v-color-font-tier2: rgb(58 255 138 / 80%); /* Change fontcolor to light green */
--v-color-main: var(--v2-mod-color5); /* Change fontcolor to lightgreen, e.g. sitenumbers */

/* Set var's to your needs for following css programming. Here you make your changes */

--v1-mod-color1: #a09f9f; /* Color grey 1 */
--v1-mod-color2: #0d0d0d; /* Color grey 2 */
--v1-mod-color3: #b4b4b4; /* Color grey 3 */
--v1-mod-color4: #171d22; /* Color grey 4 */
--v1-mod-color5: #181b1e; /* Color grey 5 */
--v1-mod-color6: #596168; /* Color grey 6 */
--v1-mod-color7: #c0c0c0; /* Color grey 7 */
--v1-mod-color8: #7d7e7d; /* Color grey 8 */
--v1-mod-color9: #4e5050; /* Color grey 9 */
--v2-mod-color1: #0B940E; /* Color mid green */
--v2-mod-color2: #00ff06; /* Color light green */
--v2-mod-color3: #0ff14c; /* Color light green */
--v2-mod-color4: #75f5a0; /* Color light green */
--v2-mod-color5: #1de761; /* Color light green */
--v2-mod-color6: #19bc50; /* Color light green */
--v2-mod-color7: #3dcc6a; /* Color mid green */
--v3-mod-color1: #ffffff; /* Color white */
--v3-mod-color2: #eb0909; /* Color red */
--v3-mod-color3: #000000; /* Color black */
}