Page 3 of 4

Re: Kleines Experiment: Dark-Mode

Posted: Sat 3. Apr 2021, 20:20
by 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.
Image
Instructions:
Settings>Configuration>White Label>(Edit)All Languages: Additional CSS add this code - SAVE

Code: Select all

.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;
}

Re: Kleines Experiment: Dark-Mode

Posted: Thu 29. Apr 2021, 14:10
by 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 ;)

Re: Kleines Experiment: Dark-Mode

Posted: Thu 29. Apr 2021, 19:18
by Lou Zypher
Very nicely done, the color scheme is really harmonious in my opinion.

Thumbs up!

Re: Kleines Experiment: Dark-Mode

Posted: Wed 12. May 2021, 23:57
by keyhelpuser
The link to the new css file is always available in my signature. It will be easier this way ;)

Re: Kleines Experiment: Dark-Mode

Posted: Fri 18. Feb 2022, 19:20
by 24unix
keyhelpuser wrote: Wed 12. May 2021, 23:57 The link to the new css file is always available in my signature. It will be easier this way ;)
I really like your theme, orange/mango is my favorite accent color :)

But, when one compares your theme with the one from page 1, there are too many light regions.

Are you still working on this theme?

Re: Kleines Experiment: Dark-Mode

Posted: Fri 18. Feb 2022, 21:41
by keyhelpuser
Hi, I've been a bit busy in the last few weeks, of course I'm continuing the project - a new edition of the theme will be available next week.

Re: Kleines Experiment: Dark-Mode

Posted: Sat 19. Feb 2022, 11:11
by 24unix
keyhelpuser wrote: Fri 18. Feb 2022, 21:41 Hi, I've been a bit busy in the last few weeks, of course I'm continuing the project - a new edition of the theme will be available next week.
Wow that looks awesome. Please keep us updated.

Re: Kleines Experiment: Dark-Mode

Posted: Sun 20. Feb 2022, 19:36
by keyhelpuser
Hello everyone, I had a little spare time so theme 1.2 for keyhelp has been released - link in signature.

Re: Kleines Experiment: Dark-Mode

Posted: Sun 20. Feb 2022, 19:43
by 24unix
keyhelpuser wrote: Sun 20. Feb 2022, 19:36 Hello everyone, I had a little spare time so theme 1.2 for keyhelp has been released - link in signature.
Thank you for the great work. I was too fast with my documentation:
https://git.24unix.net/tracer/bindAPI

I'll recreate my screenshots tomorrow with the new awesome Dark theme.

Re: Kleines Experiment: Dark-Mode

Posted: Sun 20. Feb 2022, 22:27
by keyhelpuser
The next version 1.3 will be available soon, additionally I will make a typical black theme and that's it. I am slowly getting ready to create a theme from scratch but that will be a different story ;)

bindAPI - great thing! I downloaded the repository to a private git server as a mirror

Re: Kleines Experiment: Dark-Mode

Posted: Mon 21. Feb 2022, 01:01
by 24unix
keyhelpuser wrote: Sun 20. Feb 2022, 22:27 bindAPI - great thing! I downloaded the repository to a private git server as a mirror
You're welcome.

Everything besides MS-GitHub is OK.

Re: Kleines Experiment: Dark-Mode

Posted: Sat 26. Feb 2022, 22:17
by 24unix
BTW, why are LE Certs yellow?

They are not less secure than commercial ones, I find it misleading to mark them yellow instead of green.

Not to be taken too seriously :-)
It would even be better to mark certs from Comodo & Co as red:

"Hey, fool, you're wasting money!“ :-)

Re: Kleines Experiment: Dark-Mode

Posted: Sat 26. Feb 2022, 23:57
by keyhelpuser
LE Certs is yellow because it is easier to distinguish them from purchased certificates - green ;)

Theme keyhelp 1.3 in beta has been released!

Re: Kleines Experiment: Dark-Mode

Posted: Sun 27. Feb 2022, 00:21
by 24unix
keyhelpuser wrote: Sat 26. Feb 2022, 23:57 LE Certs is yellow because it is easier to distinguish them from purchased certificates - green ;)

Theme keyhelp 1.3 in beta has been released!
Green means good, yellow means not so good.

I'd suggest changing the order.

I'll check out 1.3 later.
Thanks for your efforts.

Re: Kleines Experiment: Dark-Mode

Posted: Sat 7. Jan 2023, 23:40
by keyhelpuser
Theme keyhelp 1.4 BETA has been released