app first commit

app/src/theme/variables.css

@@ -0,0 +1,75 @@
+.transparent-content {
+  /* --background: transparent; */
+  /* --background: red */
+}
+
+:root {
+  --title-font-size: 1.5rem;
+  --artist-font-size: 1.2rem;
+  --cover-border: 6px solid var(--ion-color-tertiary);
+  --box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+
+  --text: white;
+  --text-supporting: rgba(255, 255, 255, 0.8);
+  --text-shy: rgba(255, 255, 255, 0.6);
+  --text-muted: rgba(255, 255, 255, 0.4);
+
+}
+
+/* TEMA DI BASE (light) */
+:root {
+  --ion-color-primary: #ff6f61;      /* corallo caldo, energico */
+  --ion-color-secondary: #4a90e2;    /* blu acceso, fresco */
+  --ion-color-tertiary: #f5a623;     /* arancione luminoso, vivace */
+  --ion-color-success: #2ecc71;      /* verde brillante, positivo */
+  --ion-color-warning: #f39c12;      /* giallo oro, invitante */
+  --ion-color-danger: #e74c3c;       /* rosso intenso, emozionante */
+  --ion-color-light: #fafafa;        /* bianco sporco, morbido */
+  --ion-color-medium: #95a5a6;       /* grigio neutro, equilibrato */
+  --ion-color-dark: #2c3e50;         /* blu notte, elegante */
+
+  --ion-background-color: #1e1e1e;   /* sfondo scuro per risaltare i contenuti */
+  --ion-text-color: #ffffff;          /* testo bianco per leggibilità */
+  --ion-toolbar-background: #2c3e50; /* toolbar scura e raffinata */
+  --ion-toolbar-color: #ffffff;       /* testo toolbar chiaro */
+  --ion-item-background: #34495e;     /* background di elementi, tono medio */
+}
+
+
+/* TEMA SCURO */
+body.dark {
+  --ion-color-primary: #222428;
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-tertiary: #5260ff;
+  --ion-color-success: #2fdf75;
+  --ion-color-warning: #ffc409;
+  --ion-color-danger: #eb445a;
+  --ion-color-light: #1e1e1e;
+  --ion-color-medium: #92949c;
+  --ion-color-dark: #f4f5f8;
+
+  --ion-background-color: #121212;
+  --ion-text-color: #f4f4f4;
+  --ion-toolbar-background: #1f1f1f;
+  --ion-toolbar-color: #f4f4f4;
+  --ion-item-background: #1e1e1e;
+}
+
+/* TEMA ROSSO PERSONALIZZATO */
+body.red {
+  --ion-color-primary: #ff4d4f;
+  --ion-color-secondary: #ffa39e;
+  --ion-color-tertiary: #d32029;
+  --ion-color-success: #52c41a;
+  --ion-color-warning: #faad14;
+  --ion-color-danger: #cf1322;
+  --ion-color-light: #fff1f0;
+  --ion-color-medium: #d9d9d9;
+  --ion-color-dark: #000000;
+
+  --ion-background-color: #fff2f0;
+  --ion-text-color: #330000;
+  --ion-toolbar-background: #fff1f0;
+  --ion-toolbar-color: #990000;
+  --ion-item-background: #fff0f0;
+}