cwchristerw/themes
1
0
Fork 0
Code Activity

Add Vaultwarden theme

Browse Source
This commit is contained in:
Christer Warén
2026-03-09 08:43:18 +02:00
parent e527ee7269
commit c60b2f1dd7
1 changed files with 217 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
vaultwarden/cwchristerw/custom.css Normal file
View File

@@ -0,0 +1,217 @@
/*
Christer Warén - Themes
https://git.waren.io/cwchristerw/themes
*/
:root {
--color-transparent-hover: rgb(255 255 255 / 0.02);
--color-shadow: 0 0 0;
--color-background: 32 39 51;
--color-background-alt: 18 26 39;
--color-background-alt2: 47 52 61;
--color-background-alt3: 48 57 70;
--color-background-alt4: 18 26 39;
--color-primary-100: 29 46 99;
--color-primary-300: 26 65 172;
--color-primary-600: 101 171 255;
--color-primary-700: 170 195 239;
--color-secondary-100: 48 57 70;
--color-secondary-300: 82 91 106;
--color-secondary-500: 121 128 142;
--color-secondary-600: 143 152 166;
--color-secondary-700: 158 167 181;
--color-success-100: 8 81 15;
--color-success-600: 107 241 120;
--color-success-700: 213 243 216;
--color-danger-100: 149 27 42;
--color-danger-600: 255 78 99;
--color-danger-700: 255 236 239;
--color-warning-100: 142 64 0;
--color-warning-600: 255 191 0;
--color-warning-700: 255 244 212;
--color-info-100: 13 36 123;
--color-info-600: 121 161 233;
--color-info-700: 219 229 246;
--color-notification-100: 117 37 83;
--color-notification-600: 255 143 208;
--color-text-main: 243 246 249;
--color-text-muted: 136 152 181;
--color-text-contrast: 18 26 39;
--color-text-alt2: 255 255 255;
--color-text-code: 255 143 208;
--color-hover-default: rgb(170 195 239 / 0.1);
--color-hover-contrast: rgb(0 0 0 / 0.15);
--color-marketing-logo: 255 255 255;
--color-bw-blue: 23 93 220;
--tw-ring-offset-color: #1f242e;
--color-illustration-outline: 23 93 220;
--color-illustration-bg-primary: 170 195 239;
--color-illustration-bg-secondary: 121 161 233;
--color-illustration-bg-tertiary: 243 246 249;
--color-illustration-tertiary: 255 191 0;
--color-illustration-logo: 255 255 255;
/* ========================================
* SEMANTIC FOREGROUND COLORS (Dark Mode Overrides)
* ======================================== */
/* Neutral Foreground */
--color-fg-contrast: var(--color-gray-900);
--color-fg-heading: var(--color-gray-050);
--color-fg-body: var(--color-gray-200);
--color-fg-body-subtle: var(--color-gray-400);
--color-fg-disabled: var(--color-gray-600);
/* Brand Foreground */
--color-fg-brand-soft: var(--color-brand-500);
--color-fg-brand: var(--color-brand-400);
--color-fg-brand-strong: var(--color-brand-200);
/* Status Foreground */
--color-fg-success: var(--color-green-400);
--color-fg-success-strong: var(--color-green-100);
--color-fg-danger: var(--color-red-400);
--color-fg-danger-strong: var(--color-red-100);
--color-fg-warning: var(--color-orange-400);
--color-fg-warning-strong: var(--color-orange-100);
--color-fg-sensitive: var(--color-pink-300);
/* Accent Foreground */
--color-fg-accent-primary-soft: var(--color-teal-400);
--color-fg-accent-primary: var(--color-teal-300);
--color-fg-accent-primary-strong: var(--color-teal-100);
--color-fg-accent-secondary-soft: var(--color-coral-500);
--color-fg-accent-secondary: var(--color-coral-400);
--color-fg-accent-secondary-strong: var(--color-coral-100);
--color-fg-accent-tertiary-soft: var(--color-purple-500);
--color-fg-accent-tertiary: var(--color-purple-400);
--color-fg-accent-tertiary-strong: var(--color-purple-100);
/* ========================================
* SEMANTIC BACKGROUND COLORS (Dark Mode Overrides)
* ======================================== */
/* Neutral Background */
--color-bg-contrast: var(--color-gray-050);
--color-bg-contrast-strong: var(--color-gray-050);
--color-bg-primary: var(--color-gray-900);
--color-bg-secondary: var(--color-gray-800);
--color-bg-tertiary: var(--color-gray-950);
--color-bg-quaternary: var(--color-gray-700);
--color-bg-gray: var(--color-gray-600);
--color-bg-disabled: var(--color-gray-950);
/* Brand Background */
--color-bg-brand-softer: var(--color-brand-950);
--color-bg-brand-soft: var(--color-brand-900);
--color-bg-brand-medium: var(--color-brand-800);
--color-bg-brand: var(--color-brand-400);
--color-bg-brand-strong: var(--color-brand-300);
/* Status Background */
--color-bg-success-soft: var(--color-green-950);
--color-bg-success-medium: var(--color-green-900);
--color-bg-success: var(--color-green-400);
--color-bg-success-strong: var(--color-green-300);
--color-bg-danger-soft: var(--color-red-950);
--color-bg-danger-medium: var(--color-red-900);
--color-bg-danger: var(--color-red-400);
--color-bg-danger-strong: var(--color-red-300);
--color-bg-warning-soft: var(--color-orange-950);
--color-bg-warning-medium: var(--color-orange-900);
--color-bg-warning: var(--color-orange-400);
--color-bg-warning-strong: var(--color-orange-300);
/* Accent Background */
--color-bg-accent-primary-soft: var(--color-teal-950);
--color-bg-accent-primary-medium: var(--color-teal-900);
--color-bg-accent-primary: var(--color-teal-400);
--color-bg-accent-secondary-soft: var(--color-coral-950);
--color-bg-accent-secondary-medium: var(--color-coral-900);
--color-bg-accent-secondary: var(--color-coral-400);
--color-bg-accent-tertiary-soft: var(--color-purple-950);
--color-bg-accent-tertiary-medium: var(--color-purple-900);
--color-bg-accent-tertiary: var(--color-purple-600);
/* Hover & Overlay */
--color-bg-hover: rgba(var(--color-white-rgb), 0.05);
--color-bg-overlay: rgba(var(--color-gray-950-rgb), 0.85);
/* ========================================
* SEMANTIC BORDER COLORS (Dark Mode Overrides)
* ======================================== */
/* Neutral Border */
--color-border-muted: var(--color-gray-900);
--color-border-light: var(--color-gray-800);
--color-border-base: var(--color-gray-700);
--color-border-strong: var(--color-gray-400);
--color-border-buffer: var(--color-gray-950);
/* Brand Border */
--color-border-brand-soft: var(--color-brand-800);
--color-border-brand: var(--color-brand-400);
--color-border-brand-strong: var(--color-brand-200);
/* Status Border */
--color-border-success-soft: var(--color-green-800);
--color-border-success: var(--color-green-400);
--color-border-success-strong: var(--color-green-200);
--color-border-danger-soft: var(--color-red-800);
--color-border-danger: var(--color-red-400);
--color-border-danger-strong: var(--color-red-200);
--color-border-warning-soft: var(--color-orange-800);
--color-border-warning: var(--color-orange-400);
--color-border-warning-strong: var(--color-orange-200);
/* Accent Border */
--color-border-accent-primary-soft: var(--color-teal-800);
--color-border-accent-secondary-soft: var(--color-coral-800);
--color-border-accent-secondary: var(--color-coral-500);
--color-border-accent-tertiary-soft: var(--color-purple-800);
--color-border-accent-tertiary: var(--color-purple-500);
/* Focus Border */
--color-border-focus: var(--color-white);
/**========================================
* SIDENAV BACKGROUND COLORS (Dark mode)
* ======================================== */
--color-sidenav-background: var(--color-gray-800);
--color-sidenav-text: var(--color-white);
--color-sidenav-active-item: var(--color-gray-900);
--color-sidenav-item-hover: var(--color-gray-900);
--color-admin-sidenav-background: var(--color-gray-800);
--color-admin-sidenav-text: var(--color-white);
--color-admin-sidenav-active-item: var(--color-gray-900);
--color-admin-sidenav-item-hover: var(--color-gray-900);
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)), url(https://christerwaren.fi/assets/images/galaxy-2643089-low.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center;
}
.tw-bg-background-alt {
background-color: transparent !important;
}
bit-landing-footer {
display: none;
}