ForHosting KIT · Lettura e monitoraggio di siti web

Generi il meta tag color-scheme e la proprietà CSS

Questo generatore trasforma una scelta di compatibilità in due dichiarazioni pronte da copiare: l'elemento meta HTML per l'intestazione e la proprietà CSS color-scheme corrispondente.

● BetaGratis · nel tuo browser

Esegui gratis nel browser Vedi l'API

Usalo da WebAPIEmailTelegramApp presto

Scelga chiaro se la pagina supporta soltanto un'interfaccia chiara, scuro se supporta solo quella scura oppure entrambe quando ogni componente è stato progettato per i due aspetti. Il risultato è deterministico, normalizzato e pronto per template, fogli di stile, siti statici, librerie di componenti o pipeline di compilazione.

Dichiari gli schemi realmente supportati

La dichiarazione color-scheme è una promessa sulla pagina, non un convertitore automatico di temi. Selezioni chiaro soltanto quando controlli, sfondi, testo, bordi, immagini e stati di focus restano utilizzabili con una presentazione chiara. Selezioni scuro quando gli stessi elementi sono stati preparati per una presentazione scura. Scelga entrambe quando l'intera interfaccia funziona nei due schemi. Il generatore converte quest'ultima scelta in <code>light dark</code>, indicando prima il chiaro. La precisione è importante perché il browser può usare questa informazione per controlli nativi, barre di scorrimento e sfondo del documento. Una dichiarazione eccessiva può produrre controlli incoerenti o lampi illeggibili. Verifichi campi disabilitati, compilazione automatica, messaggi di convalida, selezione del testo, blocchi di codice, widget e icone. Il valore migliore è la descrizione più limitata e veritiera del supporto pubblicato. Lo strumento formatta la descrizione; progettazione e test ne confermano la correttezza.

Inserisca HTML e CSS nelle posizioni corrette

Inserisca l'elemento meta nel <code><head></code> del documento, preferibilmente prima che il browser disegni una parte sostanziale dell'interfaccia. Il tag restituito è completo e può essere aggiunto a HTML statico, layout renderizzati sul server o configurazioni dell'intestazione di un generatore di siti. Collochi la dichiarazione CSS nella regola che rappresenta l'ambito desiderato. Per tutto il documento sarà spesso <code>:root</code>; un componente può applicarla alla propria radice. Il generatore restituisce la dichiarazione senza selettore, rendendola utile con CSS normale, preprocessori, moduli CSS e oggetti di stile. Le due uscite condividono lo stesso valore normalizzato ed evitano discordanze tra metadati e stili. Può usarle insieme come indicazione anticipata e valore esplicito nella cascata, oppure integrare solo quella necessaria. Controlli infine il sorgente renderizzato e il CSS compilato: framework, gestori dell'intestazione, minificatori o dichiarazioni duplicate possono cambiare il valore che arriva al browser.

Separi il supporto dalla selezione del tema

Supportare due schemi e scegliere il tema attivo sono compiti collegati ma diversi. <code>light dark</code> dichiara compatibili entrambe le presentazioni; non crea variabili di colore, un selettore, una preferenza persistente o media query. Un'implementazione solida definisce variabili semantiche per superfici, testo, bordi e accenti, quindi le modifica con la strategia scelta dal prodotto. Questa può seguire il sistema operativo, rispettare un'impostazione dell'account, reagire a un attributo del documento o combinare più metodi. Generi la dichiarazione solo dopo aver completato gli stati visivi. Provi impostazioni chiare e scure, tastiera, zoom, contrasto elevato e colori forzati. Controlli inoltre immagini, iframe, moduli esterni, evidenziazione della sintassi e finestre native. Nell'automazione conservi l'input insieme alle stringhe generate. Se un tema viene eliminato, rigeneri entrambe le dichiarazioni dalla nuova scelta anziché modificarne una manualmente. Una fonte unica evita divergenze tra template, pacchetti e distribuzioni.

Casi d'uso

Prepari l'intestazione di una pagina

Crei un elemento meta corretto per una pagina statica o un layout server senza ricordare la sintassi esatta.

Mantenga allineati CSS e metadati

Generi entrambe le dichiarazioni da una scelta, evitando che foglio di stile e intestazione annuncino schemi diversi.

Automatizzi la base dei temi

Usi l'output deterministico in generatori di progetti, documentazione, componenti o build configurabili.

Domande frequenti

Che cosa genera l'opzione entrambe?

Genera il valore light dark, un meta tag con tale contenuto e la corrispondente dichiarazione CSS color-scheme.

Questo strumento crea un tema scuro?

No. Dichiara gli schemi supportati; Lei deve ancora preparare colori, risorse, stati e strategia di selezione.

Devo usare il meta tag, la proprietà CSS o entrambi?

Usi ciò che richiede la Sua architettura. Insieme offrono un'indicazione anticipata e un valore esplicito nella cascata.

Posso omettere lo schema e usare un valore predefinito?

No. La scelta è obbligatoria perché un valore implicito potrebbe descrivere falsamente il supporto della pagina.

Quanto costa una chiamata API?

Ogni richiesta API costa $0.002. L'esperienza web può eseguire localmente la stessa logica deterministica.

Per sviluppatori — accesso via API

Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.

Endpoint

POSThttps://api.kit.forhosting.com/web/color-scheme-meta-generate

Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.

Chiamala dal tuo stack

curl -X POST https://api.kit.forhosting.com/web/color-scheme-meta-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"scheme":"both"}'

const res = await fetch("https://api.kit.forhosting.com/web/color-scheme-meta-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "scheme": "both"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/color-scheme-meta-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "scheme": "both"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/color-scheme-meta-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"scheme":"both"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"scheme":"both"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/color-scheme-meta-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Esempio di richiesta

{
  "scheme": "both"
}

Esempio di risposta

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.color_scheme_meta_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.

Prezzi

per richiesta$0.002

Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.

Limiti

`timeout_sec`	30
`max_crawl_pages`	25

Errori

HTTP	Codice	Significato
`401`	`unauthorized`	Chiave API mancante o non valida: controlla l'header Authorization.
`402`	`insufficient_balance`	Credito esaurito: ricarica per continuare a eseguire attività.
`404`	`unknown_type`	Tipo di attività sconosciuto: controlla il campo type della richiesta.
`429`	`rate_limited`	Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo.

Leggi la documentazione completa del KIT →