Style preference tab for user (#467)

public/style.css

@@ -10,6 +10,12 @@
     }
 }
 
+:root {
+    --red-diff: rgba(255, 0, 0, .1);
+    --green-diff: rgba(0, 255, 128, .1);
+    --git-diff: rgba(143, 143, 143, 0.38);
+}
+
 html {
     @apply bg-gray-50 dark:bg-gray-800;
 }
@@ -41,18 +47,19 @@ pre {
 .code .line-num {
     width: 4%;
     text-align: right;
+    vertical-align: top;
 }
 
 .red-diff {
-    background-color: rgba(255, 0, 0, .1);
+    background-color: var(--red-diff);
 }
 
 .green-diff {
-    background-color: rgba(0, 255, 128, .1);
+    background-color: var(--green-diff);
 }
 
 .gray-diff {
-    background-color: rgba(143, 143, 143, 0.38);
+    background-color: var(--git-diff);
     @apply py-4 !important
 }
 

public/style_preferences.ts

@@ -0,0 +1,45 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const noSoftWrapRadio = document.getElementById('no-soft-wrap');
+    const softWrapRadio = document.getElementById('soft-wrap');
+
+    function updateRootClass() {
+        const table = document.querySelector("table");
+
+        if (softWrapRadio.checked) {
+            table.classList.remove('whitespace-pre');
+            table.classList.add('whitespace-pre-wrap');
+        } else {
+            table.classList.remove('whitespace-pre-wrap');
+            table.classList.add('whitespace-pre');
+        }
+    }
+
+    noSoftWrapRadio.addEventListener('change', updateRootClass);
+    softWrapRadio.addEventListener('change', updateRootClass);
+
+
+    document.getElementById('removedlinecolor').addEventListener('change', function(event) {
+        const color = hexToRgba(event.target.value, 0.1);
+        document.documentElement.style.setProperty('--red-diff', color);
+    });
+
+    document.getElementById('addedlinecolor').addEventListener('change', function(event) {
+        const color = hexToRgba(event.target.value, 0.1);
+        document.documentElement.style.setProperty('--green-diff', color);
+    });
+
+    document.getElementById('gitlinecolor').addEventListener('change', function(event) {
+        const color = hexToRgba(event.target.value, 0.38);
+        document.documentElement.style.setProperty('--git-diff', color);
+    });
+});
+
+function hexToRgba(hex, opacity) {
+    hex = hex.replace('#', '');
+
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}

public/vite.config.js

@@ -15,7 +15,8 @@ export default defineConfig({
                 './public/admin.ts',
                 './public/gist.ts',
                 './public/embed.ts',
-                './public/webauthn.ts'
+                './public/webauthn.ts',
+                './public/style_preferences.ts'
             ]
         },
         assetsInlineLimit: 0,