Colors defined as CSS variables are NOT showing in the LIVE PREVIEW

[Dr-Bones2]

I'm not sure if you can help with this - but I've got another problem with the live preview on Visual Studio Code:

I've changed my CSS to define:

:root { --orange: #EC7600; }

Then, I've change my HTML from

This text will appear ORANGE

to:

This text will appear ORANGE `

This works fine on the Website (and within the View in Browser option in VS Code) - but the live preview panel on the side simply doesn't show up any of the colours?

Is this because of my setup, or a general issue with VS code?

[Dr-Bones2]

~I'm linking my stylesheet like this:

I'm not (to my knowledge) using any external libraries to post process my code

My folder structure is like this:

This is what the preview looks like:

This is what it should look like:

(Note: The colours that you DO see are the ones defined directly as HEX codes within the CSS. All of the colours defined as CSS Variables are not showing up...)

[andreamah]

Is there a link to your CSS file inside of the HTML file that you're editing? And if so, what does it look like? Also, when you're getting your desired result, how are you previewing it?

[Dr-Bones2]

Hi Andrea,

1) Yes the CSS is linked in the of the page - I know it is reading the CSS, because other formatting is coming from the CSS:

2) The CSS looks like this:

/ CSS Document /

@import url(' https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed&display=swap' ); @import url(' https://fonts.googleapis.com/css2?family=Share+Tech&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Amatic&display=swap');

@font-face { font-family: 'vt323'; src: url('vt323-regular-webfont.woff2') format('woff2'), url('vt323-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face { local('courier new'), local('courier_new'), local('courier-new'), font-family: 'courier new'; src: url('cour-webfont.woff2') format('woff2'), url('cour-webfont.woff') format('woff'); font-weight: normal; font-style: normal;

}

@font-face { local('courier new'), local('courier_new'), local('courier-new'), font-family: 'courier new'; src: url('courbd-webfont.woff2') format('woff2'), url('courbd-webfont.woff') format('woff'); font-weight: bold; font-style: normal;

}

@font-face { local('courier new'), local('courier_new'), local('courier-new'), font-family: 'courier new'; src: url('couri-webfont.woff2') format('woff2'), url('couri-webfont.woff') format('woff'); font-weight: normal; font-style: italic;

}

@font-face { local('courier new'), local('courier_new'), local('courier-new'), font-family: 'courier new'; src: url('courbi-webfont.woff2') format('woff2'), url('courbi-webfont.woff') format('woff'); font-weight: bold; font-style: italic;

}

:root { --darkblue: #003D6D; --midblue: #1E6EA0; --blue: #2B83C3; --paleblue: #95C1E1; --palerblue: #CFE2F1; --darkgreen: #2A6C2A; --midgreen: #48945A; --green: #62BE53; --palegreen: #B0DEA9; --palergreen: #D6EED2; --darkslate: #4A4E64; --midslate: #646A88; --slate: #9499B1; --paleslate: #CBCDE1; --palerslate: #E2E6EE; --darkcyan: #117F8F; --midcyan: #1E9194; --cyan: #00ADB1; --palecyan: #A5E2E6; --palercyan: #DFF0EE; --darkred: #941616; --midred: #AD1E16; --red: #E54239; --palered: #EF7D7A; --palerred: #FFBCBE; --darkfushia: #822D64; --midfushia: #973180; --fushia: #BD398C; --palefushia: #E08EBB; --palerefushia: #FAC8DE; --darkmauve: #693188; --midmauve: #8246A0; --mauve: #964CC0; --palemauve: #BC90DF; --palermauve: #D6B9E8; --darkorange: #B54A0F; --midorange: #DC6E0A; --orange: #EC7600; --paleorange: #FAB478; --palerorange: #FBE2C6; --darkgold: #AE9A19; --gold: #D2B70A; --midyellow: #E3D02A; --yellow: #F5E159; --paleyellow: #FFF069; --paleryellow: #FFF8A8; --darkpink: #D618C8; --midpink: #E72EE7; --pink: #FF70FF; --palepink: #FAC0FF; --palerpink: #FAE9F6; --bluepurple: #3E0F98; --palepurple: #5E64B5; --blueslate: #6280A8; --paleblueslate: #B0C0D6; --greenblue: #104E74; --darkbrown: #594329; --midbrown: #825F55; --brown: #AF938C; --palebrown: #D2C1BC; --pinkbrown: #AA8CAA; --darklime: #95B800; --midlime: #C8E61E; --lime: #CCF60A; --palelime: #E7FF8C; --applemint: #5AD39F; --palemint: #D3F8E0; --hotpink: #F046A0; --custard: #FABE32; --white: #FFFFFF; --greentint: #E4F5E1; --cyantint: #E6FAF7; --bluetint: #E9F8FF; --orangetint: #FFECCD; --fushiatint: #FAE6F2; --mauvetint: #F3EFFF; --yellowtint: #FAFAE3; --limetint: #ECFF8C; --redtint: #FFE0E3; --pinktint: #E5E0D8; --darkbluetint: #E0E8F0; --browntint: #EBE6E5; --darkgreentint: #E2E8E2; --greytint: #F0F1F4; }

body { font-family: 'Fira Sans Extra Condensed', sans-serif; color: #003D6D; counter-reset: sect; }

pre img { padding: 0 !important; margin: 0 !important; }

h1 { font-family:'share tech' !important; font-size:2rem; color: #006566; margin-top: 0.5rem; margin-bottom: 0.5rem; margin-left: 0.6em; margin-right: 0.6em; }

h2 {font-family:'share tech' !important; font-size:1.8rem; color: #6280A8; margin-bottom: 0.5rem; margin-bottom: 1rem; margin-left: 0.4em; margin-right: 0.4em; }

h3 {font-size:1.5rem; color: #147E7D; text-shadow: 1px 1px 1px rgba(60,145,145, 0.5); margin-bottom: 0.6rem; margin-top: 0.4rem; margin-left: 0.6em; margin-right: 0.6em; }

h4 {font-size:1.1rem; color: #0A78A0; margin-bottom: 0.5rem; margin-top: 0.4rem; margin-left: 0.6em; margin-right: 0.6em; }

h5 {font-family:'share tech' !important; font-size:1.1rem; color:#14648C; font-weight: 400; margin-bottom: 0.5rem; margin-top: 0.6rem; margin-left: 0.6em; margin-right: 0.6em; }

h6 {font-size:0.95rem !important; margin-top: 0.4rem; margin-bottom: 0.4rem; display: inline !important; margin-left: 0.6em; margin-right: 0.6em; }

p {font-size: 0.95rem; margin-top: 0.4rem; margin-bottom: 0.6rem; font-family: 'Fira Sans Extra Condensed' !important; color: #003D6D; margin-left: 0.6em; margin-right: 0.6em; }

pre { font-family: 'courier new', cour, monospace !important; background-color: transparent; padding: 0 0 0 0; font-size: 14px !important; font-weight: 700 !important; line-height: 1em !important; tab-size: 2 !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0.6rem; margin-right: 0 !important; overflow:hidden; }

pre sup { font-size: 0.65em !important; line-height:1em !important} pre sub { font-size: 0.6em !important; line-height:1em !important}

em {font-family: 'Noto Serif', serif !important; font-size: 1.15em; letter-spacing: -0.06em; font-weight: 600; text-shadow: 0.5px 0.5px 0.5px rgba(229,66, 57, 0.15); }

pre em {font-family: 'Noto Serif', serif !important; font-size: 1em !important; letter-spacing: 0 !important; font-weight: 600; text-shadow: 0.5px 0.5px 0.5px rgba(229,66, 57, 0.15); }

strong { position: relative; }

strong::after { content: ""; position: absolute; z-index: -1; bottom: -0.2em; left: -0.2em; right: -0.2em; height: 0.50em; background-image: url(" https://www.mathscool.org/images/Backgrounds/underline.svg"); background-repeat: no-repeat; background-size: cover; }

h2, h3, h4 > strong::after { height: 1.2em !important; bottom: -0.2em !important; left: -0.25em !important; right: -0.25em !important; }

h5 > strong::after { bottom: -0.35rem !important; height: 0.8rem !important; left: -0.25rem !important; right: -0.25rem !important; }

pre > strong::after { bottom: -0.2em !important; height: 0.4em !important; left: 0.2em; right: 0.2em; }

em > strong::after { bottom: 0.0em !important; height: 0.3em !important; left: 0.3em; right: 0.2em; }

del { text-decoration: none; background: linear-gradient(to left top, transparent 47.75%, #EC7600 49.5%, #EC7600 50.5%, transparent 52.25%), linear-gradient(to left top, transparent 42.75%, #EC7600 44.5%, #EC7600 50.5%, transparent 52.25%); }

/ End /

3) I get the desired result when I click on the ≡ in the top right corner of the Show Preview Pane and select "OPEN IN BROWSER" - this opens a tab within Google Chrome and it displays all of the colours perfectly...

For instance

Increases are found by adding to 100%:

comes out correctly in the color I've defined as palegreen in the Chrome TAB, but it stays the same color as I've defined

in the live preview panel

Hope you can help me to figure this out as I'm stuck without being able to see the colors live...

Dr Deepak Shah Maths Master at Math'scool 0333 12 33 445 www.mathscool.com

On Wed, 21 Aug 2024 at 20:55, Andrea Mah @.***> wrote:

Is there a link to your CSS file inside of the HTML file that you're editing? And if so, what does it look like? Also, when you're getting your desired result, how are you previewing it?

— Reply to this email directly, view it on GitHub https://github.com/microsoft/vscode-livepreview/issues/675#issuecomment-2302904381, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2O3VQ7DCZSIDCHI7CIPD6DZSTWDBAVCNFSM6AAAAABM4PF76WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBSHEYDIMZYGE . You are receiving this because you authored the thread.Message ID: @.***>

[andreamah]

Are you opening from the file explorer, or do you create a local server? Also, do you have a repository that I can clone to test? The code that you sent arrived without newlines (likely from responding to the issue via email) and it's a little tricky to see what's happening.

[Dr-Bones2]

I don't 100% understand these question - but I'll try my best to answer them:

1) I open the file by clicking: file > open file 2) On the bottom, under the live preview panel, it says: Port 3000

3) I don't even know what a repository is! If you can direct my to a video that will show me how to create one, I'm more than willing to do that In the meantime - here are direct links to the CSS and to one file from the website that you can access directly from a browser: CSS: https://www.mathscool.org/css/mathscoolNEW.css SAMPLE PAGE: https://www.mathscool.org/StudentsArea/purehints_fs/ex06-02_fs.htm

I hope that helps you to identify the issue - thank you so much for your continuing help (I have nowhere else to turn to for technical help like this...)

Dr Deepak Shah Maths Master at Math'scool 0333 12 33 445 www.mathscool.com

On Thu, 22 Aug 2024 at 18:10, Andrea Mah @.***> wrote:

Are you opening from the file explorer, or do you create a local server? Also, do you have a repository that I can clone to test? The code that you sent arrived without newlines (likely from responding to the issue via email) and it's a little tricky to see what's happening.

— Reply to this email directly, view it on GitHub https://github.com/microsoft/vscode-livepreview/issues/675#issuecomment-2305251556, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2O3VQ2BRA6X4LDUDL422KTZSYLRZAVCNFSM6AAAAABM4PF76WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBVGI2TCNJVGY . You are receiving this because you authored the thread.Message ID: @.***>

[Dr-Bones2]

I was messing around and II changed the link to the CSS in my header from https://www.mathscool.org/css/mathscoolNEW.css to ../../css/mathscoolNEW.css and that seems to have done the trick!

I have no idea what I'm doing really and I thought these would be the same (as it is the exact same CSS file loaded on the server) - so sorry for the hassle and thanks for your help...

Dr Deepak Shah Maths Master at Math'scool 0333 12 33 445 www.mathscool.com

On Fri, 23 Aug 2024 at 12:25, Dr Deepak Shah @.***> wrote:

I don't 100% understand these question - but I'll try my best to answer them:

1) I open the file by clicking: file > open file 2) On the bottom, under the live preview panel, it says: Port 3000

3) I don't even know what a repository is! If you can direct my to a video that will show me how to create one, I'm more than willing to do that In the meantime - here are direct links to the CSS and to one file from the website that you can access directly from a browser: CSS: https://www.mathscool.org/css/mathscoolNEW.css SAMPLE PAGE: https://www.mathscool.org/StudentsArea/purehints_fs/ex06-02_fs.htm

I hope that helps you to identify the issue - thank you so much for your continuing help (I have nowhere else to turn to for technical help like this...)

Dr Deepak Shah Maths Master at Math'scool 0333 12 33 445 www.mathscool.com

On Thu, 22 Aug 2024 at 18:10, Andrea Mah @.***> wrote:

Are you opening from the file explorer, or do you create a local server? Also, do you have a repository that I can clone to test? The code that you sent arrived without newlines (likely from responding to the issue via email) and it's a little tricky to see what's happening.

— Reply to this email directly, view it on GitHub https://github.com/microsoft/vscode-livepreview/issues/675#issuecomment-2305251556, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2O3VQ2BRA6X4LDUDL422KTZSYLRZAVCNFSM6AAAAABM4PF76WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBVGI2TCNJVGY . You are receiving this because you authored the thread.Message ID: @.***>