V5 Client Portal - How to dark theme...!?

Hosted • invoicing.co | v5
1

Hello,

My clients asking me for dark theme in client portal
this is any option for this…!?

Thanks!

2

Hi,

I don’t believe this is supported, feel free to create an issue here to request it.

1 Like
3

A quick and dirty trick I tried for this was running the client portal with a chromium extension like Dark Reader and then export its custom generated CSS and import it in Invoice Ninja. Voilà, you get dark mode with only a couple of clicks! There are some quirks that require manual fixing (like svg icons being too dark and the like), but that’s a good starting point IMO.

1 Like
4

I will try this - Thank You!

1 Like
5

If you end up with a well optimized CSS in the end it could be nice to share it with others here :slight_smile:

6

I try some several CSS but non of them work ;(

My Request

Non of this below work for me :frowning:

body {
  background-color: #333 !important; /* Change background color to a dark color */
  color: #fff !important; /* Change text color to a light color */
}
a {
  color: #fff !important; /* Change link color to a light color */
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: #111 !important; /* Change background color to a dark color */
}


tab-size: 4;
-webkit-text-size-adjust: 100%;
--primary-color: #333333;
-webkit-font-smoothing: antialiased;
border-width: 0;
border-style: solid;
--tw-border-opacity: 1;
border-color: #111;
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #444;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
transition: opacity 1s ease;
position: fixed;
overflow: hidden;
box-sizing: border-box;
font-family: Helvetica,Calibri,Arial,sans-serif;
font-size: 16px;
line-height: 1.5em;
flex-wrap: nowrap;
z-index: 9999;
color: #fff;
background-color: #111;
opacity: 0;
padding: 1em 1.8em;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-

tab-size: 4;
-webkit-text-size-adjust: 100%;
--primary-color: #333333;
-webkit-font-smoothing: antialiased;
border-width: 0;
border-style: solid;
--tw-border-opacity: 1;
border-color: #111;
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #444;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
transition: opacity 1s ease;
position: fixed;
overflow: hidden;
box-sizing: border-box;
font-family: Helvetica,