Einen Überblick über das Administrationstool KeyHelp der Keyweb AG und dessen Download gibt es auf https://www.keyhelp.de

Dieses Forum soll es interessierten Benutzern ermöglichen, sich über KeyHelp auszutauschen und Hilfe bei Problemen zu finden.

Kleines Experiment: Dark-Mode

Für die restlichen Themen
Benutzeravatar
keyhelpuser
Beiträge: 7
Registriert: Sa 13. Mär 2021, 21:56
Wohnort: ...earth
Kontaktdaten:

Re: Kleines Experiment: Dark-Mode

Beitrag von keyhelpuser »

Hi, Theme adapted to the personal project ,maybe it will be useful to someone. I can't solve the problem with the add file option because I keep getting the blue button color (.file-cta, .file-name). The rest should work, at least I didn't notice any other problems.
Bild
Instructions:
Settings>Configuration>White Label>(Edit)All Languages: Additional CSS add this code - SAVE

Code: Alles auswählen

.title {
    color: white;
}

html {
    background-color: #2B3E50;
}

#header {
    background-color: #2B3E50;
}

#user-menu {
    background-color: #2B3E50;
}

#header a {
    color: #e0dada;
}

.dropdown-item {
    color: #cacaca;
}

.card-header {
    background-color: #00000040;
}

.card {
    color: #fff;
}

.card-content {
    background-color: #7b7b7b21;
}

.table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
    background-color: #f0efef;
}

.card-footer {
    background-color: #b6b6bc;
}

.breadcrumb li + li::before {

    color: #fffafa;
}

.breadcrumb li.is-disabled a {
    color: #fff;
}

.breadcrumb a {
    color: #6fbcff;
}
.breadcrumb a:hover {
    color: #ffb96f;
}

.card {
    color: #2b2b2b;
}

.has-text-grey-light {
    color: #8e8e8e !important;
}

.tabs a {
    color: #ffffffbf;
}

.tabs.is-boxed li.is-active a {
    background-color: #d7d7d7;
}

.tabs.is-boxed a:hover {
    background-color: #ddd;
    border-bottom-color: #0f0f0f;
}
.select select, .textarea, .input {
    background-color: #fbfbfb;
    border-color: #dbdbdb;
    color: #363636;
}
input[disabled], input[readonly], textarea[disabled], select[disabled] {
    color: #0d0d0d !important;
    border-color: #999797 !important;
    background-color: #c7c7d2 !important;
}
.has-text-grey {
    color: #555 !important;
}
.table {
    color: #000;
}
.file.is-link .file-cta {
    background-color: #DF691A;
    border-color: transparent;
    color: #fff;
    border-radius: 100px;
}

.file.is-link:hover .file-cta:hover {
    background-color: #E4E4EA;
    border-color: #DF691A;
    color: #DF691A;
}

.button.is-link {
    background-color: #DF691A;
    border-color: transparent;
    color: #fff;
    border-radius: 100px;
}

.button.is-link:hover {
    color: #DF691A;
    background-color: #E4E4EA;
    border-color: #DF691A;
}

.button.is-danger:hover {
    color: #A62C44;
    background-color: #E4E4EA;
    border-color: #A62C44;
}

.button.is-danger {
    background-color: #a62c44;
    border-color: transparent;
    color: #fff;
    border-radius: 100px;
}

.button.is-small:not(.is-rounded) {
    border-radius: 100px;
}

body {
    color: #cecece;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    font-family: IBM Plex Mono,monospace;
}

body, button, input, optgroup, select, textarea {
    font-family: IBM Plex Mono,monospace;
}

a {
    color: #0062ff;
}

.menu-list a.is-active {
    background-color: #DF691A;
    color: #fff;
}

#sidebar {
    background-color: #2B3E50;
    border-right: 1px solid #2B3E50;
}

a {
    color: #DF691A;
}

.has-text-link {
    color: #DF691A !important;
}

.box {
    border-radius: 9px;
}

.table tr.is-selected {
    background-color: #DF691A;
    color: #fff;
}
.has-text-danger {
    color: #2B3E50 !important;
}

.card {
    border-radius: 9px;
}

.breadcrumb a {
    color: #DF691A;
}

.table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
    background-color: #E4E4EA;
}

.card-header {
    background-color: #E4E4EA;
}

.card-footer {
    background-color: #E4E4EA;
}

.card-footer:first-child, .card-content:first-child, .card-header:first-child {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}

.card-footer:last-child, .card-content:last-child, .card-header:last-child {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
}



.file-name {
    border-color: #E4E4EA;
}

.file-cta, .file-name {
    border-color: #E4E4EA;
}

.modal-close, .delete {
    background-color: #DF691A;
}

.tabs li.is-active a {
    color: #DF691A;
}

.button {
    border-radius: 30px;
}

.message-body {
    color: #DF691A;
}

.message.is-info .message-body {
    border-color: #DF691A;
    color: #DF691A;
}

.message.is-info {
    background-color: #E4E4EA;
}

.message.is-success .message-body {
    border-color: #DF691A;
    color: #DF691A;
}

.message.is-success {
    background-color: #E4E4EA;
}

.card {
    color: #DF691A;
}

.button.is-link.is-outlined {
    background-color: transparent;
    border-color: #DF691A;
    color: #DF691A;
}
.button.is-link.is-outlined:hover {
    color: #DF691A;
    background-color: #E4E4EA;
    border-color: #DF691A;
}

.column.is-4-fullhd {
    flex: 0 1 auto;
    width: 33%;
}

.columns:not(.is-desktop) {
    justify-content: space-around;
    flex-flow: row wrap;
    align-items: stretch;
}

.label {
    color: #DF691A;
    display: block;
    font-size: 1rem;
    font-weight: 700;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
    color: #DF691A;
    font-weight: 600;
    line-height: 1.125;
}

strong {
    color: #B6B6BC;
    font-weight: 700;
}
Dateianhänge
theme-keyhelp.png
Benutzeravatar
keyhelpuser
Beiträge: 7
Registriert: Sa 13. Mär 2021, 21:56
Wohnort: ...earth
Kontaktdaten:

Re: Kleines Experiment: Dark-Mode

Beitrag von keyhelpuser »

I made a few changes to the domain tab. Let's encrypt is now yellow, the rest of the certificates are green. File to download in zip format, unpack and put content in Additional CSS.
If you have any comments, feel free to discuss them here. I hope the forum moderators will not close this topic in the forum ;)
Dateianhänge
keyhelp_domain_themes.png
keyhelp_themes.txt.zip
(1.91 KiB) 9-mal heruntergeladen
Lou Zypher
Beiträge: 53
Registriert: Do 28. Feb 2019, 10:07

Re: Kleines Experiment: Dark-Mode

Beitrag von Lou Zypher »

Very nicely done, the color scheme is really harmonious in my opinion.

Thumbs up!
Antworten