Is it possible to access google Chrome's theme? - html

This must have been asked somewhere, but can't find where :(
I was reading up on finding out which browser someone was using in html.
My site uses a 'theme' (DevExpress' Black glass) and was wondering if there was a way of accessing Chrome's current theme, when the user is logged in.
I understand this has the potential to be a huge undertaking, but if it was possible, is there a way of getting the 'css' of chromes theme (obviously this would only apply if user was using chrome)?
I am currently writing a project in mvc, but any html/css approaches would be beneficial here.
For Example:
Is it possible to obtain access to the css of the 'Grass' theme (please note, this is just one example, there are many other themes available)?

As far as I know it's not possible, because it doesn't work like CSS. You have to get the JSON file, because I don't think it's possible from CRX.
Here is how a JSON file for a GC theme looks like:
{
"version": "1.0",
"name": "test theme",
"description": "A test theme",
"theme": {
"images" : {
"theme_frame" : "images/theme_frame_camo.png",
"theme_toolbar" : "images/theme_toolbar_camo.png",
"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
"theme_ntp_attribution" : "images/attribution.png"
},
"colors" : {
"frame" : [71, 105, 91],
"toolbar" : [207, 221, 192],
"ntp_text" : [20, 40, 0],
"ntp_link" : [36, 70, 0],
"ntp_section" : [207, 221, 192],
"button_background" : [255, 255, 255]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "bottom"
}
}
}
More info:
https://code.google.com/p/chromium/wiki/ThemeCreationGuide
BTW: Why would you want this, when there are 3-4 colors, no styles? You can get the colors with color picker.

Related

How to Customise VSCode id attributes?

I've recently moved from Atom to VSCode, while I managed to customise most of the editor according to my likings, I am still missing a few features that Atom had that I enjoyed.
One of those things is that the "id" attribute in Atom used to be a specific colour, something similar to #99FFFF. I've looked through themes but I couldn't manage to find one that makes the id attribute colour different then the rest of them.
Another feature that I enjoyed was the fact that when a new HTML element was created, eg. a div, it came with the most used, basic attributes by default. I got the hang of using the emmet snippets but it still doesn't work the same, probably because I don't know exactly how to use it properly yet. If there is a cheat sheet for this it would be greatly appreciated, or at least a few examples. Let's say I want to create an input element with a type, name, id and placeholder attribute, how would I go about to do that with emmet snippets?
Here is my settings.json
"editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
"editor.fontLigatures": true,
"editor.letterSpacing": 0.4,
"editor.smoothScrolling": true,
"workbench.iconTheme": "material-icon-theme",
"workbench.colorCustomizations": {
"editor.background": "#232323",
"sideBar.background": "#272727",
"sideBar.foreground": "#C9C9C9",
"editor.foreground": "#C9C9C9",
"statusBar.background": "#272727",
"activityBar.background": "#232323",
"titleBar.activeBackground": "#232323",
},
"window.zoomLevel": 1,
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"
You can change the color of the word id or its attribute value using the tokenColorCustomizations object in your settings.com:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"meta.attribute.id.html entity.other.attribute-name" // the word id
],
"settings": {
"foreground": "#ff0000",
// "fontStyle": "bold"
}
},
{
"scope": [
"meta.attribute.id.html string.quoted.double.html" // the id's vaue
],
"settings": {
"foreground": "#ff0000",
// "fontStyle": "bold"
}
}
]
}
See Editor Syntax Highlighting.

Is it possible to use Wireframe on a 3D gltf x-model in HTML?

I'm trying to achieve this:
https://threejs.org/examples/?q=wireframe#webgl_materials_wireframe
By following this tutorial:
https://keithclark.co.uk/articles/3d-models-in-html-documents/
I've already implemented model, made a materials and textures for it but as far i've achieved something like this: https://tomb.pl/projects/laptop/
But this wireframes (in my example) are just textures i would like to get a real wireframes as a rendered model materials. Is it possible this way? Or should i change direction? (I would like to stick to the x-model possibilities cause it will be great way to implement models in the future).
I've already found a material code inside glTF file
{
"alphaMode": "OPAQUE",
"doubleSided": true,
"emissiveFactor": [
0.0,
0.0,
0.0
],
"extensions": {
"KHR_materials_unlit": {}
},
"name": "lines",
"pbrMetallicRoughness": {
"baseColorTexture": {
"extensions": {
"KHR_texture_transform": {
"scale": [
-1.0,
-1.0
]
}
},
"index": 0
}
}
}
This is my main material but is it possible to change it via this code?
Appreciate every answer.
Well... if no one knows i've switched to xeogl - much better and faster results.
Also i believe better performance. Here is the final result:
https://tomb.pl/projects/examples/effects_ghost_materials.html

Style CZML paths thinner and with shade to ground

I want to display a GPS tracklog in my Cesium application. But I can't get a nice styling for the path working. What I want it to look like:
What it currently looks like:
This is how I style the path currently:
path : {
width : 2,
leadTime : 0,
resolution : 5,
material : {
polylineOutline : {
color : {
rgba : [255, 0, 0, 255]
}
},
},
},
What I want to have:
Thin colored lines without black blurry "outlines" (see second image and compare with first).
A faded area that marks the elevation above ground for the first section of the path.
SOLUTION:
For 1.) I now found a pretty similar solution thanks to emackey:
path : {
show : true,
leadTime : 0,
trailTime : 60,
width : 2.5,
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 15,
taperPower : 0.0001,
color : Cesium.Color.fromBytes(349, 66, 68, 255)
})
}
For 2.) I still haven't found what I'm looking for.
There isn't a built-in effect exactly like that first screenshot you posted from Ayvri (formerly Doarama), but, the most similar built-in thing could be the "tapered line" effect added earlier this year to Cesium:
Here's a demo. Click in the Cesium window and use the arrow keys to steer the aircraft.
These are the path settings from the demo:
path : {
show : true,
leadTime : 0,
trailTime : 60,
width : 10,
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.3,
taperPower : 0.3,
color : Cesium.Color.PALEGOLDENROD
})
}

How to make a mobile app screen size aware

I want to make a Cordova (Phonegap) app that can be used on all devices. Including PC screens. I want the layout to adjust the number and layout of panels (views) acording to some simple instructions. I chose the Dojox.app because of the way the config.json file controls the MVC structure of the app.
A Dojox.app uses controllers to handle size and orientation events. The config.json file contains "controllers", "views" and other elements to define the MVC structure of the app
//Mandatory,listen App.emit events,implement dojox/app/Controller
"controllers": [
//listens to "app-init, app-load"
"dojox/app/controllers/Load",
//listens to "app-transition, app-domNode"
"dojox/app/controllers/Transition",
//listens to "app-initLayout,app-layoutVIew,app-resize"
"dojox/app/controllers/Layout"
],
//Mandatory, one or a set of views view1+view2+view3
"defaultView": "home+rightPane",
//Mandatory, Specify Application child views
"views": {
"home":{
//Mandatory set template for defaultViews
"template": "app/views/home/home.html",
"controller" : "app/views/home/home.js",
"defaultView": "rightPane",
/* when transitioning between tabs, use a flip animation by default */
"defaultTransition": "slide",
/* the views available to this scene */
"views": {
"rightPane":{
//Mandatory set template for defaultViews
"template": "app/views/rightPane/right.html",
"controller" : "app/views/rightPane/right.js",
"defaultView": "general",
/* when transitioning between tabs, use a flip animation by default */
"defaultTransition": "slide",
/* the views available to this scene */
"views": {
"about":{
"template": "app/views/about/about.html",
"controller" : "app/views/about/view.js"
},
"wifi":{
"template": "app/views/wifi/wifi.html",
"controller" : "app/views/wifi/wifi.js"
},
"general":{
"template": "app/views/general/general.html",
"controller" : "app/views/general/general.js"
},
"picture":{
"template": "app/views/picture/picture.html",
"controller" : "app/views/picture/picture.js"
},
"bright":{
"template": "app/views/bright/bright.html",
"controller" : "app/views/bright/bright.js"
}
}
}
}
}
},
...
I want to create a custom controller by changeing the "dojox/app/controllers/Layout" to allow for the addition and subtraction of views depending on the screen sizs.
Dojo already has the experimental 'dojox/mobile/ScreenSizeAware' module but it is limited to two panels and does not work (well I haven't been able to) in a MVC environment.
How to go about defining the views in the config.json file and how to create the controller.
I'll give it some serious thought over the next few days. If you have any suggestions please jot them down here.
You should take a look at the dojox/app/tests/mediaQuery3ColumnApp, it will show 1, 2 or 3 columns depending upon the screen size. It includes a custom layout controller which uses css to handle the layout, and a custom navigation controller to try to handle which views to show when transitioning. It is not perfect, there are some issues with the navigation between views when the displayed columns has changed, but it should get you started.
You can run it here:
http://archive.dojotoolkit.org/nightly/checkout/dojox/app/tests/mediaQuery3ColumnApp/
And you can see the code here:
https://github.com/dmachi/dojox_application/tree/master/tests/mediaQuery3ColumnApp
Regards,
Ed

missing or unreadable manifest.json chrome extension

I am having problems trying to create a simple personalized shortcut on the chrome's new tab page. Having no experience in the coding world, i followed the steps in this cool site.
http://www.howtogeek.com/169220/how-to-create-custom-chrome-web-app-shortcuts-for-your-favorite-websites/
The problem is that when loading the uncompressed extension, it mentions that it cannot find the manifest file or is unreadable.
{
“manifest_version”: 2,
“name”: “cnn“,
“description”: “cnn site“,
“version”: “1.0″,
“icons”: {
“128″: “128.png”
},
“app”: {
“urls”: [
"http://cnn.com/"
],
“launch”: {
“web_url”: “http://cnn.com/”
}
},
“permissions”: [
"unlimitedStorage",
"notifications"
]
}
Is it correct? Does it have anything to do with my chrome language set to portuguese? I have already created an 128.png image, and the notepad title is exacly "manifest.json"
Hope you can help, Cheers SRD
Your quotation marks don't look correct.
Instead of using “ and ”, use ".