2015-04-12 4 views
8

Inizio a sperimentare con materiale angolare (la versione 0.8.3 è specifica).
Dal codice delle direttive correlate al tema e del codice sorgente mdThemingProvider Mi sono reso conto che la luce in primo piano è definita per il tema scuro. Ma il testo per i paragrafi di testo rimane scuro per impostazione predefinita.
Anche con il loro codice di esempio per la demo di input, esiste un problema di colore. Quando elimini il contenuto di titolo e e-mail, il testo segnaposto del campo di input diventa grigio scuro, quindi è quasi invisibile.
Sto solo guardando attraverso il loro codice sorgente della libreria e non riesco a scoprire come modificare il testo attivo per paragrafi e segnaposti per contrapporre uno.
Da brevemente a core/services/theming/theme.palette.js file Ho trovato alcune proprietà palette con prefisso nome contrasto. Quindi penso che definiscano i colori visibili sul tema scuro. Ma come attivare il tema per usarli?Come impostare colori chiari in primo piano per il testo quando si utilizza il tema scuro?

Qualcuno ha un buon suggerimento per archiviare contenuti leggibili sul tema scuro senza molti codici aggiuntivi?
Se ciò non interrompe il tema di modifica dinamico dell'intera applicazione (tramite chiamata $ mdThemeProvider dal codice js) sarebbe meraviglioso.

risposta

10

mi sono imbattuto in questo come bene e sono stato in grado di risolvere in modo soddisfacente nel mio caso (Angular Materiale v0.9.6) impostando il foregroundPalette del tema:

myApp.config(function($mdThemingProvider) { 
    $mdThemingProvider.theme('default') 
    .dark() 
    .foregroundPalette['3'] = 'rgba(255,0,0,1)'; 
}) 

Si può vedere una demo here e confrontarlo con the original foreground. Questo non sembra essere documentato pubblicamente, quindi potrebbe essere interno a AM e infatti cambierà il primo piano per l'intera app , anche se utilizzi più temi.

Ci sono quattro tonalità per il primo piano e hanno valori diversi per i temi luce e buio. Qui ci sono le impostazioni di default (da fonte AM):

var DARK_FOREGROUND = { 
    name: 'dark', 
    '1': 'rgba(0,0,0,0.87)', 
    '2': 'rgba(0,0,0,0.54)', 
    '3': 'rgba(0,0,0,0.26)', 
    '4': 'rgba(0,0,0,0.12)' 
}; 
var LIGHT_FOREGROUND = { 
    name: 'light', 
    '1': 'rgba(255,255,255,1.0)', 
    '2': 'rgba(255,255,255,0.7)', 
    '3': 'rgba(255,255,255,0.3)', 
    '4': 'rgba(255,255,255,0.12)' 
}; 

Per quanto riguarda il motivo per cui ho scelto 3, capita di essere l'ombra utilizzato da md-input-container, che ho trovato per tentativi ed errori.

+0

C'è un modo per utilizzare la luce in primo piano con una tavolozza non scura? il mio colore principale è verde e preferisco il testo bianco in alto invece che scuro –

+1

Nella barra degli strumenti, ad esempio, il mio colore primario è verde, ma preferisco il testo bianco in alto invece del nero. Tuttavia, vorrei mantenere il testo nero ovunque ci sia uno sfondo bianco. C'è un modo per configurarlo senza ricorrere al css? –

+0

Risoluzione brillante. Molte grazie. –