How can I use PHP variables in css without including the whole file?

Question

So, I am using UIKit and thought I'd be "smart". So, I turned it into a .php file, added style tags, and included it in my page. Apparently, that was a very bad idea. With the 12,241 lines of code being inserted into every page, my site won't even barely load. I am trying to make a select theme option for my users. So, I do it this way:

// Retrieve theme data
$query //to select theme information, such as colors

// Example of how this data is used
<style>
.uk-input,
.uk-select,
.uk-textarea {
    /* 1 */
    max-width: 100%;
    /* 2 */
    width: 100%;
    /* 3 */
    border: 0 none;
    /* 4 */
    padding: 0 10px;
    background: #<?php echo $theme_color1; ?>; // RETRIEVED FROM DB
    color: #<?php echo $theme_color3; ?>; // RETRIEVED FROM DB
    border: 1px solid #<?php echo $theme_color2; ?>; // RETRIEVED FROM DB
    transition: 0.2s ease-in-out;
    transition-property: color, background-color, border;
}
</style>

So, this is a very bad way of doing it when the CSS is so large. Can anyone advise me on the correct way to make a select theme option for my users? I would greatly appreciate it.

You can use w3schools.com/css/css3_variables.asp, and set value of variables inside PHP code — set4812
– set4812, Commented Jun 8, 2020 at 4:00
Like This? PHP file: <style>--color1: <?php echo $theme_color1; ?></style> CSS file: body { background-color:var(--color1); } — Donald Faulknor
– Donald Faulknor, Commented Jun 8, 2020 at 4:19
<style>:root { --main-bg-color: <?php echo $theme['bg']; ?>; --main-txt-color: <?php echo $theme['txt']; ?>; }</style> You missed selector. Some browser does not support caniuse.com/#feat=css-variables — set4812
– set4812, Commented Jun 8, 2020 at 4:34

TylerH · Accepted Answer · 2025-08-27 14:20:45Z

1

You could try this: Create a separate styles.css file with your default CSS info and in your code, make sure you use a link to reference the CSS file. Then, you could echo a style tag with a change. In your case, give it a default color of black in your styles.css and then in your code, reference only the color using the same selectors you used in your css file:

styles.css:

.uk-input,
.uk-select,
.uk-textarea {
    /* 1 */
    max-width: 100%;
    /* 2 */
    width: 100%;
    /* 3 */
    border: 0 none;
    /* 4 */
    padding: 0 10px;
    background: black;
    color: black;
    border: 1px solid black
    transition: 0.2s ease-in-out;
    transition-property: color, background-color, border;
}

In your PHP code:

echo '
    .uk-input,
    .uk-select,
    .uk-textarea {
        background:'. echo $theme_color1 . ';
        color:'. echo $theme_color3 . ';
        border: 1px solid '. echo $theme_color2 . ';
    }
';

edited Aug 27 at 14:20

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Jun 8, 2020 at 3:48

GuyInABlueShirt

562 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Donald Faulknor Over a year ago

hmm. I'll try something like that tomorrow and tell you how it went. Thanks for the suggestion.

Donald Faulknor Over a year ago

I'm wondering if set4812's suggestion is an even better option? I can do something like PHP file: <style>--color1: <?php echo $theme_color1; ?></style> CSS file: body { background-color:var(--color1); } ... right?

Collectives™ on Stack Overflow

How can I use PHP variables in css without including the whole file?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related