From 4c82b3ed2c16661fab5b238e9cc98c5bfc12281a Mon Sep 17 00:00:00 2001
From: Roy Borgen <roy@borgen.com>
Date: Thu, 21 May 2026 22:01:18 +0200
Subject: [PATCH 1/8] Added dark theme CSS and automatic theme switching based
 on OS/browser settings

---
 radicale/web/internal_data/index.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/radicale/web/internal_data/index.html b/radicale/web/internal_data/index.html
index ae6adc8c..15ed34a3 100644
--- a/radicale/web/internal_data/index.html
+++ b/radicale/web/internal_data/index.html
@@ -12,7 +12,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Radicale Web Interface</title>
-  <link href="css/main.css" type="text/css" media="screen" rel="stylesheet">
+  <link href="css/main.css" rel="stylesheet" media="(prefers-color-scheme: light)">
+  <link href="css/main-dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">
   <link href="css/icon.png" type="image/png" rel="icon">
   <script type="module" src="js/main.js"></script>
 </head>
@@ -407,4 +408,4 @@
   </main>
 </body>
 
-</html>
\ No newline at end of file
+</html>

From e79bfa5def1c2cf616152dec277960c772b7c402 Mon Sep 17 00:00:00 2001
From: Roy Borgen <roy@borgen.com>
Date: Thu, 21 May 2026 22:03:09 +0200
Subject: [PATCH 2/8] added dark theme css

---
 radicale/web/internal_data/css/main-dark.css | 636 +++++++++++++++++++
 1 file changed, 636 insertions(+)
 create mode 100644 radicale/web/internal_data/css/main-dark.css

diff --git a/radicale/web/internal_data/css/main-dark.css b/radicale/web/internal_data/css/main-dark.css
new file mode 100644
index 00000000..059e1d2e
--- /dev/null
+++ b/radicale/web/internal_data/css/main-dark.css
@@ -0,0 +1,636 @@
+body {
+    background: #0f1115;
+    color: #e5e7eb;
+    font-family: sans-serif;
+    font-size: 14pt;
+    margin: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    align-content: center;
+    align-items: flex-start;
+    justify-content: space-around;
+}
+
+main {
+    width: 100%;
+}
+
+.container {
+    height: auto;
+    min-height: 500px;
+    width: 95%;
+    max-width: 450px;
+    box-sizing: border-box;
+    transition: .2s;
+    overflow: hidden;
+    padding: 1ex 1em 1ex 1em;
+    background: #1b1b22;
+    border: 1px solid #2a2a33;
+    border-radius: 8px;
+    box-shadow: 2px 2px 10px #00000066;
+    display: block;
+    flex-shrink: 0;
+    margin: 0 auto;
+}
+
+.container h1 {
+    margin: 0;
+    width: 100%;
+    text-align: center;
+    color: #e5e7eb;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1ex 0;
+}
+
+th,
+td {
+    text-align: left;
+    font-size: 0.8em;
+    padding: 0.2ex 0.2em;
+}
+
+tr {
+    border-bottom: 1px solid #2a2a33;
+}
+
+tr:last-child {
+    border-bottom: none;
+}
+
+th {
+    font-size: 0.8em;
+    color: #a1a1aa;
+    font-weight: normal;
+    text-transform: uppercase;
+}
+
+td.fill {
+    width: 100%;
+}
+
+details {
+    border: 1px solid #2a2a33;
+    border-radius: 0.7ex;
+    padding: 0.5ex 0.7ex;
+    margin-bottom: 1ex;
+    background: #1b1b22;
+}
+
+summary {
+    font-weight: bold;
+    cursor: pointer;
+    padding: 0.2ex 0;
+    outline: none;
+}
+
+summary:hover {
+    color: #2494fe;
+}
+
+#loginscene .infcloudlink {
+    margin: 0;
+    width: 100%;
+    text-align: center;
+    color: #a1a1aa;
+}
+
+#loginscene .infcloudlink-hidden {
+    visibility: hidden;
+}
+
+#loginscene .logocontainer {
+    width: 100%;
+    text-align: center;
+}
+
+#loginscene .logocontainer img {
+    width: 75px;
+}
+
+#loginscene h1 {
+    text-align: center;
+    font-family: sans-serif;
+    font-weight: normal;
+}
+
+#loginscene button {
+    float: right;
+}
+
+#loadingscene {
+    width: 100%;
+    height: 100%;
+    background: #12141a;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: 999;
+}
+
+#loadingscene h2 {
+    font-size: 2em;
+    font-weight: bold;
+}
+
+#logoutview {
+    width: 100%;
+    display: block;
+    background: #1b1b22;
+    text-align: center;
+    padding: 10px 0px;
+    color: #a1a1aa;
+    border-bottom: 2px solid #2a2a33;
+    position: fixed;
+}
+
+#logoutview span {
+    width: calc(100% - 60px);
+    display: inline-block;
+    word-wrap: break-word;
+}
+
+#logoutview a {
+    color: #e5e7eb;
+    text-decoration: none;
+    padding: 3px 10px;
+    position: relative;
+    border-radius: 4px;
+}
+
+#logoutview a[data-name=logout] {
+    right: 25px;
+    float: right;
+}
+
+#logoutview a[data-name=refresh] {
+    left: 25px;
+    float: left;
+}
+
+#logoutview .version {
+    float: right !important;
+    width: auto !important;
+    margin-right: 10px;
+    position: relative;
+    right: 25px;
+    font-size: 0.8em;
+    color: #6b7280;
+    line-height: 2.2em;
+}
+
+#collectionsscene {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    align-items: center;
+    margin-top: 50px;
+    width: 100%;
+    height: 100vh;
+}
+
+#collectionsscene article {
+    width: 275px;
+    background: #1b1b22;
+    border-radius: 8px;
+    box-shadow: 2px 2px 10px #00000066;
+    border: 1px solid #2a2a33;
+    padding: 5px 10px;
+    padding-top: 0;
+    margin: 10px;
+    float: left;
+    min-height: 375px;
+    overflow: hidden;
+}
+
+#collectionsscene article .colorbar {
+    width: 500%;
+    height: 15px;
+    margin: 0px -100%;
+    background: #111827;
+}
+
+#collectionsscene article .title {
+    width: 100%;
+    text-align: center;
+    font-size: 1.5em;
+    display: block;
+    padding: 10px 0;
+    margin: 0;
+}
+
+#collectionsscene article small {
+    font-size: 15px;
+    float: left;
+    font-weight: normal;
+    font-style: italic;
+    padding-bottom: 10px;
+    width: 100%;
+    text-align: center;
+}
+
+#collectionsscene article input[type=text] {
+    margin-bottom: 0 !important;
+}
+
+#collectionsscene article p {
+    font-size: 1em;
+    max-height: 130px;
+    overflow: auto;
+    word-wrap: break-word;
+}
+
+#collectionsscene article:hover ul {
+    visibility: visible;
+}
+
+#collectionsscene ul {
+    visibility: hidden;
+    display: flex;
+    justify-content: space-evenly;
+    width: 60%;
+    margin: 0 20%;
+    padding: 0;
+}
+
+#collectionsscene li {
+    list-style: none;
+    display: block;
+}
+
+#collectionsscene li a {
+    text-decoration: none !important;
+    padding: 5px;
+    float: left;
+    border-radius: 5px;
+    width: 25px;
+    height: 25px;
+    text-align: center;
+}
+
+#collectionsscene article small[data-name=contentcount] {
+    font-weight: bold;
+    font-style: normal;
+}
+
+#editcollectionscene p span {
+    word-wrap: break-word;
+    font-weight: bold;
+    color: #22c55e;
+}
+
+#deletecollectionscene p span {
+    word-wrap: break-word;
+    font-weight: bold;
+    color: #ef4444;
+}
+
+#uploadcollectionscene ul {
+    margin: 10px -30px;
+    max-height: 600px;
+    overflow-y: scroll;
+}
+
+#uploadcollectionscene li {
+    border-bottom: 1px dashed #2a2a33;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+}
+
+#uploadcollectionscene div[data-name=pending] {
+    width: 100%;
+    text-align: center;
+}
+
+#uploadcollectionscene .successmessage {
+    color: #22c55e;
+    width: 100%;
+    text-align: center;
+    display: block;
+    margin-top: 15px;
+}
+
+#newshare input[type=text] {
+    margin-bottom: 0 !important;
+}
+
+.deleteconfirmationtxt {
+    text-align: center;
+    font-size: 1em;
+    font-weight: bold;
+}
+
+.fabcontainer {
+    display: flex;
+    flex-direction: column-reverse;
+    position: fixed;
+    bottom: 5px;
+    right: 0;
+}
+
+.fabcontainer a {
+    width: 30px;
+    height: 30px;
+    text-decoration: none;
+    color: #e5e7eb;
+    border: none !important;
+    border-radius: 100%;
+    margin: 5px 10px;
+    background: #111827;
+    text-align: center;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+    padding: 10px;
+    box-shadow: 2px 2px 10px #000000aa;
+}
+
+.title {
+    word-wrap: break-word;
+    font-weight: bold;
+}
+
+.icon {
+    width: 100%;
+    height: 100%;
+    filter: invert(1);
+}
+
+.small_icon {
+    width: 1em;
+    height: 1em;
+    filter: invert(1);
+}
+
+.med_icon {
+    width: 1.5em;
+    height: 1.5em;
+}
+
+.badge_icon {
+    width: 1em;
+    height: 1em;
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    filter: invert(1);
+    border-radius: 50%;
+    background-color: #1b1b22;
+}
+
+.smalltext {
+    font-size: 75% !important;
+}
+
+.error {
+    width: 100%;
+    display: block;
+    text-align: center;
+    color: #f87171;
+    font-family: sans-serif;
+    clear: both;
+    padding-top: 15px;
+}
+
+img.loading {
+    width: 150px;
+    height: 150px;
+}
+
+.error::before {
+    content: "!";
+    height: 1.4em;
+    color: white;
+    background: #ef4444;
+    font-weight: bold;
+    border-radius: 100%;
+    display: inline-block;
+    width: 1.4em;
+    margin-right: 5px;
+    font-size: 1em;
+    text-align: center;
+}
+
+button {
+    font-size: 1em;
+    padding: 7px 21px;
+    color: #e5e7eb;
+    border-radius: 4px;
+    float: right;
+    margin-left: 10px;
+    background: #111827;
+    cursor: pointer;
+    position: relative;
+}
+
+input,
+select {
+    width: 100%;
+    height: 3em;
+    border-style: solid;
+    border-color: #2a2a33;
+    border-width: 1px;
+    border-radius: 7px;
+    margin-bottom: 25px;
+    padding-left: 15px;
+    padding-right: 15px;
+    outline: none !important;
+    box-sizing: border-box;
+    background: #0f1115;
+    color: #e5e7eb;
+}
+
+input:active,
+input:focus,
+input:focus-visible {
+    border-color: #2494fe !important;
+    border-width: 1px !important;
+}
+
+.url-input-wrapper {
+    position: relative;
+    width: 100%;
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    clear: both;
+}
+
+td .url-input-wrapper input {
+    min-height: 4ex;
+}
+
+.url-input-wrapper input {
+    flex: 1;
+    min-width: 40px;
+    min-height: 6ex;
+    padding-left: 0.5em;
+    padding-top: 0.5ex;
+    padding-bottom: 0.5ex;
+    padding-right: 22px !important;
+    box-sizing: border-box;
+    width: 100% !important;
+    margin-bottom: 0 !important;
+    height: 2ex;
+    background: #0f1115;
+    color: #e5e7eb;
+}
+
+#collectionsscene article .url-input-wrapper {
+    margin-bottom: 15px;
+}
+
+.copy-btn {
+    flex: none;
+    margin-left: -30px;
+    background: transparent;
+    border: none;
+    color: #60a5fa;
+    font-size: 1.25em;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, transform 0.1s;
+    line-height: 1;
+    z-index: 2;
+    float: none;
+    margin-bottom: 0;
+    margin-top: 0;
+    margin-right: 8px;
+}
+
+.copy-btn:hover {
+    background-color: #1b2a3a;
+    color: #93c5fd;
+}
+
+.copy-btn:active {
+    transform: scale(0.9);
+}
+
+.copy-btn.copied {
+    color: #22c55e;
+}
+
+input[type=radio],
+input[type=checkbox] {
+    width: auto;
+    height: 1.5em;
+    padding: 0;
+    margin: 2px;
+}
+
+p.red,
+span.red {
+    color: #f87171;
+}
+
+button.red,
+a.red {
+    background: #7f1d1d;
+    border: 1px solid #991b1b;
+}
+
+button.red:hover,
+a.red:hover {
+    background: #991b1b;
+}
+
+button.red:active,
+a.red:active {
+    background: #b91c1c;
+}
+
+button.green,
+a.green {
+    background: #14532d;
+    border: 1px solid #166534;
+}
+
+button.green:hover,
+a.green:hover {
+    background: #166534;
+}
+
+button.green:active,
+a.green:active {
+    background: #22c55e;
+}
+
+button.blue,
+a.blue {
+    background: #1d4ed8;
+    border: 1px solid #1e40af;
+}
+
+button.blue:hover,
+a.blue:hover {
+    background: #2563eb;
+    cursor: pointer !important;
+}
+
+button.blue:active,
+a.blue:active {
+    background: #1e40af;
+    cursor: pointer !important;
+}
+
+button.inline {
+    padding-left: 1px;
+    padding-right: 1px;
+    min-width: 2em;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@media only screen and (max-width: 600px) {
+    #collectionsscene {
+        flex-direction: column !important;
+        flex-wrap: nowrap;
+    }
+
+    #collectionsscene ul {
+        visibility: visible !important;
+    }
+}
+
+.pill {
+    display: inline-block;
+    padding: 0.25em 0.6em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    border-radius: 0.7ex;
+    background-color: #3a3f4b;
+    color: #e5e7eb;
+    margin: 0 2px;
+    min-width: 1.3em;
+}
+
+.hidden {
+    display: none !important;
+}

From 95c90df8c036a51d37bef3f7d2b204a6a5843840 Mon Sep 17 00:00:00 2001
From: Roy Borgen <roy@borgen.com>
Date: Fri, 22 May 2026 23:02:32 +0200
Subject: [PATCH 3/8] Merged dark theme into main.css using CSS variables

---
 radicale/web/internal_data/css/main-dark.css | 636 -------------------
 1 file changed, 636 deletions(-)
 delete mode 100644 radicale/web/internal_data/css/main-dark.css

diff --git a/radicale/web/internal_data/css/main-dark.css b/radicale/web/internal_data/css/main-dark.css
deleted file mode 100644
index 059e1d2e..00000000
--- a/radicale/web/internal_data/css/main-dark.css
+++ /dev/null
@@ -1,636 +0,0 @@
-body {
-    background: #0f1115;
-    color: #e5e7eb;
-    font-family: sans-serif;
-    font-size: 14pt;
-    margin: 0;
-    min-height: 100vh;
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    align-content: center;
-    align-items: flex-start;
-    justify-content: space-around;
-}
-
-main {
-    width: 100%;
-}
-
-.container {
-    height: auto;
-    min-height: 500px;
-    width: 95%;
-    max-width: 450px;
-    box-sizing: border-box;
-    transition: .2s;
-    overflow: hidden;
-    padding: 1ex 1em 1ex 1em;
-    background: #1b1b22;
-    border: 1px solid #2a2a33;
-    border-radius: 8px;
-    box-shadow: 2px 2px 10px #00000066;
-    display: block;
-    flex-shrink: 0;
-    margin: 0 auto;
-}
-
-.container h1 {
-    margin: 0;
-    width: 100%;
-    text-align: center;
-    color: #e5e7eb;
-}
-
-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 1ex 0;
-}
-
-th,
-td {
-    text-align: left;
-    font-size: 0.8em;
-    padding: 0.2ex 0.2em;
-}
-
-tr {
-    border-bottom: 1px solid #2a2a33;
-}
-
-tr:last-child {
-    border-bottom: none;
-}
-
-th {
-    font-size: 0.8em;
-    color: #a1a1aa;
-    font-weight: normal;
-    text-transform: uppercase;
-}
-
-td.fill {
-    width: 100%;
-}
-
-details {
-    border: 1px solid #2a2a33;
-    border-radius: 0.7ex;
-    padding: 0.5ex 0.7ex;
-    margin-bottom: 1ex;
-    background: #1b1b22;
-}
-
-summary {
-    font-weight: bold;
-    cursor: pointer;
-    padding: 0.2ex 0;
-    outline: none;
-}
-
-summary:hover {
-    color: #2494fe;
-}
-
-#loginscene .infcloudlink {
-    margin: 0;
-    width: 100%;
-    text-align: center;
-    color: #a1a1aa;
-}
-
-#loginscene .infcloudlink-hidden {
-    visibility: hidden;
-}
-
-#loginscene .logocontainer {
-    width: 100%;
-    text-align: center;
-}
-
-#loginscene .logocontainer img {
-    width: 75px;
-}
-
-#loginscene h1 {
-    text-align: center;
-    font-family: sans-serif;
-    font-weight: normal;
-}
-
-#loginscene button {
-    float: right;
-}
-
-#loadingscene {
-    width: 100%;
-    height: 100%;
-    background: #12141a;
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    overflow: hidden;
-    z-index: 999;
-}
-
-#loadingscene h2 {
-    font-size: 2em;
-    font-weight: bold;
-}
-
-#logoutview {
-    width: 100%;
-    display: block;
-    background: #1b1b22;
-    text-align: center;
-    padding: 10px 0px;
-    color: #a1a1aa;
-    border-bottom: 2px solid #2a2a33;
-    position: fixed;
-}
-
-#logoutview span {
-    width: calc(100% - 60px);
-    display: inline-block;
-    word-wrap: break-word;
-}
-
-#logoutview a {
-    color: #e5e7eb;
-    text-decoration: none;
-    padding: 3px 10px;
-    position: relative;
-    border-radius: 4px;
-}
-
-#logoutview a[data-name=logout] {
-    right: 25px;
-    float: right;
-}
-
-#logoutview a[data-name=refresh] {
-    left: 25px;
-    float: left;
-}
-
-#logoutview .version {
-    float: right !important;
-    width: auto !important;
-    margin-right: 10px;
-    position: relative;
-    right: 25px;
-    font-size: 0.8em;
-    color: #6b7280;
-    line-height: 2.2em;
-}
-
-#collectionsscene {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-content: flex-start;
-    align-items: center;
-    margin-top: 50px;
-    width: 100%;
-    height: 100vh;
-}
-
-#collectionsscene article {
-    width: 275px;
-    background: #1b1b22;
-    border-radius: 8px;
-    box-shadow: 2px 2px 10px #00000066;
-    border: 1px solid #2a2a33;
-    padding: 5px 10px;
-    padding-top: 0;
-    margin: 10px;
-    float: left;
-    min-height: 375px;
-    overflow: hidden;
-}
-
-#collectionsscene article .colorbar {
-    width: 500%;
-    height: 15px;
-    margin: 0px -100%;
-    background: #111827;
-}
-
-#collectionsscene article .title {
-    width: 100%;
-    text-align: center;
-    font-size: 1.5em;
-    display: block;
-    padding: 10px 0;
-    margin: 0;
-}
-
-#collectionsscene article small {
-    font-size: 15px;
-    float: left;
-    font-weight: normal;
-    font-style: italic;
-    padding-bottom: 10px;
-    width: 100%;
-    text-align: center;
-}
-
-#collectionsscene article input[type=text] {
-    margin-bottom: 0 !important;
-}
-
-#collectionsscene article p {
-    font-size: 1em;
-    max-height: 130px;
-    overflow: auto;
-    word-wrap: break-word;
-}
-
-#collectionsscene article:hover ul {
-    visibility: visible;
-}
-
-#collectionsscene ul {
-    visibility: hidden;
-    display: flex;
-    justify-content: space-evenly;
-    width: 60%;
-    margin: 0 20%;
-    padding: 0;
-}
-
-#collectionsscene li {
-    list-style: none;
-    display: block;
-}
-
-#collectionsscene li a {
-    text-decoration: none !important;
-    padding: 5px;
-    float: left;
-    border-radius: 5px;
-    width: 25px;
-    height: 25px;
-    text-align: center;
-}
-
-#collectionsscene article small[data-name=contentcount] {
-    font-weight: bold;
-    font-style: normal;
-}
-
-#editcollectionscene p span {
-    word-wrap: break-word;
-    font-weight: bold;
-    color: #22c55e;
-}
-
-#deletecollectionscene p span {
-    word-wrap: break-word;
-    font-weight: bold;
-    color: #ef4444;
-}
-
-#uploadcollectionscene ul {
-    margin: 10px -30px;
-    max-height: 600px;
-    overflow-y: scroll;
-}
-
-#uploadcollectionscene li {
-    border-bottom: 1px dashed #2a2a33;
-    margin-bottom: 10px;
-    padding-bottom: 10px;
-}
-
-#uploadcollectionscene div[data-name=pending] {
-    width: 100%;
-    text-align: center;
-}
-
-#uploadcollectionscene .successmessage {
-    color: #22c55e;
-    width: 100%;
-    text-align: center;
-    display: block;
-    margin-top: 15px;
-}
-
-#newshare input[type=text] {
-    margin-bottom: 0 !important;
-}
-
-.deleteconfirmationtxt {
-    text-align: center;
-    font-size: 1em;
-    font-weight: bold;
-}
-
-.fabcontainer {
-    display: flex;
-    flex-direction: column-reverse;
-    position: fixed;
-    bottom: 5px;
-    right: 0;
-}
-
-.fabcontainer a {
-    width: 30px;
-    height: 30px;
-    text-decoration: none;
-    color: #e5e7eb;
-    border: none !important;
-    border-radius: 100%;
-    margin: 5px 10px;
-    background: #111827;
-    text-align: center;
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    align-items: center;
-    font-size: 30px;
-    padding: 10px;
-    box-shadow: 2px 2px 10px #000000aa;
-}
-
-.title {
-    word-wrap: break-word;
-    font-weight: bold;
-}
-
-.icon {
-    width: 100%;
-    height: 100%;
-    filter: invert(1);
-}
-
-.small_icon {
-    width: 1em;
-    height: 1em;
-    filter: invert(1);
-}
-
-.med_icon {
-    width: 1.5em;
-    height: 1.5em;
-}
-
-.badge_icon {
-    width: 1em;
-    height: 1em;
-    position: absolute;
-    top: -5px;
-    right: -5px;
-    filter: invert(1);
-    border-radius: 50%;
-    background-color: #1b1b22;
-}
-
-.smalltext {
-    font-size: 75% !important;
-}
-
-.error {
-    width: 100%;
-    display: block;
-    text-align: center;
-    color: #f87171;
-    font-family: sans-serif;
-    clear: both;
-    padding-top: 15px;
-}
-
-img.loading {
-    width: 150px;
-    height: 150px;
-}
-
-.error::before {
-    content: "!";
-    height: 1.4em;
-    color: white;
-    background: #ef4444;
-    font-weight: bold;
-    border-radius: 100%;
-    display: inline-block;
-    width: 1.4em;
-    margin-right: 5px;
-    font-size: 1em;
-    text-align: center;
-}
-
-button {
-    font-size: 1em;
-    padding: 7px 21px;
-    color: #e5e7eb;
-    border-radius: 4px;
-    float: right;
-    margin-left: 10px;
-    background: #111827;
-    cursor: pointer;
-    position: relative;
-}
-
-input,
-select {
-    width: 100%;
-    height: 3em;
-    border-style: solid;
-    border-color: #2a2a33;
-    border-width: 1px;
-    border-radius: 7px;
-    margin-bottom: 25px;
-    padding-left: 15px;
-    padding-right: 15px;
-    outline: none !important;
-    box-sizing: border-box;
-    background: #0f1115;
-    color: #e5e7eb;
-}
-
-input:active,
-input:focus,
-input:focus-visible {
-    border-color: #2494fe !important;
-    border-width: 1px !important;
-}
-
-.url-input-wrapper {
-    position: relative;
-    width: 100%;
-    margin-bottom: 0;
-    display: flex;
-    align-items: center;
-    clear: both;
-}
-
-td .url-input-wrapper input {
-    min-height: 4ex;
-}
-
-.url-input-wrapper input {
-    flex: 1;
-    min-width: 40px;
-    min-height: 6ex;
-    padding-left: 0.5em;
-    padding-top: 0.5ex;
-    padding-bottom: 0.5ex;
-    padding-right: 22px !important;
-    box-sizing: border-box;
-    width: 100% !important;
-    margin-bottom: 0 !important;
-    height: 2ex;
-    background: #0f1115;
-    color: #e5e7eb;
-}
-
-#collectionsscene article .url-input-wrapper {
-    margin-bottom: 15px;
-}
-
-.copy-btn {
-    flex: none;
-    margin-left: -30px;
-    background: transparent;
-    border: none;
-    color: #60a5fa;
-    font-size: 1.25em;
-    cursor: pointer;
-    padding: 0;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    transition: background-color 0.2s, color 0.2s, transform 0.1s;
-    line-height: 1;
-    z-index: 2;
-    float: none;
-    margin-bottom: 0;
-    margin-top: 0;
-    margin-right: 8px;
-}
-
-.copy-btn:hover {
-    background-color: #1b2a3a;
-    color: #93c5fd;
-}
-
-.copy-btn:active {
-    transform: scale(0.9);
-}
-
-.copy-btn.copied {
-    color: #22c55e;
-}
-
-input[type=radio],
-input[type=checkbox] {
-    width: auto;
-    height: 1.5em;
-    padding: 0;
-    margin: 2px;
-}
-
-p.red,
-span.red {
-    color: #f87171;
-}
-
-button.red,
-a.red {
-    background: #7f1d1d;
-    border: 1px solid #991b1b;
-}
-
-button.red:hover,
-a.red:hover {
-    background: #991b1b;
-}
-
-button.red:active,
-a.red:active {
-    background: #b91c1c;
-}
-
-button.green,
-a.green {
-    background: #14532d;
-    border: 1px solid #166534;
-}
-
-button.green:hover,
-a.green:hover {
-    background: #166534;
-}
-
-button.green:active,
-a.green:active {
-    background: #22c55e;
-}
-
-button.blue,
-a.blue {
-    background: #1d4ed8;
-    border: 1px solid #1e40af;
-}
-
-button.blue:hover,
-a.blue:hover {
-    background: #2563eb;
-    cursor: pointer !important;
-}
-
-button.blue:active,
-a.blue:active {
-    background: #1e40af;
-    cursor: pointer !important;
-}
-
-button.inline {
-    padding-left: 1px;
-    padding-right: 1px;
-    min-width: 2em;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-@media only screen and (max-width: 600px) {
-    #collectionsscene {
-        flex-direction: column !important;
-        flex-wrap: nowrap;
-    }
-
-    #collectionsscene ul {
-        visibility: visible !important;
-    }
-}
-
-.pill {
-    display: inline-block;
-    padding: 0.25em 0.6em;
-    font-size: 75%;
-    font-weight: 700;
-    line-height: 1;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    border-radius: 0.7ex;
-    background-color: #3a3f4b;
-    color: #e5e7eb;
-    margin: 0 2px;
-    min-width: 1.3em;
-}
-
-.hidden {
-    display: none !important;
-}

From ff1d0360ce8a87fcc60271648680a4f29e1f354b Mon Sep 17 00:00:00 2001
From: Roy Borgen <roy@borgen.com>
Date: Fri, 22 May 2026 23:11:34 +0200
Subject: [PATCH 4/8] Reverted back to using a single main.css and added dark
 theme auto switching

---
 radicale/web/internal_data/css/main.css | 235 ++++++++++++++++++------
 radicale/web/internal_data/index.html   |   3 +-
 2 files changed, 181 insertions(+), 57 deletions(-)

diff --git a/radicale/web/internal_data/css/main.css b/radicale/web/internal_data/css/main.css
index 04b67885..57922c4c 100644
--- a/radicale/web/internal_data/css/main.css
+++ b/radicale/web/internal_data/css/main.css
@@ -1,6 +1,130 @@
+/* Default (light mode) */
+:root {
+    color-scheme: light dark;
+    --body-bg-color: #ffffff;
+    --body-color: #424247;
+    --container-bg-color: rgb(250, 250, 250); 
+    --container-border-color: #2a2a33;
+    --container-box-shadow-color: #0000001a;
+    --container-h1-color: #484848;
+    --tr-border-bottom-color: #dadce0;
+    --th-color: #666;
+    --details-border-color: #dadce0;
+    --details-bg-color: white;
+    --summary-hover-color: #2494fe;
+    --loginscene-infcloudlink-color: #484848;
+    --loadingscene-bg-color: rgb(237 237 237);
+    --logoutview-bg-color: white;
+    --logoutview-color: #666;
+    --logoutview-border-bottom-color: #dadce0;
+    --logoutview-a-color: white;
+    --collectionsscene-article-bg-color: rgb(250, 250, 250);
+    --collectionsscene-article-box-shadow-color: #0000001a;
+    --collectionsscene-article-border-color: #dadce0;
+    --collectionsscene-article-colorbar-bg-color: #000000;
+    --editcollectionscene-p-span-color: #4e9a06;
+    --deletecollectionscene-p-span-color: #a40000;
+    --uploadcollectionscene-li-border-bottom-color: #d5d5d5;
+    --uploadcollectionscene-successmessage-color: #4e9a06;
+    --fabcontainer-a-color: white; 
+    --fabcontainer-a-bg-color: black; 
+    --fabcontainer-a-box-shadow-color: #000000d6;
+    --badge_icon-bg-color: white; 
+    --error-color: rgb(217, 48, 37); 
+    --error-before-color: white; 
+    --error-before-bg-color: rgb(217, 48, 37);
+    --button-color: white; 
+    --button-bg-color: black;
+    --input-select-border-color: #e6e6e6; 
+    --input-select-bg-color: #0f1115; 
+    --input-focus-visible-border-color: #2494fe;
+    --copy-btn-color: #2494fe;
+    --copy-btn-hover-bg-color: #f0f7ff;
+    --copy-btn-hover-color: #055fb5;
+    --copy-btn-copied-color: #4e9a06;
+    --p-red-span-red-color: #b50202;
+    --button-red-a-red-bg-color: #b50202; 
+    --button-red-a-red-border-color: #a40000; 
+    --button-red-hover-a-red-hover-bg-color: #a40000;
+    --button-red-active-a-red-active-bg-color: #8f0000; 
+    --button-green-a-green-bg-color: #4e9a06; 
+    --button-green-a-green-border-color: #377200;
+    --button-green-hover-a-green-hover-bg-color: #377200;
+    --button-green-active-a-green-active-bg-color: #285200; 
+    --button-blue-a-blue-bg-color: #2494fe;
+    --button-blue-a-blue-border-color: #055fb5;
+    --button-blue-hover-a-blue-hover-bg-color: #1578d6;
+    --button-blue-active-a-blue-active-bg-color: #055fb5;
+    --pill-bg-color: #6c757d;
+    --pill-color: #fff;
+}
+
+/* Dark mode overrides */
+@media (prefers-color-scheme: dark) {
+:root {
+    --body-bg-color: #0f1115;
+    --body-color: #e5e7eb;
+    --container-bg-color: #1b1b22;
+    --container-border-color: #2a2a33;
+    --container-box-shadow-color: #00000066;
+    --container-h1-color: #e5e7eb;
+    --tr-border-bottom-color: #2a2a33;
+    --th-color: #a1a1aa;
+    --details-border-color: #2a2a33; 
+    --details-bg-color: #1b1b22;
+    --summary-hover-color: #2494fe;
+    --loginscene-infcloudlink-color: #a1a1aa;
+    --loadingscene-bg-color: #12141a;
+    --logoutview-bg-color: #1b1b22;
+    --logoutview-color: #a1a1aa;
+    --logoutview-border-bottom-color: #2a2a33;
+    --logoutview-a-color: #e5e7eb; 
+    --logoutview-version-color: #6b7280; 
+    --collectionsscene-article-bg-color: #1b1b22;
+    --collectionsscene-article-box-shadow-color: #00000066;
+    --collectionsscene-article-border-color: #2a2a33;
+    --collectionsscene-article-colorbar-bg-color: #111827;  
+    --editcollectionscene-p-span-color: #22c55e;
+    --deletecollectionscene-p-span-color: #ef4444;
+    --uploadcollectionscene-border-bottom-color: #2a2a33;
+    --uploadcollectionscene-successmessage-color: #22c55e; 
+    --fabcontainer-a-color: #e5e7eb; 
+    --fabcontainer-a-bg-color: #111827; 
+    --fabcontainer-a-box-shadow-color: #000000aa; 
+    --badge_icon-bg-color: #1b1b22;
+    --error-color: #f87171; 
+    --error-before-color: white; 
+    --error-before-bg-color: #ef4444; 
+    --button-color: #e5e7eb; 
+    --button-bg-color: #111827; 
+    --input-select-border-color: #2a2a33; 
+    --input-select-bg-color: #0f1115; 
+    --input-focus-visible-border-color: #2494fe;
+    --copy-btn-color: #60a5fa;
+    --copy-btn-hover-bg-color: #1b2a3a;
+    --copy-btn-hover-color: #93c5fd;
+    --copy-btn-copied-color: #22c55e;
+    --p-red-span-red-color: #f87171;
+    --button-red-a-red-bg-color: #7f1d1d; 
+    --button-red-a-red-border-color: #991b1b; 
+    --button-red-hover-a-red-hover-bg-color: #991b1b;
+    --button-red-active-a-red-active-bg-color: #b91c1c; 
+    --button-green-a-green-bg-color: #14532d; 
+    --button-green-a-green-border-color: #166534;
+    --button-green-hover-a-green-hover-bg-color: #166534; 
+    --button-green-active-a-green-active-bg-color: #22c55e; 
+    --button-blue-a-blue-bg-color: #1d4ed8;
+    --button-blue-a-blue-border-color: #1e40af; 
+    --button-blue-hover-a-blue-hover-bg-color: #2563eb;
+    --button-blue-active-a-blue-active-bg-color: #1e40af;
+    --pill-bg-color: #3a3f4b;
+    --pill-color: #e5e7eb;
+}
+}
+
 body {
-    background: #ffffff;
-    color: #424247;
+    background: var(--body-bg-color);
+    color: var(--body-color);
     font-family: sans-serif;
     font-size: 14pt;
     margin: 0;
@@ -26,10 +150,10 @@ main {
     transition: .2s;
     overflow: hidden;
     padding: 1ex 1em 1ex 1em;
-    background: rgb(250, 250, 250);
-    border: 1px solid #dadce0;
+    background: var(--container-bg-color);
+    border: 1px solid var(--container-border-color); 
     border-radius: 8px;
-    box-shadow: 2px 2px 3px #0000001a;
+    box-shadow: 2px 2px 3px var(--container-box-shadow-color);
     display: block;
     flex-shrink: 0;
     margin: 0 auto;
@@ -39,7 +163,7 @@ main {
     margin: 0;
     width: 100%;
     text-align: center;
-    color: #484848;
+    color: var(--container-h1-color);
 }
 
 table {
@@ -56,7 +180,7 @@ td {
 }
 
 tr {
-    border-bottom: 1px solid #dadce0;
+    border-bottom: 1px solid var(--tr-border-bottom-color);
 }
 
 tr:last-child {
@@ -65,7 +189,7 @@ tr:last-child {
 
 th {
     font-size: 0.8em;
-    color: #666;
+    color: var(--th-color);
     font-weight: normal;
     text-transform: uppercase;
 }
@@ -75,11 +199,11 @@ td.fill {
 }
 
 details {
-    border: 1px solid #dadce0;
+    border: 1px solid var(--details-border-color);
     border-radius: 0.7ex;
     padding: 0.5ex 0.7ex;
     margin-bottom: 1ex;
-    background: white;
+    background: var(--details-bg-color);
 }
 
 summary {
@@ -90,14 +214,14 @@ summary {
 }
 
 summary:hover {
-    color: #2494fe;
+    color: var(--summary-hover-color);
 }
 
 #loginscene .infcloudlink {
     margin: 0;
     width: 100%;
     text-align: center;
-    color: #484848;
+    color: var(--loginscene-infcloudlink-color);
 }
 
 #loginscene .infcloudlink-hidden {
@@ -126,7 +250,7 @@ summary:hover {
 #loadingscene {
     width: 100%;
     height: 100%;
-    background: rgb(237 237 237);
+    background: var(--loadingscene-bg-color);
     position: absolute;
     top: 0;
     left: 0;
@@ -147,11 +271,11 @@ summary:hover {
 #logoutview {
     width: 100%;
     display: block;
-    background: white;
+    background: var(--logoutview-bg-color);
     text-align: center;
     padding: 10px 0px;
-    color: #666;
-    border-bottom: 2px solid #dadce0;
+    color: var(--logoutview-color);
+    border-bottom: 2px solid var(--logoutview-border-bottom-color);
     position: fixed;
 }
 
@@ -162,7 +286,7 @@ summary:hover {
 }
 
 #logoutview a {
-    color: white;
+    color: var(--logoutview-a-color);
     text-decoration: none;
     padding: 3px 10px;
     position: relative;
@@ -186,7 +310,7 @@ summary:hover {
     position: relative;
     right: 25px;
     font-size: 0.8em;
-    color: #999;
+    color: var(logoutview-version-color);
     line-height: 2.2em;
 }
 
@@ -203,10 +327,10 @@ summary:hover {
 
 #collectionsscene article {
     width: 275px;
-    background: rgb(250, 250, 250);
+    background: var(--collectionsscene-article-bg-color);
     border-radius: 8px;
-    box-shadow: 2px 2px 3px #0000001a;
-    border: 1px solid #dadce0;
+    box-shadow: 2px 2px 3px var(--collectionsscene-article-box-shadow-color);
+    border: 1px solid var(--collectionsscene-article-border-color);
     padding: 5px 10px;
     padding-top: 0;
     margin: 10px;
@@ -219,7 +343,7 @@ summary:hover {
     width: 500%;
     height: 15px;
     margin: 0px -100%;
-    background: #000000;
+    background: var(--collectionsscene-article-colorbar-bg-color);
 }
 
 #collectionsscene article .title {
@@ -288,13 +412,13 @@ summary:hover {
 #editcollectionscene p span {
     word-wrap: break-word;
     font-weight: bold;
-    color: #4e9a06;
+    color: var(--editcollectionscene-p-span-color); 
 }
 
 #deletecollectionscene p span {
     word-wrap: break-word;
     font-weight: bold;
-    color: #a40000;
+    color: var(--deletecollectionscene-p-span-color);
 }
 
 #uploadcollectionscene ul {
@@ -304,7 +428,7 @@ summary:hover {
 }
 
 #uploadcollectionscene li {
-    border-bottom: 1px dashed #d5d5d5;
+    border-bottom: 1px dashed var(--uploadcollectionscene-li-border-bottom-color);
     margin-bottom: 10px;
     padding-bottom: 10px;
 }
@@ -315,7 +439,7 @@ summary:hover {
 }
 
 #uploadcollectionscene .successmessage {
-    color: #4e9a06;
+    color: var(--uploadcollectionscene-successmessage-color);
     width: 100%;
     text-align: center;
     display: block;
@@ -345,11 +469,11 @@ summary:hover {
     width: 30px;
     height: 30px;
     text-decoration: none;
-    color: white;
+    color: var(--fabcontainer-a-color); 
     border: none !important;
     border-radius: 100%;
     margin: 5px 10px;
-    background: black;
+    background: var(--fabcontainer-a-bg-color);
     text-align: center;
     display: flex;
     align-content: center;
@@ -357,7 +481,7 @@ summary:hover {
     align-items: center;
     font-size: 30px;
     padding: 10px;
-    box-shadow: 2px 2px 7px #000000d6;
+    box-shadow: 2px 2px 7px var(--fabcontainer-a-box-shadow-color);
 }
 
 .title {
@@ -390,7 +514,7 @@ summary:hover {
     right: -5px;
     filter: invert(1);
     border-radius: 50%;
-    background-color: white;
+    background-color: var(--badge_icon-bg-color);
 }
 
 
@@ -402,7 +526,7 @@ summary:hover {
     width: 100%;
     display: block;
     text-align: center;
-    color: rgb(217, 48, 37);
+    color: var(--error-color); 
     font-family: sans-serif;
     clear: both;
     padding-top: 15px;
@@ -416,8 +540,8 @@ img.loading {
 .error::before {
     content: "!";
     height: 1.4em;
-    color: white;
-    background: rgb(217, 48, 37);
+    color: var(--error-before-color);
+    background: var(--error-before-bg-color);
     font-weight: bold;
     border-radius: 100%;
     display: inline-block;
@@ -430,11 +554,11 @@ img.loading {
 button {
     font-size: 1em;
     padding: 7px 21px;
-    color: white;
+    color: var(--button-color);
     border-radius: 4px;
     float: right;
     margin-left: 10px;
-    background: black;
+    background: var(--button-bg-color);
     cursor: pointer;
     position: relative;
 }
@@ -444,7 +568,7 @@ select {
     width: 100%;
     height: 3em;
     border-style: solid;
-    border-color: #e6e6e6;
+    border-color: var(--input-select-border-color);
     border-width: 1px;
     border-radius: 7px;
     margin-bottom: 25px;
@@ -466,7 +590,7 @@ input[type=password] {
 input:active,
 input:focus,
 input:focus-visible {
-    border-color: #2494fe !important;
+    border-color: var(--input-focus-visible-border-color) !important;
     border-width: 1px !important;
 }
 
@@ -506,7 +630,7 @@ td .url-input-wrapper input {
     margin-left: -30px;
     background: transparent;
     border: none;
-    color: #2494fe;
+    color: var(--copy-btn-color);
     font-size: 1.25em;
     cursor: pointer;
     padding: 0;
@@ -526,8 +650,8 @@ td .url-input-wrapper input {
 }
 
 .copy-btn:hover {
-    background-color: #f0f7ff;
-    color: #055fb5;
+    background-color: var(--copy-btn-hover-bg-color: #1b2a3a);
+    color: var(--copy-btn-hover-color: #93c5fd);
 }
 
 .copy-btn:active {
@@ -535,7 +659,7 @@ td .url-input-wrapper input {
 }
 
 .copy-btn.copied {
-    color: #4e9a06;
+    color: var(--copy-btn-copied-color);
 }
 
 input[type=radio],
@@ -548,56 +672,56 @@ input[type=checkbox] {
 
 p.red,
 span.red {
-    color: #b50202;
+    color: var(--p-red-span-red-color);
 }
 
 button.red,
 a.red {
-    background: #b50202;
-    border: 1px solid #a40000;
+    background: var(--button-red-a-red-bg-color);
+    border: 1px solid var(--button-red-a-red-border-color);
 }
 
 button.red:hover,
 a.red:hover {
-    background: #a40000;
+    background: var(--button-red-hover-a-red-hover-bg-color);
 }
 
 button.red:active,
 a.red:active {
-    background: #8f0000;
+    background: var(--button-red-active-a-red-active-bg-color);
 }
 
 button.green,
 a.green {
-    background: #4e9a06;
-    border: 1px solid #377200;
+    background: var(--button-green-a-green-bg-color);
+    border: 1px solid var(--button-green-a-green-border-color);
 }
 
 button.green:hover,
 a.green:hover {
-    background: #377200;
+    background: var(--button-green-hover-a-green-hover-bg-color);
 }
 
 button.green:active,
 a.green:active {
-    background: #285200;
+    background: var(--button-green-active-a-green-active-bg-color);
 }
 
 button.blue,
 a.blue {
-    background: #2494fe;
-    border: 1px solid #055fb5;
+    background: var(--button-blue-a-blue-bg-color);
+    border: 1px solid var(--button-blue-a-blue-border-color);
 }
 
 button.blue:hover,
 a.blue:hover {
-    background: #1578d6;
+    background: var(--button-blue-hover-a-blue-hover-bg-color);
     cursor: pointer !important;
 }
 
 button.blue:active,
 a.blue:active {
-    background: #055fb5;
+    background: var(--button-blue-active-a-blue-active-bg-color);
     cursor: pointer !important;
 }
 
@@ -641,4 +765,5 @@ button.inline {
 
 .hidden {
     display: none !important;
-}
\ No newline at end of file
+}
+
diff --git a/radicale/web/internal_data/index.html b/radicale/web/internal_data/index.html
index 15ed34a3..89aa2d34 100644
--- a/radicale/web/internal_data/index.html
+++ b/radicale/web/internal_data/index.html
@@ -12,8 +12,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Radicale Web Interface</title>
-  <link href="css/main.css" rel="stylesheet" media="(prefers-color-scheme: light)">
-  <link href="css/main-dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">
+  <link href="css/main.css" type="text/css" media="screen" rel="stylesheet">
   <link href="css/icon.png" type="image/png" rel="icon">
   <script type="module" src="js/main.js"></script>
 </head>

From fa3dae5e4d3016b42797d8e9c2a0d978d5e6e298 Mon Sep 17 00:00:00 2001
From: Roy Borgen <roy@borgen.com>
Date: Sat, 23 May 2026 09:49:47 +0200
Subject: [PATCH 5/8] Cleaned up line spacing

---
 radicale/web/internal_data/css/main.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/radicale/web/internal_data/css/main.css b/radicale/web/internal_data/css/main.css
index 57922c4c..12d437a4 100644
--- a/radicale/web/internal_data/css/main.css
+++ b/radicale/web/internal_data/css/main.css
@@ -517,7 +517,6 @@ summary:hover {
     background-color: var(--badge_icon-bg-color);
 }
 
-
 .smalltext {
     font-size: 75% !important;
 }
@@ -766,4 +765,3 @@ button.inline {
 .hidden {
     display: none !important;
 }
-

From a8a91c956b7359a7cacb2dcfd5a90242a08499b7 Mon Sep 17 00:00:00 2001
From: Roy Borgen <roy@borgen.com>
Date: Mon, 25 May 2026 00:16:28 +0200
Subject: [PATCH 6/8] Fix CSS variable syntax issues

---
 radicale/web/internal_data/css/main.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/radicale/web/internal_data/css/main.css b/radicale/web/internal_data/css/main.css
index 12d437a4..adf8c0be 100644
--- a/radicale/web/internal_data/css/main.css
+++ b/radicale/web/internal_data/css/main.css
@@ -310,7 +310,7 @@ summary:hover {
     position: relative;
     right: 25px;
     font-size: 0.8em;
-    color: var(logoutview-version-color);
+    color: var(--logoutview-version-color);
     line-height: 2.2em;
 }
 
@@ -649,8 +649,8 @@ td .url-input-wrapper input {
 }
 
 .copy-btn:hover {
-    background-color: var(--copy-btn-hover-bg-color: #1b2a3a);
-    color: var(--copy-btn-hover-color: #93c5fd);
+    background-color: var(--copy-btn-hover-bg-color);
+    color: var(--copy-btn-hover-color);
 }
 
 .copy-btn:active {

From 0095fbd6163d1585ba036fa15e9cd37a6964be25 Mon Sep 17 00:00:00 2001
From: Roy Borgen <roy@borgen.com>
Date: Mon, 25 May 2026 21:17:09 +0200
Subject: [PATCH 7/8] Keeping newline at EOF

---
 radicale/web/internal_data/css/main.css | 1 +
 radicale/web/internal_data/index.html   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/radicale/web/internal_data/css/main.css b/radicale/web/internal_data/css/main.css
index adf8c0be..79c40b6b 100644
--- a/radicale/web/internal_data/css/main.css
+++ b/radicale/web/internal_data/css/main.css
@@ -765,3 +765,4 @@ button.inline {
 .hidden {
     display: none !important;
 }
+
diff --git a/radicale/web/internal_data/index.html b/radicale/web/internal_data/index.html
index 89aa2d34..8d9d9898 100644
--- a/radicale/web/internal_data/index.html
+++ b/radicale/web/internal_data/index.html
@@ -408,3 +408,4 @@
 </body>
 
 </html>
+

From 48c21d5fd7de189ffcd0672c7574b2212311e28f Mon Sep 17 00:00:00 2001
From: Roy Borgen <roy@borgen.com>
Date: Mon, 25 May 2026 21:57:59 +0200
Subject: [PATCH 8/8] reverted index.html

---
 radicale/web/internal_data/index.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/radicale/web/internal_data/index.html b/radicale/web/internal_data/index.html
index 8d9d9898..ae6adc8c 100644
--- a/radicale/web/internal_data/index.html
+++ b/radicale/web/internal_data/index.html
@@ -407,5 +407,4 @@
   </main>
 </body>
 
-</html>
-
+</html>
\ No newline at end of file