Customize logo and colors
- Mirco Hoffmann (Unlicensed)
- Prativa Beura
Colors
You can change the colors directly in tailwind.config.js. Here is an alternative color scheme.
https://tailwindcss.com/docs/customizing-colors#color-object-syntax
const { backgroundColor } = require('tailwindcss/defaultTheme');
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
darkMode: 'class',
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
'./node_modules/@apiida/**/*.{css,js,ts}',
],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
screens: {
'2.5xl': '1743px',
'3xl': '1950px',
'4xl': '2350px',
},
colors: {
apiida: {
50: '#f8d184',
100: '#f7c76b',
200: '#f5be52',
300: '#f4b539',
400: '#f2ab21',
DEFAULT: '#F1A208',
500: '#d99207',
600: '#c18206',
700: '#a97106',
800: '#916105',
900: '#795104',
},
'apiida-blue': {
100: '#668566',
200: '#4d704d',
300: '#335c33',
400: '#1a471a',
DEFAULT: '#003300',
500: '#002e00',
600: '#002900',
700: '#002400',
800: '#001f00',
900: '#001a00',
},
'apiida-dark': {
100: '#6a7d82',
200: '#51676d',
300: '#385159',
400: '#1f3c44',
DEFAULT: '#06262f',
500: '#06262f',
600: '#051e26',
700: '#04171c',
800: '#020f13',
900: '#010809',
},
'apiida-dark-lighter': {
50: '#F9FAFB',
100: '#F3F4F6',
200: '#E5E7EB',
300: '#D1D5DB',
400: '#9CA3AF',
DEFAULT: '#6B7280',
500: '#6B7280',
600: '#4B5563',
700: '#374151',
800: '#1F2937',
900: '#111827',
},
},
},
},
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/line-clamp')],
};Logo
We can exchange the logo via a so-called slot.
https://vuejs.org/guide/components/slots.html
You will add your own logos to the /src/components/app/ObsidianAppShell.vue class. This class contains the structure of the entire Developer Portal. The navigation, the menus for desktop and mobile view and much more.
Add your logo to the src/assets folder
You need your logo in 3 formats. About three times as wide as high (here APIIDA_DARK_LOGO), square (here LOGO_BLACK_SMALL) and as .ico file. Please make sure that the files are not too big.
Import your logo as an object
import APIIDA_DARK_LOGO from '../../assets/apiidaGray/Logo_Black.png'; import LOGO_BLACK_SMALL from '../../assets/apiidaGray/LOGO_BLACK_SMALL.png';
And add the Imported Image Objects to the return at the very end of the class.
return { config, APIIDA_DARK_LOGO, <!-- NEW --> LOGO_BLACK_SMALL, <!-- NEW --> localStorageKey, [...] }; }, }); </script>
Replace your logo with the help of a slot.
To do this, add the following to <TheAppShell> component.
For the last step, go to the index.html class. There you replace the .ico file.
After that, the class should look something like this.
Result
