self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-12 15:32:36 +02:00
Code Issues Releases Activity

feat(web): use css vraiables (#5022)

Browse Source
This commit is contained in:
Jason Rasmussen 2023-11-13 17:16:26 -05:00 committed by GitHub
parent 72fb421f54
commit 24670178dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/app.css
View File

@ -2,6 +2,28 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base {
:root {
/* light */
--immich-primary: 66 80 175;
--immich-bg: 255 255 255;
--immich-fg: 0 0 0;
--immich-gray: 246 246 244;
--immich-error: 229 115 115;
--immich-success: 129 199 132;
--immich-warning: 255 183 77;
/* dark */
--immich-dark-primary: 172 203 250;
--immich-dark-bg: 0 0 0;
--immich-dark-fg: 229 231 235;
--immich-dark-gray: 33 33 33;
--immich-dark-error: 211 47 47;
--immich-dark-success: 56 142 60;
--immich-dark-warning: 245 124 0;
}
}
@font-face { @font-face {
font-family: 'Work Sans'; font-family: 'Work Sans';
src: url('$lib/assets/fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations'); src: url('$lib/assets/fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');

28
web/tailwind.config.cjs
View File

@ -6,22 +6,22 @@ module.exports = {
extend: { extend: {
colors: { colors: {
// Light Theme // Light Theme
'immich-primary': '#4250af', 'immich-primary': 'rgb(var(--immich-primary) / <alpha-value>)',
'immich-bg': 'white', 'immich-bg': 'rgb(var(--immich-bg) / <alpha-value>)',
'immich-fg': 'black', 'immich-fg': 'rgb(var(--immich-fg) / <alpha-value>)',
'immich-gray': '#F6F6F4', 'immich-gray': 'rgb(var(--immich-gray) / <alpha-value>)',
'immich-error': '#e57373', 'immich-error': 'rgb(var(--immich-error) / <alpha-value>)',
'immich-success': '#81c784', 'immich-success': 'rgb(var(--immich-success) / <alpha-value>)',
'immich-warning': '#ffb74d', 'immich-warning': 'rgb(var(--immich-warning) / <alpha-value>)',
// Dark Theme // Dark Theme
'immich-dark-primary': '#adcbfa', 'immich-dark-primary': 'rgb(var(--immich-dark-primary) / <alpha-value>)',
'immich-dark-bg': 'black', 'immich-dark-bg': 'rgb(var(--immich-dark-bg) / <alpha-value>)',
'immich-dark-fg': '#e5e7eb', 'immich-dark-fg': 'rgb(var(--immich-dark-fg) / <alpha-value>)',
'immich-dark-gray': '#212121', 'immich-dark-gray': 'rgb(var(--immich-dark-gray) / <alpha-value>)',
'immich-dark-error': '#d32f2f', 'immich-dark-error': 'rgb(var(--immich-dark-error) / <alpha-value>)',
'immich-dark-success': '#388e3c', 'immich-dark-success': 'rgb(var(--immich-dark-success) / <alpha-value>)',
'immich-dark-warning': '#f57c00', 'immich-dark-warning': 'rgb(var(--immich-dark-warning) / <alpha-value>)',
}, },
fontFamily: { fontFamily: {
'immich-title': ['Snowburst One', 'cursive'], 'immich-title': ['Snowburst One', 'cursive'],