Custom Themes - quinton-ashley/nostlan GitHub Wiki

Creating Custom Themes for Nostlan : Patreon Premium Feature

You can create custom themes for Nostlan. You can make your own color palettes, styling rules, and even change the loading screens!

Nostlan is an electron app written in html/pug/css/js. When designing themes you should not require any resources to load from the internet. If you don't then your theme will not work offline. Link to all resources locally.

Custom Theme Styling

Edit the emu/nostlan/themes/{sys}/colors.css file to make color palettes. The example below shows the default black, blue, and white color palettes for the Nintendo 3DS.

.n3ds {
	--nav-color: #3f4044;
	--nav-text-color: #202125;
	--nav0Btn-color: #5A86C7;
	--nav2Btn-color: #009a6d;
	--nav3Btn-color: #DDBB62;
}

.n3ds.blue {
	--nav-color: #557eaa;
	--nav-text-color: #3a465e;
	--nav0Btn-color: #3a465e;
	--nav2Btn-color: #3a465e;
	--nav3Btn-color: #3a465e;
	--nav0Btn-text-color: #5A86C7;
	--nav2Btn-text-color: #009a6d;
	--nav3Btn-text-color: #DDBB62;
}

.n3ds.white {
	--nav-color: #ebebeb;
	--nav-text-color: #949494;
	--nav0Btn-color: #ffa93a;
	--nav2Btn-color: #ffa93a;
	--nav3Btn-color: #ffa93a;
	--nav0Btn-text-color: #5A86C7;
	--nav2Btn-text-color: #009a6d;
	--nav3Btn-text-color: #DDBB62;
}

Custom Intro Loading Screen

The intro loading screens emu/nostlan/themes/{sys}/intro.html for every system is displayed in Nostlan from a webview tag <webview> as guest content for security purposes.

<!DOCTYPE html>
<html>

<head>
	<title>intro n3ds</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./intro.css">
</head>

<body><img src="./intro.svg"></body>

</html>

Advanced Custom Theming

<webview> guest content is isolated in it's own sandbox, meaning it does not have access to node.js functions and can not call any of Nostlan's functions. This is done for security so users can download themes from anyone. Want to use jQuery or another popular web dev library? By writing themes in Pug you can gain access to a set of local variables that store the paths to Javascript/CSS libraries for guest content usage.

const guestLibs = {
  bootstrap_css: node_modules + '/bootstrap/dist/css/bootstrap.min.css',
  jquery_js: node_modules + '/jquery/dist/jquery.min.js',
  jquery_slim_js: node_modules + '/jquery/dist/jquery.slim.min.js',
  material_design_icons_css: node_modules + '/material-design-icons-iconfont/dist/material-design-icons.css',
  three_js: node_modules + '/three/build/three.min.js'
};