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. Thank You.

Answer 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 . ';
    }
';

I’m sorry if the code is not super readable, I am on my phone doing this.