diff --git a/apps/theming/css/ionos/_layout.css b/apps/theming/css/ionos/_layout.css
new file mode 100644
index 0000000000000..f1f7893c47d03
--- /dev/null
+++ b/apps/theming/css/ionos/_layout.css
@@ -0,0 +1,32 @@
+#header {
+ box-shadow: var(--ion-shadow-header);
+ #nextcloud {
+ padding-inline-start: 220px;
+ .logo {
+ width: 200px;
+ }
+ }
+
+
+ .app-menu-entry--active::before {
+ background-color: var(--ion-color-secondary);
+ }
+
+ .app-menu-entry__label {
+ color: var(--ion-color-secondary);
+ }
+
+ .app-menu-entry__icon .app-menu-icon__icon{
+ color: var(--ion-color-secondary);
+ fill: var(--ion-color-secondary);
+ filter: var(--background-invert-if-bright);
+ }
+}
+
+#content-vue {
+ margin: 0;
+ margin-top: 50px;
+ width: 100%;
+ height: 100%;
+ border-radius: 0;
+}
diff --git a/apps/theming/css/ionos/files.css b/apps/theming/css/ionos/files.css
new file mode 100644
index 0000000000000..6a01227de7542
--- /dev/null
+++ b/apps/theming/css/ionos/files.css
@@ -0,0 +1,462 @@
+
+div.files-list__filters {
+ display: none;
+}
+.files-list {
+ & thead.files-list__thead,& div.files-list__thead-overlay {
+ top: 0;
+ .files-list__row-head .files-list__column--sortable .button-vue__text {
+ @media only screen and (max-width: 1023px) {
+ font-size: 16px;
+ }
+ }
+ }
+}
+
+div.files-list__header {
+ margin-top: 25px;
+ margin-right: 16px;
+ margin-bottom: 14px;
+ @media only screen and (max-width: 1023px) {
+ margin-top: 15px;
+ }
+}
+
+thead.files-list__thead tr,
+div[data-cy-files-list]:not(.files-list--grid) tbody.files-list__tbody tr.files-list__row,
+tfoot.files-list__tfoot tr {
+ padding-right: 44px;
+ padding-left: 4px;
+
+ @media only screen and (max-width: 512px) {
+ padding-right: 16px;
+ }
+}
+
+button.files-list__header-grid-button {
+ position: absolute;
+ top: 88px;
+ right: 20px;
+ z-index: 33;
+}
+
+.files-list__refresh-icon {
+ position: absolute;
+ right: 50%;
+}
+
+nav:has(.breadcrumb__crumbs) {
+ flex-grow: 1;
+}
+
+.files-list__column-sort-button-icon {
+ svg {
+ width: 18px;
+ height: 18px;
+ }
+}
+
+div.files-list__header:has(div.files-list__breadcrumbs), .file-picker {
+ div.files-list__breadcrumbs, .file-picker__breadcrumbs {
+ ul.breadcrumb__crumbs {
+ a, a:hover, a:active, a:disabled, button {
+ padding: 2px 0;
+ font-weight: 400;
+ color: var(--ion-breadcrumb-text-default);
+ background-color: transparent;
+
+ span.button-vue__text {
+ color: var(--ion-breadcrumb-text-default);
+ font-weight: 400;
+ &:hover {
+ color: var(--ion-breadcrumb-text-hover);
+ }
+ &:active {
+ color: var(--ion-breadcrumb-text-active);
+ }
+ &:disabled {
+ color: var(--ion-breadcrumb-text-disabled);
+ }
+ }
+ }
+
+ /* ensure the icon-only buttons look correct */
+ button.button-vue--icon-only, a.button-vue--icon-only svg {
+ background-color: transparent;
+ color: var(--ion-breadcrumb-text);
+ padding: 2px 0;
+ &:hover {
+ color: var(--ion-breadcrumb-text-hover);
+ background-color: inherit;
+ }
+ &:active {
+ color: var(--ion-breadcrumb-text-active);
+ background-color: inherit;
+ }
+ &:disabled {
+ color: var(--ion-breadcrumb-text-disabled);
+ background-color: inherit;
+ }
+ &:focus {
+ background-color: inherit;
+ }
+ span[role=img]>svg.material-design-icon__svg {
+ color: inherit;
+ }
+ }
+
+ .vue-crumb {
+ align-items: center;
+ }
+
+ .vue-crumb__separator {
+ color: var(--ion-breadcrumb-text);
+ width: 16px;
+ height: 16px;
+ }
+ }
+ }
+
+ @media only screen and (max-width: 767px) {
+ margin-inline: 0;
+
+ div.breadcrumb {
+ flex-direction: column-reverse;
+ align-items: flex-start;
+
+ nav {
+ margin-left: 8px;
+ }
+
+ div.breadcrumb__actions {
+ align-self: flex-end;
+
+ &:has(div.v-popper) {
+ position: sticky;
+ }
+ }
+ }
+ }
+}
+
+div[data-cy-files-list].files-list {
+ .files-list__row {
+ &:hover {
+ background-color: var(--ion-files-list-background-hover);
+
+ .favorite-marker-icon svg path {
+ stroke: var(--color-main-background);
+ }
+ }
+ &:active, &.files-list__row--active, &:has(.checkbox-radio-switch--checked) {
+ background-color: var(--ion-files-list-background-active);
+
+ .favorite-marker-icon svg path {
+ stroke: var(--color-main-background);
+ }
+ }
+ .files-list__row-icon {
+ color: var(--ion-files-list-icon);
+ }
+ .files-list__row-actions {
+ right: 0;
+ bottom: 2px;
+ .action-items {
+ color: var(--ion-files-list-icon);
+ }
+ .icon-vue {
+ color: var(--ion-files-list-icon);
+ }
+ .material-design-icon{
+ color: var(--ion-files-list-icon);
+ }
+ .button-vue--icon-and-text {
+ background-color: var(--ion-button-secondary-background-default);
+ border: 2px solid transparent;
+ &:hover {
+ border: var(--ion-button-secondary-border-default);
+ }
+ .button-vue__text {
+ color: var(--ion-button-secondary-text);
+ }
+ }
+ }
+ }
+
+ /* mobile and tablet */
+ @media only screen and (max-width: 1199px) {
+ .files-list__filters {
+ height: auto;
+ }
+ }
+}
+
+tfoot.files-list__tfoot tr td.files-list__column.files-list__row-size,
+td[data-cy-files-list-row-size].files-list__row-size {
+ justify-content: normal;
+ padding-left: 12px;
+ @media only screen and (max-width: 1199px) {
+ padding-left: 23px;
+ }
+}
+
+div.files-list--grid tbody.files-list__tbody .files-list__row-icon {
+ .folder-icon {
+ justify-content: center;
+ }
+
+ img, svg {
+ width: auto;
+ height: auto;
+ min-width: 42px;
+ min-height: 80%;
+ }
+}
+
+/* Context Menu */
+div.v-popper--theme-dropdown.v-popper__popper:has(.v-popper__wrapper) {
+ border-radius: 16px;
+ filter: none;
+
+ div.v-popper__wrapper {
+ border-radius: inherit;
+ border: 1px solid var(--ion-context-menu-border);
+
+ div.v-popper__inner {
+ padding: 2px 12px;
+ border-radius: inherit;
+ background-color: var(--ion-context-menu-background);
+
+ li.action:has(button.action-button) {
+ &.active {
+ background-color: var(--ion-context-menu-item-background-hover);
+ }
+
+ button.action-button {
+ border-radius: 8px;
+ color: var(--ion-context-menu-item-text);
+ font-style: normal;
+ font-weight: 600;
+ margin-top: 12px;
+ margin-bottom: 12px;
+
+ &:active {
+ background-color: var(--ion-context-menu-item-background-active);
+ }
+
+ &:disabled {
+ color: var(--ion-context-menu-item-text-disabled);
+ background-color: var(--ion-context-menu-item-background-disabled);
+ cursor: not-allowed;
+ }
+
+ .folder-upload-icon {
+ color: var(--ion-context-menu-item-text) !important;
+ }
+ }
+ }
+ }
+
+ div.v-popper__arrow-container:has(div.v-popper__arrow-inner) {
+ display: none;
+ }
+ }
+}
+
+/* Dialogs */
+div.modal-container {
+ background-color: var(--ion-surface-dialog);
+ min-width: min-content;
+
+ &:has(.viewer__content) {
+ background-color: transparent;
+ }
+
+ &:has(.nc-generic-dialog) {
+ /* Delete Dialog */
+ border: 1px solid var(--ion-color-blue-b4);
+ }
+ &:has(.unified-search-modal) {
+ border: 0.5px solid #A3A3A3;
+ box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.25), -1px 0px 8px 0px rgba(0, 0, 0, 0.25);
+ .unified-search-modal__header, .input-field__input, .input-field__label {
+ background-color: var(--ion-surface-dialog);
+
+ .unified-search-modal__filters{
+ button.button-vue--vue-secondary.action-item__menutoggle[id*="trigger-menu"] {
+ background-color: var(--ion-dialog-filter-button-background);
+ &:hover {
+ background-color: var(--ion-button-tertiary-background-hover);
+ }
+ &:active {
+ background-color: var(--ion-button-tertiary-background-active);
+ }
+ span.button-vue__wrapper {
+ span.button-vue__text, .button-vue__icon svg {
+ color: var(--ion-button-tertiary-text) !important;
+ }
+ }
+ }
+ }
+
+ .unified-search-modal__filters-applied {
+ .chip {
+ background-color: var(--ion-chip-background);
+ color: var(--ion-chip-text);
+ border: none;
+
+ span.icon {
+ .calendar-range-icon {
+ width: 20px;
+ height: 20px;
+ }
+ img {
+ filter: none;
+ }
+ }
+ }
+ }
+ }
+
+ .unified-search-modal__results {
+ h4.result-title {
+ color: var(--ion-text);
+ }
+
+ ul.result-items {
+ li.result-items__item div.list-item, li.result-items__item div.list-item a{
+ background-color: var(--ion-dialog-files-list-background);
+ border: none;
+ &:hover, &.active {
+ background-color: var(--ion-dialog-files-list-background-hover);
+ border: none;
+ }
+ }
+ }
+ }
+ }
+
+ @media only screen and (max-width: 512px) {
+ div.dialog__actions {
+ flex-wrap: wrap;
+ }
+ }
+
+ /* File Picker*/
+ .dialog.file-picker {
+ .input-field__input, .input-field__input:focus + .input-field__label {
+ background-color: var(--ion-surface-dialog);
+ }
+
+ .file-picker__files {
+ thead th {
+ background-color: var(--ion-surface-dialog);
+ }
+
+ tr.file-picker__row {
+ &:hover, &.file-picker__row--selected {
+ background-color: var(--ion-files-list-background-hover);
+
+ @media (prefers-color-scheme: dark) {
+ background-color: var(--ion-color-cool-grey-c7);
+ }
+ }
+
+ [class*="_file-picker__file-icon_"] {
+ color: var(--ion-files-list-icon);
+ }
+ }
+ }
+
+ .file-picker__side li {
+ .button-vue--vue-primary.button-vue--icon-and-text {
+ background-color: var(--ion-button-sidebar-background-active) !important;
+
+ .button-vue__text, .button-vue__icon svg {
+ color: var(--ion-button-tertiary-text);
+ }
+ }
+
+ .button-vue--vue-tertiary.button-vue--icon-and-text {
+ background-color: transparent !important;
+
+ &:hover {
+ background-color: var(--ion-button-sidebar-background-hover) !important;
+ }
+
+ &:active {
+ background-color: var(--ion-button-sidebar-background-active) !important;
+ }
+ }
+
+ .dialog__actions button.button-vue--vue-primary {
+ background-color: var(--ion-button-secondary-background-default);
+ border: var(--ion-button-secondary-border-default);
+
+
+ &:hover:not(:disabled):not(.button-vue--disabled) {
+ background-color: var(--ion-button-secondary-background-hover);
+ border-color: var(--ion-button-secondary-background-hover);
+
+ .button-vue__text, .button-vue__icon svg {
+ color: var(--ion-button-secondary-text-hover);
+ }
+ }
+
+ &:active:not(:disabled):not(.button-vue--disabled) {
+ background-color: var(--ion-button-secondary-background-active);
+
+ .button-vue__text, .button-vue__icon svg {
+ color: var(--ion-button-secondary-text-active);
+ }
+ }
+ }
+ }
+ }
+}
+
+.v-popper__popper {
+ .v-popper__inner {
+ background-color: var(--ion-surface-dialog) !important;
+ border-radius: inherit;
+
+ .searchable-list__list {
+ li button {
+ background-color: transparent !important;
+ &:hover, &:active {
+ background-color: var(--ion-files-list-background-hover) !important;
+ }
+ }
+ }
+
+ .input-field__input {
+ background-color: var(--ion-surface-dialog);
+ }
+ }
+ [class*="trigger-menu"], [aria-labelledby^="trigger-menu"] {
+ li.action.active {
+ background-color: var(--ion-surface-dialog);
+ }
+
+ img.filter-button__icon {
+ @media (prefers-color-scheme: dark) {
+ filter: none;
+ }
+ }
+ }
+}
+
+::selection {
+ background-color: var(--ion-color-blue-b4);
+}
+
+.toastify.dialogs {
+ min-width: 0;
+ padding-right: 14px;
+
+ .toast-close {
+ margin-right: 0;
+ padding-right: 0;
+ min-width: 0;
+ }
+}
diff --git a/apps/theming/css/ionos/sidebar.css b/apps/theming/css/ionos/sidebar.css
new file mode 100644
index 0000000000000..9e4fdddd1c6fd
--- /dev/null
+++ b/apps/theming/css/ionos/sidebar.css
@@ -0,0 +1,113 @@
+div.app-navigation {
+ div.app-navigation-search {
+ padding: 20px;
+ }
+
+ ul.app-navigation-list {
+ padding: 0 20px 4px 20px;
+ }
+
+ ul.app-navigation-entry__settings {
+ padding: 0 20px 20px 20px;
+ }
+
+ &:has(nav#app-navigation-vue) {
+ background-color: var(--ion-surface-secondary);
+ .app-navigation-entry {
+ span[role=img]>svg {
+ color: var(--ion-button-sidebar-text);
+ height: 16px;
+ width: auto;
+ }
+ .app-navigation-entry-icon {
+ width: 44px;
+ height: 44px;
+ }
+ .app-navigation-entry__name {
+ font-weight: 600;
+ color: var(--ion-button-sidebar-text) !important;
+ }
+ border-radius: var(--border-radius-pill);
+ &.active {
+ background-color: var(--ion-button-sidebar-background-active) !important;
+ .app-navigation-entry-link {
+ color: var(--ion-button-sidebar-text) !important;
+ }
+ }
+ &:hover {
+ background-color: var(--ion-button-sidebar-background-hover);
+ }
+ }
+
+ .app-navigation-entry--opened:has(.app-navigation-entry__children) {
+ background: var(--ion-surface-primary);
+ border-radius: 8px;
+ .app-navigation-entry__children {
+ padding: 0 8px;
+ gap: 0;
+ .app-navigation-entry {
+ display: flex;
+ align-items: center;
+ border-radius: 4px;
+ }
+ .app-navigation-entry-wrapper {
+ background: var(--ion-surface-primary);
+ border-radius: 8px;
+ min-height: 40px;
+ margin: 4px 0;
+ }
+ }
+ }
+
+ /* Navigation Toggle Button */
+ div.app-navigation-toggle-wrapper button.app-navigation-toggle.button-vue--icon-only {
+ margin: 18px 0;
+ background-color: var(--ion-button-sidebar--icon-only-background) !important;
+ @media only screen and (max-width: 1023px) {
+ margin: 12px 0;
+ }
+ span[role=img]>svg {
+ height: 16px;
+ width: 16px;
+ color: var(--ion-button-sidebar--icon-only-text) !important;
+ }
+ &:hover {
+ background-color: var(--ion-button-sidebar--icon-only-background-hover) !important;
+ span[role=img]>svg {
+ color: var(--ion-button-sidebar--icon-only-text) !important;
+ }
+ }
+ }
+
+ /* Sub Navigation Toggle Icon Button */
+ .button-vue--icon-only:not(.app-navigation-toggle) {
+ background-color: transparent;
+ span[role=img]>svg {
+ height: 16px;
+ width: 16px;
+ color: var(--ion-button-sidebar-text);
+ }
+ &:hover {
+ background-color: transparent;
+ span[role=img]>svg {
+ color: var(--ion-button-sidebar-text);
+ }
+ }
+ }
+
+ @media only screen and (max-width: 767px) {
+ &:has(span.menu-open-icon) {
+ width: auto;
+ max-width: inherit;
+
+ .app-navigation-list {
+ padding-right: calc(var(--default-clickable-area) + 16px);
+ }
+
+ div.app-navigation-toggle-wrapper {
+ margin-inline-end: calc(var(--default-clickable-area) - 24px);
+ }
+ }
+ }
+ }
+}
diff --git a/apps/theming/css/ionos/variables.css b/apps/theming/css/ionos/variables.css
new file mode 100644
index 0000000000000..3f63c15014e1f
--- /dev/null
+++ b/apps/theming/css/ionos/variables.css
@@ -0,0 +1,86 @@
+#content-vue {
+ /* Text colors */
+ --ion-text: light-dark(var(--ion-color-secondary), var(--ion-color-cool-grey-c1));
+ --ion-text-bright: var(--ion-color-cool-grey-c7);
+ --ion-text-dimm: var(--ion-color-blue-b9);
+ --ion-text-disabled: var(--ion-color-cool-grey-c4);
+ --ion-text-high-contrast: var(#000);
+
+ --color-background-plain: var(--ion-color-main-background);
+
+ --ion-breadcrumb-text-default: light-dark(var(--ion-color-secondary), var(--ion-color-cool-grey-c1));
+ --ion-breadcrumb-text-hover: var(--ion-color-blue-b4);
+ --ion-breadcrumb-text-active: var(--ion-color-blue-b5);
+ --ion-breadcrumb-text-disabled: var(--ion-color-cool-grey-c4);
+
+ --ion-files-list-background-hover: light-dark(var(--ion-color-blue-b1), var(--ion-color-cool-grey-c8));
+ --ion-files-list-background-active: light-dark(var(--ion-color-blue-b2), var(--ion-color-cool-grey-c6));
+ --ion-files-list-icon: var(--ion-color-blue-b4);
+
+ --ion-context-menu-background: var(--color-main-background);
+ --ion-context-menu-border: light-dark(var(--ion-color-blue-b4), var(--ion-color-cool-grey-c4));
+ --ion-context-menu-item-background-hover: light-dark(var(--ion-color-blue-b1), var(--ion-color-cool-grey-c7));
+ --ion-context-menu-item-background-active: light-dark(var(--ion-color-blue-b2), var(--ion-color-cool-grey-c6));
+ --ion-context-menu-item-background-disabled: var(--ion-context-menu-background);
+ --ion-context-menu-item-text: light-dark(var(--ion-color-secondary), var(--ion-color-cool-grey-c1));
+ --ion-context-menu-item-text-disabled: light-dark(var(--ion-color-cool-grey-c4), var(--ion-color-cool-grey-c6));
+
+ --ion-button-primary-background-default: light-dark(var(--ion-color-blue-b7), var(--ion-color-blue-b4));
+ --ion-button-primary-background-hover: light-dark(var(--ion-color-blue-b4), var(--ion-color-blue-b5));
+ --ion-button-primary-background-active: light-dark(var(--ion-color-blue-b5), var(--ion-color-blue-b6));
+ --ion-button-primary-background-disabled: light-dark(var(--ion-color-cool-grey-c4), var(--ion-color-cool-grey-c8));
+ --ion-button-primary-text: #fff;
+ --ion-button-primary-text-disabled: light-dark(var(--ion-color-cool-grey-c2), var(--ion-color-cool-grey-c6));
+
+ --ion-button-secondary-background-default: transparent;
+ --ion-button-secondary-background-hover: light-dark(var(--ion-color-blue-b7), var(--ion-color-cool-grey-c1));
+ --ion-button-secondary-background-active: light-dark(var(--ion-color-secondary), var(--ion-color-cool-grey-c3));
+ --ion-button-secondary-background-disabled: transparent;
+ --ion-button-secondary-border-default: 2px solid light-dark(var(--ion-color-blue-b7), var(--ion-color-cool-grey-c1));
+ --ion-button-secondary-border-disabled: 2px solid light-dark(var(--ion-color-cool-grey-c4), var(--ion-color-cool-grey-c3));
+ --ion-button-secondary-text: light-dark(var(--ion-color-blue-b7), var(--ion-color-cool-grey-c1));
+ --ion-button-secondary-text-hover: light-dark(#fff, var(--ion-color-blue-b7));
+ --ion-button-secondary-text-active: light-dark(#fff, var(--ion-color-blue-b7));
+ --ion-button-secondary-text-disabled: light-dark(var(--ion-color-cool-grey-c4), var(--ion-color-cool-grey-c3));
+
+ --ion-button-tertiary-background-default: light-dark(var(--ion-color-blue-b1), var(--ion-color-blue-b7));
+ --ion-button-tertiary-background-hover: light-dark(var(--ion-color-cool-grey-c2), var(--ion-color-cool-grey-c7));
+ --ion-button-tertiary-background-active: light-dark(var(--ion-color-cool-grey-c3), var(--ion-color-cool-grey-c6));
+ --ion-button-tertiary-text: light-dark(var(--ion-color-secondary), var(--ion-color-cool-grey-c1));
+
+ --ion-button--icon-only-background: transparent;
+ --ion-button--icon-only-text: light-dark(var(--ion-color-blue-b4), var(--ion-color-cool-grey-c3));
+ --ion-button--icon-only-background-hover: light-dark(var(--ion-color-blue-b4), var(--ion-color-blue-b4));
+ --ion-button--icon-only-background-active: light-dark(var(--ion-color-blue-b6), var(--ion-color-blue-b3));
+ --ion-button--icon-only-text-hover: #fff;
+
+ --ion-button-sidebar-background: transparent;
+ --ion-button-sidebar-background-hover: light-dark(var(--ion-color-cool-grey-c2), var(--ion-color-cool-grey-c7));
+ --ion-button-sidebar-background-active: light-dark(var(--ion-color-cool-grey-c3), var(--ion-color-cool-grey-c6));
+ --ion-button-sidebar-text: light-dark(var(--ion-color-secondary), var(--ion-color-cool-grey-c1));
+
+ --ion-button-sidebar--icon-only-background: light-dark(var(--ion-color-cool-grey-c2), var(--ion-color-cool-grey-c2));
+ --ion-button-sidebar--icon-only-background-hover: light-dark(var(--ion-color-cool-grey-c3), var(--ion-color-cool-grey-c3));
+ --ion-button-sidebar--icon-only-text: light-dark(var(--ion-color-secondary), var(--ion-color-secondary));
+
+ --ion-dropdown-classic: var(--ion-color-cool-grey-c3);
+
+ --ion-icon-filter-secondary: invert(8%) sepia(43%) saturate(7496%) hue-rotate(218deg) brightness(90%) contrast(91%);
+ --ion-icon-filter-secondary-text-hover: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7460%) hue-rotate(259deg) brightness(112%) contrast(100%);
+ --ion-icon-filter-blue-b4: brightness(0) saturate(100%) invert(37%) sepia(26%) saturate(3654%) hue-rotate(185deg) brightness(88%) contrast(90%);
+ --ion-icon-filter-blue-b5: brightness(0) saturate(100%) invert(21%) sepia(91%) saturate(6261%) hue-rotate(202deg) brightness(87%) contrast(93%);
+ --ion-icon-filter-blue-b6: brightness(0) saturate(100%) invert(9%) sepia(91%) saturate(5873%) hue-rotate(206deg) brightness(85%) contrast(104%);
+ --ion-icon-filter-blue-b8: brightness(0) saturate(100%) invert(10%) sepia(32%) saturate(3782%) hue-rotate(197deg) brightness(98%) contrast(106%);
+ --ion-icon-filter-cool-grey-c1: brightness(0) saturate(100%) invert(100%) sepia(26%) saturate(874%) hue-rotate(176deg) brightness(100%) contrast(96%);
+
+ --ion-surface-primary: var(--ion-color-main-background);
+ --ion-surface-secondary: light-dark(var(--ion-color-cool-grey-c1), var(--ion-color-cool-grey-c8));
+ --ion-surface-dialog: light-dark(#fff, var(--ion-color-cool-grey-c8));
+
+ --ion-dialog-filter-button-background: light-dark(var(--ion-color-cool-grey-c1), var(--ion-color-blue-b9));
+ --ion-dialog-files-list-background: transparent;
+ --ion-dialog-files-list-background-hover: light-dark(var(--ion-color-blue-b1), var(--ion-color-cool-grey-c7));
+
+ --ion-chip-background: light-dark(var(--ion-color-blue-b4), var(--ion-color-cool-grey-c6));
+ --ion-chip-text: #fff;
+}
diff --git a/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.eot b/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.eot
new file mode 100755
index 0000000000000..a78a2a9b068bb
Binary files /dev/null and b/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.eot differ
diff --git a/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.svg b/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.svg
new file mode 100755
index 0000000000000..a294c817836b6
--- /dev/null
+++ b/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.svg
@@ -0,0 +1,1635 @@
+
+
+
diff --git a/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.ttf b/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.ttf
new file mode 100755
index 0000000000000..974a7c5edd7f1
Binary files /dev/null and b/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.ttf differ
diff --git a/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.woff b/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.woff
new file mode 100755
index 0000000000000..ca2f1c277d205
Binary files /dev/null and b/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.woff differ
diff --git a/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.woff2 b/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.woff2
new file mode 100755
index 0000000000000..51c75cadf14fc
Binary files /dev/null and b/apps/theming/fonts/OpenSans/OpenSans-Bold-webfont.woff2 differ
diff --git a/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.eot b/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.eot
new file mode 100755
index 0000000000000..1d98e6eab00e5
Binary files /dev/null and b/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.eot differ
diff --git a/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.svg b/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.svg
new file mode 100755
index 0000000000000..052c59fff03dc
--- /dev/null
+++ b/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.svg
@@ -0,0 +1,1637 @@
+
+
+
diff --git a/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.ttf b/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.ttf
new file mode 100755
index 0000000000000..0dae9c3bbc0b5
Binary files /dev/null and b/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.ttf differ
diff --git a/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.woff b/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.woff
new file mode 100755
index 0000000000000..ac2b2c65e3d1f
Binary files /dev/null and b/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.woff differ
diff --git a/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.woff2 b/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.woff2
new file mode 100755
index 0000000000000..402dfd77bc2b8
Binary files /dev/null and b/apps/theming/fonts/OpenSans/OpenSans-Regular-webfont.woff2 differ
diff --git a/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.eot b/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.eot
new file mode 100755
index 0000000000000..cbbfa5b0d81e3
Binary files /dev/null and b/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.eot differ
diff --git a/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.svg b/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.svg
new file mode 100755
index 0000000000000..7a3f2dd955eaa
--- /dev/null
+++ b/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.svg
@@ -0,0 +1,1637 @@
+
+
+
diff --git a/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.ttf b/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.ttf
new file mode 100755
index 0000000000000..314e983a4bce3
Binary files /dev/null and b/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.ttf differ
diff --git a/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.woff b/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.woff
new file mode 100755
index 0000000000000..c7cdaffa00c69
Binary files /dev/null and b/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.woff differ
diff --git a/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.woff2 b/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.woff2
new file mode 100755
index 0000000000000..4001c52a35371
Binary files /dev/null and b/apps/theming/fonts/OpenSans/OpenSans-SemiBold-webfont.woff2 differ
diff --git a/apps/theming/lib/Themes/IonosTheme.php b/apps/theming/lib/Themes/IonosTheme.php
index 4c980ccfbf1e9..69cd4037f61d2 100644
--- a/apps/theming/lib/Themes/IonosTheme.php
+++ b/apps/theming/lib/Themes/IonosTheme.php
@@ -32,128 +32,75 @@ public function getMediaQuery(): string {
}
public function getCustomCss(): string {
- return "
- #header {
- box-shadow: var(--ion-shadow-header);
- #nextcloud {
- padding-inline-start: 220px;
- .logo {
- width: 200px;
- }
- }
-
-
- .app-menu-entry--active::before {
- background-color: var(--ion-color-secondary);
- }
-
- .app-menu-entry__label {
- color: var(--ion-color-secondary);
- }
-
- .app-menu-entry__icon .app-menu-icon__icon{
- color: var(--ion-color-secondary);
- fill: var(--ion-color-secondary);
- filter: var(--background-invert-if-bright);
- }
- }
-
- div.app-navigation:has(nav#app-navigation-vue) {
- background-color: var(--ion-surface-secondary);
- .app-navigation-entry {
- span[role=img]>svg {
- color: var(--ion-button-sidebar-text);
- height: 16px;
- width: auto;
- }
- .app-navigation-entry__name {
- font-weight: 600;
- color: var(--ion-button-sidebar-text) !important;
- }
- border-radius: var(--border-radius-pill);
- &.active {
- background-color: var(--ion-button-sidebar-background-active) !important;
- .app-navigation-entry-link {
- color: var(--ion-button-sidebar-text) !important;
- }
- }
- &:hover {
- background-color: var(--ion-button-sidebar-background-hover);
- }
- }
-
- .app-navigation-entry--opened:has(.app-navigation-entry__children) {
- background: var(--ion-surface-primary);
- border-radius: 8px;
- .app-navigation-entry__children {
- padding: 0 8px;
- gap: 0;
- .app-navigation-entry {
- display: flex;
- align-items: center;
- border-radius: 4px;
- }
- .app-navigation-entry-wrapper {
- background: var(--ion-surface-primary);
- border-radius: 8px;
- min-height: 40px;
- margin: 4px 0;
- }
- }
- }
-
- /* Navigation Toggle Button */
- div.app-navigation-toggle-wrapper button.app-navigation-toggle.button-vue--icon-only {
- margin: 18px 0;
- background-color: var(--ion-button-sidebar--icon-only-background) !important;
- @media only screen and (max-width: 1023px) {
- margin: 12px 0;
- }
- span[role=img]>svg {
- color: var(--ion-button-sidebar--icon-only-text) !important;
- }
- &:hover {
- background-color: var(--ion-button-sidebar--icon-only-background-hover) !important;
- span[role=img]>svg {
- color: var(--ion-button-sidebar--icon-only-text) !important;
- }
- }
- }
-
- /* Sub Navigation Toggle Icon Button */
- .button-vue--icon-only:not(.app-navigation-toggle) {
- background-color: transparent;
- span[role=img]>svg {
- color: var(--ion-button-sidebar-text);
- }
- &:hover {
- background-color: transparent;
- span[role=img]>svg {
- color: var(--ion-button-sidebar-text);
- }
- }
- }
-
- @media only screen and (max-width: 767px) {
- &:has(span.menu-open-icon) {
- width: auto;
- max-width: inherit;
-
- .app-navigation-list {
- padding-right: calc(var(--default-clickable-area) + 16px);
- }
-
- div.app-navigation-toggle-wrapper {
- margin-inline-end: calc(var(--default-clickable-area) - 24px);
- }
- }
- }
- }
+ $customVariablesCss = file_get_contents(__DIR__ . '/../../css/ionos/variables.css');
+ $customSidebarCss = file_get_contents(__DIR__ . '/../../css/ionos/sidebar.css');
+ $customFilesCss = file_get_contents(__DIR__ . '/../../css/ionos/files.css');
+ $customLayoutCss = file_get_contents(__DIR__ . '/../../css/ionos/_layout.css');
+ $customCss = $customVariablesCss . PHP_EOL . $customSidebarCss . PHP_EOL . $customFilesCss . PHP_EOL . $customLayoutCss;
+
+ $regularEot = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-Regular-webfont.eot');
+ $regularWoff = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-Regular-webfont.woff');
+ $regularWoff2 = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-Regular-webfont.woff2');
+ $regularTtf = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-Regular-webfont.ttf');
+ $regularSvg = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-Regular-webfont.svg#open_sansregular');
+
+ $semiBoldEot = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-SemiBold-webfont.eot');
+ $semiBoldWoff = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-SemiBold-webfont.woff');
+ $semiBoldWoff2 = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-SemiBold-webfont.woff2');
+ $semiBoldTtf = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-SemiBold-webfont.ttf');
+ $semiBoldSvg = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-SemiBold-webfont.svg#open_sansregular');
+
+ $boldEot = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-Bold-webfont.eot');
+ $boldWoff = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-Bold-webfont.woff');
+ $boldWoff2 = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-Bold-webfont.woff2');
+ $boldTtf = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-Bold-webfont.ttf');
+ $boldSvg = $this->urlGenerator->linkTo('theming', 'fonts/OpenSans/OpenSans-Bold-webfont.svg#open_sansregular');
+ $fontCss = "
+ @font-face {
+ font-family: 'Open sans';
+ src: url('$regularEot') format('embedded-opentype'),
+ url('$regularWoff') format('woff'),
+ url('$regularWoff2') format('woff2'),
+ url('$regularTtf') format('truetype'),
+ url('$regularSvg') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ /* Open sans semi-bold variant */
+ @font-face {
+ font-family: 'Open sans';
+ src: url('$semiBoldEot') format('embedded-opentype'),
+ url('$semiBoldWoff') format('woff'),
+ url($semiBoldWoff2) format('woff2'),
+ url('$semiBoldTtf') format('truetype'),
+ url('$semiBoldSvg') format('svg');
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ /* Open sans bold variant */
+ @font-face {
+ font-family: 'Open sans';
+ src: url('$boldEot') format('embedded-opentype'),
+ url('$boldWoff') format('woff'),
+ url('$boldWoff2') format('woff2'),
+ url('$boldTtf') format('truetype'),
+ url('$boldSvg') format('svg');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
+ }
";
+
+ return $customCss . PHP_EOL . $fontCss;
}
public function getCSSVariables(): array {
$defaultVariables = parent::getCSSVariables();
+ $originalFontFace = $defaultVariables['--font-face'];
// IONOS COLORS
$ionColorMainBackground = '#fff';
@@ -277,6 +224,7 @@ public function getCSSVariables(): array {
'--color-scrollbar' => $ionColorTypoMild,
+ '--default-clickable-area' => '44px',
// error/warning/success/info feedback colours
'--color-error' => $colorError,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
@@ -311,7 +259,10 @@ public function getCSSVariables(): array {
$defaultVariables,
$this->generatePrimaryVariables($colorMainBackground, $colorMainText),
$ionosVariables,
- $variables
+ $variables,
+ [
+ '--font-face' => '"Open sans", ' . $originalFontFace
+ ]
);
}
@@ -319,7 +270,7 @@ public function getMeta(): array {
// https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme
return [[
'name' => 'color-scheme',
- 'content' => 'light',
+ 'content' => 'only light', // Remove only when dark mode is supported
]];
}
}