CSS personalizado

Publicado inicialmente por LavaC en el foro de la comunidad:

Tutorial of custom cssAnytype Community

Si necesitas ayuda con esta guía de CSS o con CSS en general, envía un comentario al tema original, en el enlace anterior.

Dónde encontrar la opción

Para habilitar la hoja de estilos CSS personalizada, ve a Menú > Archivo > Aplicar CSS personalizado.

Para editar el archivo CSS personalizado, ve a Menú > Archivo > Abrir > CSS personalizado.

Cómo funciona

Muchos de los métodos de este artículo están orientados a principiantes y no emplean las prácticas más recomendables. Si ya sabes de CSS, podrás saltarte la mayor parte del contenido.

Color del tema

En desarrollo de software, se suele empezar por establecer primero una base de variables de estilo. Es igual en Anytype. Si quieres aplicar tu propio estilo, normalmente empezarás por aquí.

Estas variables suelen estar bajo el selector :root y podemos verlas con las herramientas de desarrollo.

Por ejemplo, --color-text-primary parece ser la variable de color para el texto negro más oscuro, así que podemos escribir esto en el archivo custom.css:

Después de guardar, puedes actualizar Anytype pulsando (Cmd/Ctrl) + R.

También puedes modificarlo con las herramientas de desarrollo y ver los efectos al instante.

Aquí podemos ver que el valor red (rojo) ha sustituido el valor predefinido y mi texto se ha vuelto rojo.

Lo que viene a continuación es una parte del archivo custom.css que modifiqué basándome en Solarized 18. Es como un juego de rellenar palabras: cambia alguna de las variables para ver el efecto que tiene y así sabrás lo que tienes que modificar.

:root {
    --color-text-primary: #002b36;
    --color-text-secondary:	#586e75;
    --color-text-tertiary: 	#839496;
    --color-text-inversion: #eee8d5;
    --color-shape-primary: 	#586e75;
    --color-shape-secondary: 	#eee8d5;
    --color-shape-tertiary: 	#eee8d5;
    --color-shape-highlight-medium: rgba(79, 79, 79, 0.08);
    --color-shape-highlight-light: rgba(79, 79, 79, 0.04);
    --color-control-accent: #252525;
    --color-control-active: #b6b6b6;
    --color-control-inactive: #dcdcdc;
    --color-control-bg: #fff;
    --color-bg-primary: #fdf6e3;
    --color-bg-loader: rgba(255,255,255,0.7);
    --color-system-accent-100: #ffb522;
    --color-system-accent-50: #ffd15b;
    --color-system-accent-25: #ffee94;
    --color-system-selection: rgba(24, 163, 241, 0.15);
    --color-system-drop-zone: rgba(255, 187, 44, 0.25);
    --color-yellow: #ecd91b;
    --color-orange: #ffb522;
    --color-red: #f55522;
    --color-pink: #e51ca0;
    --color-purple: #ab50cc;
    --color-blue: #3e58eb;
    --color-ice: #2aa7ee;
    --color-teal: #0fc8ba;
    --color-lime: #5dd400;
    --color-green: #66B395;
}

Tipografía

En CSS, el atributo relacionado con los tipos de letra (también llamados «fuentes») es font-family. Para asegurarnos de que todo el texto usa el mismo tipo de letra, ponemos el estilo en el elemento body.

body {
    font-family: "霞鹜文楷", "jetBrainsMono";
}

Por supuesto, el requisito previo para que funcione es que tengas ese tipo de letra en tu ordenador; si no es así, puedes instalarla o importarla de Internet.

Importar tipo de letra de Internet

Modo oscuro

Los estilos del modo oscuro se deben especificar dentro de html.themeDark.

/* El valor por defecto se aplica al modo claro */
.blocks {
    .block.blockText.textCallout>.wrapContent{
        border-radius: 30px;
    }
}

html.themeDark {
    /* Se aplica al modo oscuro */
    --color-text-primary: red;
    .blocks {
        .block.blockText.textCallout>.wrapContent{
            border-radius: 2px;
        }
    }
}

Otros elementos

Si quieres modificar un elemento concreto, puedes abrir las herramientas de desarrollo, en la esquina superior izquierda, y seleccionar el elemento que quieres modificar; al hacerlo, verás los estilos que le afectan en la columna Estilos.

Puedes probar a modificar directamente los valores para ver su efecto.

Si crees que los efectos no están mal, puedes copiar todo este contenido en tu hoja de estilos custom.css para guardarlo.

Cambiar iconos

Los iconos de Anytype usan el formato SVG.

Por ejemplo, los iconos de relación

El texto que comienza con data:image/svg... son los datos de SVG convertidos a Base64. Puedes descifrar estos datos en este sitio web, por ejemplo, para obtener la imagen SVG.

Si quieres usar un icono propio, puedes convertir tu SVG a formato Base64 empleando, por ejemplo, un sitio web.

Como fuente para los iconos SVG, recomiendo este sitio web.

Procura que tu icono SVG no sea muy complicado para que el texto en Base64 no se alargue demasiado.

Cuando obtengamos el texto en Base64, sustituimos el original y habremos cambiado el icono.

.header .icon.relation {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvb......);
}

image

Si crees que el icono original está muy bien y solo quieres cambiar el color, también hay una forma de conseguirlo, aunque un poco complicada.

.header .icon.relation {
  // El contenido de `url` en la siguiente línea es el contenido del atributo `background-image` de este icono. 
  mask-image: url(data:image/svg+xml;base64,.......);
  mask-repeat: no-repeat;
  background: red; // el color que quieras
}

Si has usado PS, deberías ser capaz de adivinar que se trata de una función de máscara similar, pero el resultado final no es muy fino.\

Ejemplos

Anytype Mist (Light/Dark) - A brand new Anytype themeAnytype Community